“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect”Tim Berners-Lee, W3C Director and inventor of the World Wide Web
“Web accessibility means that people with disabilities can perceive, understand, navigate and interact with the Web, and that they can contribute to the Web.”Introduction to Web Accessibility
This can be non-sighted users, users with low-vision, users with obstructed vision, or older users.Screen readers, brail output, text zooming, high color contrast controls and keyboard navigation can be useful.
Users with hearing disabilities.Captions and alternatives for sound-neccessary media can be useful.
A limitation in the independent or purposeful physical movement of the body or of one or more extremities.Because not everyone can use a mouse or click on small links people with motor disabilities typically use the keyboard, eye trackers, or single buttons to navigate their computer.
Involve disorders of any part of the nervous system, including the brain and the peripheral nervous system. This can impact how well people hear, move, see, speak, and understand information.Users may user a variety of assistive technologies including spelling and grammer tools, bookmarks and history, text-to-speach and voice browser. Users may benefit from document outlines, descriptive titles and easy to read text.
Provides services beyond those offered
by the browser to facilitate user interaction
with web content by people with disabilities
Activate VoiceOver from Settings > General > Accessibility
Once VoiceOver is Activated
Activate an Item on the Screen: Double Tap
Next Item: Flick Right
Previous Item: Flick Left
Scroll Down/Up: Three Finger Up/Down
Activate Rotor: Turn Clock-wise
Next/Previous Rotor Item: Flick Down/Flick Up
Activate VoiceOver from System Preferences > Accessibility > Enable VoiceOver checkbox
Turn on VoiceOver: command + F5
Use the VO Keys for many tasks: control + option
From the address bar enter the Web area: VO + shift + down arrow
Next item: VO + right arrow
Previous item: VO + left arrow
Open Web Roter: VO + U
The Web Roter is used to navigate a page by various elements such as headings, landmarks or links
Semantic HTML elements are immediately identified by the accessibility API and interpreted by screen readers. Non-semantic elements convey no information to the accessibility API.
The example above is often seen when developers implement a div with a CSS background as a link. A common example would be the implemenation of a social sharing icon on a site.Non-Semantic Button Example
The following exercises illustrate how semantic HTML elements and non-semantic elements can look the same but are interpreted differently by screen readers
Use VoiceOver to read content that uses
Non-Semantic HTML elements
Modify the HTML using Semantic HTML elements
and read the page again
The WAVE browser extension from WebAIM allows you to evaluate web content for accessibility issues directly within the browser. It is available for Chrome and FireFox.WAVE Web Accessibilty Evaluation Tool
Once installed a "W" icon will appear in the browser toolbar. Press the icon to run an audit of the page. Errors and warnings will appear within the page. Click the error or warning to see more information in the left of the browser.
tota11y is an accessibility visualization toolkit from Khan Academy. It can be added to Chrome from the Chrome Web Storetota11y Accessibility Visualization Toolkit
Use an accessibility testing plugin to run an automated test of our corrected pageSemantic Corrections
A technical standard made of Four Principles with Twelve Guidelines containing testable Success Criteria
At first glance the WCAG may look hard to understand. It contains a lot of information.Web Content Accessibility Guidelines 2.0
Together, let's take a look at some easier ways to use these guidelinesWCAG 2 at a Glance
Correct errors produced by automated test resultsModify HTML from Exercise Two
DOCTYPE html lang="en"
Join our mailing list
A set of accessibility attributes especially suited to HTML
Roles define the type of element or widget presented to the accessibility API
Landmark Roles - Identify content areas of a page. Help assistive devices navigate pages.
Widget Roles - Act as standalone user interface widgets or as part of larger, composite widgets.
Document Structure Roles - Describe structures that organize content in a page. Document structures are not usually interactive.
Abstract Roles - Abstract roles are used for the ontology. Not used in code.This workshop focuses on Landmark and Widget roles
role = main
The main content of a page. Should only be used once on a page.
role = banner
Typically the “header” of a page that includes the site logo.
role = contentinfo
Typically the “footer” of a page which includes information such as copyright.
role = navigation
A collection of links to navigate the site.
Landmark roles will be used in the final project
role = button
role = checkbox
role = radio
The folowing roles typically act as containers that manage othe widgets:
role = radiogroup
role = tablist
1. Assign a varity of widget roles to a div
2. Listen to changes in the screen readerTry It
States and Properities announce the state of an element to the accessibility API. Often times, but not always, states are activated by user interaction
For example you can let a user know that a form input field is required by using aria-required="true"
role = checkbox | aria-selected = true
input type = text | aria-required = true
role = button | aria-pressed = true or false (creates a toggle button)
1. Assign selected ARIA States and Properties to Semantic HTML
2. Listen to changes in the screen readerTry It