Slides from the February 2014 Siteimprove accessibility webinar series

1. WEB ACCESSIBILITY
An Introduction
What’s this? Another introduction to Web accessibility?
siteimprove.com
1-855-SITEIMPROVE
kry@siteimprove.com

2. Kevin Rydberg
Senior eAccessibility Consultant
www.linkedin.com/in/kevinrydberg
kry@Siteimprove.com
Follow Siteimprove
siteimprove.com
1-855-SITEIMPROVE
kry@siteimprove.com

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

18. WEB ACCESSIBILITY
Assistive Technology
siteimprove.com
1-855-SITEIMPROVE
kry@siteimprove.com

19. WEB ACCESSIBILITY
Assistive Technology
•
Screen Readers
siteimprove.com
1-855-SITEIMPROVE
kry@siteimprove.com

20. WEB ACCESSIBILITY
Assistive Technology
Screen Readers
• Windows and Mac Accessibility
•
siteimprove.com
1-855-SITEIMPROVE
kry@siteimprove.com

21. WEB ACCESSIBILITY
Assistive Technology
Screen Readers
• Windows and Mac Accessibility
• Color Contrast Analyzers
•
siteimprove.com
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

23. WEB ACCESSIBILITY
Assistive Technology
•
•
•
•
•
Screen Readers
Windows and Mac Accessibility
Color Contrast Analyzers
Toolbars/Extensions/Plug Ins
Mobile Devices
siteimprove.com
1-855-SITEIMPROVE
kry@siteimprove.com

24. WEB ACCESSIBILITY
Getting Started
siteimprove.com
1-855-SITEIMPROVE
kry@siteimprove.com

25. WEB ACCESSIBILITY
Getting Started
•
Know the Rules
siteimprove.com
1-855-SITEIMPROVE
kry@siteimprove.com

26. WEB ACCESSIBILITY
Getting Started
Know the Rules
• Practical Training and Testing Plans
•
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

31. academy.siteimprove.com
Accessibility Certification
• Non-technical Course
• Technical Course
• Web Governance Certification
•
Questions?
siteimprove.com
1-855-SITEIMPROVE
kry@siteimprove.com

32. Resources
•
WCAG 2.0
• Overview of WCAG 2.0
•
•
W3C’s WCAG 2.0 Homepage
•
•
www.w3.org/WAI/gettingstarted/Overview.html
Section 508
•
•
www.w3.org/TR/WCAG20/
Getting Started with Web Accessibility
•
•
www.w3.org/WAI/intro/wcag.php
www.section508.gov/
Web Standards for Government of Canada
•
www.tbs-sct.gc.ca/ws-nw/index-eng.asp
•
Web Experience Toolkit
•
•
wet-boew.github.io/wet-boew/index-en.html
AODA
•
http://www.mcss.gov.on.ca/en/mcss/programs/accessibility/
•
AODA Compliance Wizard
•
https://www.appacats.mcss.gov.on.ca/eadvisor/

33. Image Credits
!
•
•
•
•
•
•
•
•
•
•
•
•
•
•
http://boredomblows.files.wordpress.com/2011/10/trailer_park_boys_11.jpg
http://www.pdf-accessibility.com/wp-content/themes/publiread/images/content/sidebar/w3c-wcag.png
http://www.americantrails.org/508_logo_clear.gif
http://miketodd.typepad.com/photos/uncategorized/2007/12/06/canadian_flag.gif
http://www.united-states-flag.com/media/catalog/product/cache/1/image/
9df78eab33525d08d6e5fb8d27136e95//o/won46hf_-00_ontario-flag-4-x-6-inch.jpg
http://memegenerator.net/Scumbag-Steve
http://vector.me/files/images/1/5/150733/andy_tools_hammer_spanner_clip_art.jpg
http://memegenerator.net/Good-Guy-Greg
http://edudemic.com/wp-content/uploads/2010/12/browser_logos-256.png
http://www.brailleworks.com/blog/wp-content/uploads/2012/10/Freedom-Scientific-JAWS-forWindows-300x130.jpg
http://a.espncdn.com/photo/2012/0921/referees_nfl_g_mp_576.jpg
http://www.komarketingassociates.com/images/2010/07/low-hanging-fruit.jpg
http://www.xaas.com/Portals/0/Images/Solutions/HighTrafficCloudHosting/
XaaS_High_Traffic_Cloud_Hosting_Rounded.jpg
http://static.guim.co.uk/sys-images/Guardian/Pix/pixies/2013/2/25/1361807925686/Triple-Arating-008.jpg
•
http://jragsdale.files.wordpress.com/2007/06/corda1.jpg
•
http://memegenerator.net/The-Most-Interesting-Man-In-The-World

34. Siteimprove Web Governance Suite
•
•
•
•
•
Web Quality Assurance
Web Accessibility
Web Analytics
Search Engine Optimization (SEO)
Web Performance Alerts
Visit us at Siteimprove.com