3. WEB ACCESSIBILITY
What is the most popular and widely
used assistive device ever created?
!
Glasses!
(and contact lenses)
siteimprove.com
1-855-SITEIMPROVE
kry@siteimprove.com
4. WEB ACCESSIBILITY
An Introduction
Which standards do I use?
What are the benefits of accessible coding standards?
Nuts and Bolts
Assistive Technology
Getting Started
Questions/Demo
siteimprove.com
1-855-SITEIMPROVE
kry@siteimprove.com
5. WEB ACCESSIBILITY
An Introduction
Everyone
with a stake in the website
siteimprove.com
{
Marketing Staff
Web Developers
Web Designers
Content Managers
IT Staff
Non-technical Stakeholders
1-855-SITEIMPROVE
kry@siteimprove.com
6. Which standards do I use?
WEB ACCESSIBILITY
An Introduction
Which standards do I use?
WCAG 2.0
• Section 508
• Web Standards for the Government of Canada
• AODA (Ontario)
•
siteimprove.com
1-855-SITEIMPROVE
kry@siteimprove.com
7. WEB ACCESSIBILITY
An Introduction
WCAG 2.0
•
•
•
•
•
•
W3C
Perceivable
Operable
Understandable
Robust
Three levels, A, AA, and AAA
siteimprove.com
1-855-SITEIMPROVE
kry@siteimprove.com
8. WEB ACCESSIBILITY
An Introduction
Section 508
•
•
•
•
•
•
•
Software Applications and Operating Systems
Web-based Internet and Intranet
Telecommunications
Text
Video and Multimedia
Self Contained, Closed Products
Desktop and Portable Computers
siteimprove.com
1-855-SITEIMPROVE
kry@siteimprove.com
9. WEB ACCESSIBILITY
An Introduction
Web Standards for Government of Canada
•
•
•
•
•
Mobile Devices (New)
Interoperability
Usability
Accessibility
Web Experience Toolkit
siteimprove.com
1-855-SITEIMPROVE
kry@siteimprove.com
10. WEB ACCESSIBILITY
An Introduction
Accessibility for Ontarians with Disabilities Act (AODA)
•
•
•
•
•
•
Employment
Information and Communications
Transportation
Design of Public Spaces (Built Environment)
Based on WCAG 2.0
AODA Compliance Wizard
siteimprove.com
1-855-SITEIMPROVE
kry@siteimprove.com
11. WEB ACCESSIBILITY
Benefits of Accessible Coding
Social Responsibility
• Larger Customer Base
• Efficient Code
•
Website Maintenance
• Device compatibility
• Faster pages
• Improved SEO
•
siteimprove.com
1-855-SITEIMPROVE
kry@siteimprove.com
12. WEB ACCESSIBILITY
Nuts and Bolts
•
Semantic Markup
siteimprove.com
Semantic HTML is the use of HTML
markup to reinforce the semantics,
or meaning, of the information in
webpages rather than merely to
define its presentation or look.
1-855-SITEIMPROVE
kry@siteimprove.com
13. WEB ACCESSIBILITY
Nuts and Bolts
Semantic Markup
• Page Titles
•
siteimprove.com
The <title> element:
• defines a title in the browser toolbar
• displays a title for the page in search engine results
• provides a title when a page is added to favorites
1-855-SITEIMPROVE
kry@siteimprove.com
14. WEB ACCESSIBILITY
Nuts and Bolts
Semantic Markup
• Page Titles
• Headings
•
siteimprove.com
Don't use headings to make text BIG or bold
• Search engines use your headings to index the
structure and content of your web pages
• Users may skim your pages by headings; use headings
to show the document structure.
•
1-855-SITEIMPROVE
kry@siteimprove.com
15. WEB ACCESSIBILITY
Nuts and Bolts
Semantic Markup
• Page Titles
• Headings
• Graphics
•
siteimprove.com
Images can enhance comprehension
• Don't use color only as the sole means of conveying
meaning
• Use alternative text attributes on your image tags
• Be careful using text within images
•
1-855-SITEIMPROVE
kry@siteimprove.com
16. WEB ACCESSIBILITY
Nuts and Bolts
•
•
•
•
•
Semantic Markup
Page Titles
Headings
Graphics
Links
siteimprove.com
Clearly identify the target of each link
• Good link text should not be too general; don't use
"click here."
• Specify a "title" attribute that describes the target of
the link
• Provide a way to bypass or skip a group of links
•
1-855-SITEIMPROVE
kry@siteimprove.com
17. WEB ACCESSIBILITY
Nuts and Bolts
•
•
•
•
•
•
Semantic Markup
Page Titles
Headings
Graphics
Links
Tables and Forms
siteimprove.com
•
•
•
•
•
Use tables to display data, not for page layout
Use table headers to organize data
Make forms logical and easy to use
Make forms keyboard accessible
Be sure to use labels with form elements
1-855-SITEIMPROVE
kry@siteimprove.com
22. WEB ACCESSIBILITY
Assistive Technology
Screen Readers
• Windows and Mac Accessibility
• Color Contrast Analyzers
• Toolbars/Extensions/Plug Ins
•
siteimprove.com
1-855-SITEIMPROVE
kry@siteimprove.com
27. WEB ACCESSIBILITY
Getting Started
Know the Rules
• Practical Training and Testing Plans
• Low-hanging Fruit
•
siteimprove.com
1-855-SITEIMPROVE
kry@siteimprove.com
28. WEB ACCESSIBILITY
Getting Started
Know the Rules
• Practical Training and Testing Plans
• Low-hanging Fruit
• High Traffic Pages
•
siteimprove.com
1-855-SITEIMPROVE
kry@siteimprove.com
29. WEB ACCESSIBILITY
Getting Started
•
•
•
•
•
Know the Rules
Practical Training and Testing Plans
Low-hanging Fruit
High Traffic Pages
A-level Errors
siteimprove.com
1-855-SITEIMPROVE
kry@siteimprove.com
30. WEB ACCESSIBILITY
Getting Started
•
•
•
•
•
•
Know the Rules
Practical Training and Testing Plans
Low-hanging Fruit
High Traffic Pages
A-level Errors
Report and Track Progress
siteimprove.com
1-855-SITEIMPROVE
kry@siteimprove.com
34. Siteimprove Web Governance Suite
•
•
•
•
•
Web Quality Assurance
Web Accessibility
Web Analytics
Search Engine Optimization (SEO)
Web Performance Alerts
Visit us at Siteimprove.com