This document discusses web accessibility, which means making websites usable for all people regardless of ability or disability. It defines various types of impairments that accessibility aims to support such as visual, hearing, motor and cognitive. The document provides best practices for making websites more accessible, such as adding alt text to images, using descriptive link text, providing captions for videos, ensuring adequate color contrast and logical tab order. It also discusses WAI-ARIA, which adds attributes to HTML to make interfaces more accessible, and provides resources for learning more about accessibility.

1. What is Web
Accessibility?
And why do we need it?

2. Let’s watch a video
 Screen Reader Demo

3. Defining Web Accessibility
 Web Accessibility means making your website usable for all people.
 Visual Impairments
 Hearing Impairments
 Motor Impairments
 Cognitive Impairments
 An Alphabet of Accessibility Issues

4. Key Points about Accessibility
1. Accessibility is not just a checklist
2. Accessibility is a recommended for Higher Ed institutions
3. Accessibility is not just for the disabled
“Everybody is a keyboard user when eating
with their mouse hand.”
– Adrian Roselli

5. Make your Website more Accessible
1. Provide alt text on images
2. Use HTML structural elements
3. Make link text descriptive
4. Use web conventions where you can
5. Provide captions for videos

6. Skip Link
 Useful for users who can’t visually skip the navigational links at the top of a
page
 Should be one of the first elements on the page
 Should link to the main content area of the page
 Example:
• <a href="#maincontent">Skip to main content</a>
• …some navigation here…
• <main id="maincontent>

7. Links
 Be descriptive!
 Use good color contrast
 If there is no link text, include hidden text
 Provide a focus state for links

8. Color Contrast
 Level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large
text.
 Try turning on high-contrast mode (Windows/IE); is your site still usable?
 Other tools:
• Lea Verou’s Contrast Ratio Checker
• Chrome’s Color Contrast Analyzer
• WebAIM’s Color Contrast Checker

9. Tab Order
 Tab through your web page. Does the order make sense?
 Can you interact with all the controls without using your mouse?
 Can you tell which item has focus?
 Changing the tabindex can help:
• tabindex=“0” adds element to natural document order
• tabindex=“-1” takes element out of the tab order

10. Layout
 Turn off images; does your site still make sense? Is any content missing?
 Turn off CSS; is your site still in a reasonable order? Is any content missing?
 Tools:
• Chrome developer toolbar

11. Using WAI-ARIA
 Stands for: Web Accessibility Initiative - Accessible Rich Internet Applications
 Attributes that can be added to HTML
• Roles: button, tree…
• States & Properties: aria-hidden, aria-haspopup…

12. Using WAI-ARIA
 Tabs widget example:
• http://heydonworks.com/practical_aria_examples/#tab-interface
 Treeview example:
• http://oaa-accessibility.org/example/42/

13. Resources
 Articles:
• Good aria intro: http://www.smashingmagazine.com/2014/07/the-wai-forward/
• Bite-sized accessibility: http://diveintoaccessibility.info/table_of_contents.html
 Videos/Slides:
• General accessibility talk: http://blog.adrianroselli.com/2014/09/accessibility-
camp-toronto-slides.html
• Aria for widgets: https://vimeo.com/73427435
 Reference:
• http://www.w3.org/WAI/intro/wcag
 Testing:
• http://wave.webaim.org/
• http://achecker.ca/checker/index.php
• Chrome Vox screenreader