Ryan Florence presenting "Bringing the Web Back to the Blind".
Probably the biggest accessiblity resource on the web: webaim.org.
AccessiblityAccessiblity 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.
LandmarksUse the role tag on elements. For example:
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 ContentUse 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.
ARIAAdd screen reader specific text with an attribute:
aria-label="A close button"
Tell the screen reader to ignore an element with:
WAI ARIA is a specification that defines how to make your website more accessible.
Aria attributes that can be used with tabs:
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.