Quick and Dirty Web Accessibility
Tags: tutorial, beginners, a11y
Published: 2018-07-09 04:20:43

---
title: Quick and Dirty Web Accessibility
published: true
description: No-frills approach to web accessibility
tags: tutorial, beginners, a11y
cover_image: https://thepracticaldev.s3.amazonaws.com/i/gon2migk1vvvjb94umek.png
---

#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/