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/

Quick and Dirty Web Accessibility

Why