Why
- Legal Reasons: "equal opportunity", "reasonable accommodation"
- Government contracts
- SEO... sort of.
How Long
Shouldn't take long.
How
Use semantic HTML
Use the semantic HTML5 elements - header, footer, nav, main,
dialog (w/polyfill), article, section, aside. They double as ARIA
landmarks so you won't need to deal with those. Also use semantic HTML4 elements, like label on input fields.
Skip navigation link
You need:
a. A screen-reader only class:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
b. A link after your body element:
<body>
<a class="sr-only" href="#main" tabindex="0">Skip to Main Content</a>
c. Give your main element that ID:
<main id="main">
WAVE Accessibility Checker Browser Extension
Why this one? Because there's a WAVE Accessibility Checker extension for both Firefox and Chrome, and that covers 99% of the people I know.
None of the accessibility checkers do a particularly good job. Clear out the errors, ignore warnings and manual checks. Common errors are missing alt attributes on images and empty headings.
Keyboard Navigation - tabindex
In this step you'll be adding tabindex to everything "interactable" - anything a user might click on like a link or a text input field. Don't worry about text sections, people who actually know how to use screen readers will be able to manage that.
There are only two values for tabindex:
-
0: can tab to this element. -
-1: can't tab to this element.
Tabbing should follow the DOM order, which is why we only use 0. Hidden stuff like menu items should have -1. Install the ChromeVox screen reader browser extension to test this - it's free and it does the job.
Other Stuff
You're probably going to have some keyboard navigation one-offs, like 'Press enter to open the menu and the arrow keys to navigate the menu items'. Tell the user that with the aria-label attribute.
If you have content that updates without user interaction, like notifications, use the aria-live="polite" attribute and value on it. That will tell the user something happened.
If you have links that only say "Click Here" you're doing it wrong.
If you have a hover event handler or CSS pseudo-class, then make it do that same thing on focus, too.
If you have a click event handler, you're going to want to add the same handler for keypress against event.key === 'Enter'.
Good Enough?
Good enough to argue in court that you made an effort.
Not Good Enough?
- The idea is that all users have an equivalent experience with the website.
- Reach out to a consultant, they have the expensive screen readers.
- Enlist actual disabled people to assist with testing.
Notes
Ganked image from Google Image Search's 'labeled for reuse' tool. Originally on https://yoast.com/http-503-site-maintenance-seo/
Top comments (0)