Bringing the Web Back to the Blind with Ryan Florence

Ryan Florence presenting “Bringing the Web Back to the Blind”.

Probably the biggest accessiblity resource on the web: webaim.org.

Accessiblity

Accessiblity is more than just alt tags. You still want alt tags but there’s more.

Use your headers for organization of content rather than for visual display. It helps blind users navigation through
the content based on its importance.

Landmarks

Use the role tag on elements. For example:

</pre>

Adding 'role="main"' provides a 'landmark' in the page that a screen reader can find. A blind user can use these landmarks
to quickly navigate to specific sections of the page.

Html 5 includes a 'main' tag as well as others like 'article' that screen readers can use as landmarks.

Screen Reader Specific Content
Use css to hide text that is important for screen readers. Create a 'visually-hidden' css class then include
additional information to to describe the element. For example, developers frequently use an 'x' to close a modal
or other window. The screen reader will read this as 'times'. We can add additional information indicating that the
link/button will close the window.

Screen readers will execute Javascript!

ARIA
Add screen reader specific text with an attribute:

aria-label="A close button"


Tell the screen reader to ignore an element with:

aria-hidden="true"


WAI ARIA is a specification that defines how to make your website more accessible.

Aria attributes that can be used with tabs:

 - aria-selected
 - aria-controls
 - aria-expanded

However, if you don't know how to use 'aria' then don't. You'll probably make things worse.

We frequently think of Visual Interaction Design. Consider "Audible Interaction Design". Try out a screen reader and
see what it's like to use your website without the visual UI.