loading...
Cover image for Quick and Dirty Web Accessibility

Quick and Dirty Web Accessibility

antonfrattaroli profile image Anton Frattaroli ・2 min read

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/

Discussion

pic
Editor guide