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…
She’s using JAWS (Job Application with Speech)
Start at 4:35, then it’s about 10 mins long
Interesting points: links list, heading list
Visual (Blindness, low vision, color-blindness)
Hearing (Deafness, hard-of-hearing)
Motor (Inability to use a mouse, slow response time, limited fine motor control)
Cognitive (Learning disabilities, distractibility, inability to remember or focus on large amounts of information)
Checklists help, but they can’t catch everything
Federal organizations and organizations that receive government funding through the Assistive Technology Act are required
Accessibility benefits everyone, ie: power users tabbing through forms, Google bots
1. Use empty alt tag for images that are non-essential; limit tags to 125 characters
2. Example: header, nav, h1, etc
3. Helpful for link lists in Jaws
4. Example: underlines for links
Level A does not require a certain contrast ratio, but should we consider this anyway?
<div>, <span>, <p> don’t get added to tab order by default
I could do a whole presentation on this!
Show requirement: http://www.w3.org/TR/wai-aria-practices/#tabpanel