We all want to do right. We want to allow people with vision or motor skill problems to visit our sites. Yet very few of us do. So what's the problem?

Well, overhead is one frequent issue we hear about. Some designers say they either don't know how or don't have time. The interest is there. The means… not so much.

Today we're going to address both. We're going to share our research in making Foundation more accessible — techniques we figured out because a) we're committed to a more accessible web and b) deadlines happen.

By the time you're done with this lesson, you'll be able to improve any page's accessibility in five minutes or less. Ready? Go!

1 min: Skip navigation with roles

People who first visit a page want to know if it has the information they want, or content that will interest them. Give them the option to back out quickly. Help people get right to the heart of the page.

One minute? Sure. Here's how:

1. Divide your page into a few regions: Navigation, main, footer, sidebar.
2. Add role="navigation" to the navigation.
3. Add role="main" to the main section.

And you're done, for now. (Actually, there's a bit more we can do… more on that later.)

2 minutes: Tab index

Tab index lets users move forward and backward through the links and form elements on a page. But you can make anything "tabbable" with the tabindex attribute. 

<h2 tabindex="1">…</h2>

<article tabindex="2">…</article>

<ul tabindex="3">…</ul>

As the numbers suggest, tapping on the tab key takes users through anything with the tabindex attribute in order. In HTML5, you can use it on any element. That means you can set priorities quickly. Want to help people get past the same tedious navigation they get on every page? Use tabindex to put navigation last.

Tip: When starting out use sets of 10: tabindex="10", tabindex="20", tabindex="30". If you decide to rearrange the order — say, put the third item between the first and second — you don't have to rearrange everything. Just make it tabindex="15".

There's one more trick we'll cover later. But we're in a hurry, so set a few tabindices and move on.

2 minutes: Write alt attributes with purpose

Using alt alt attributes in images is nothing new. But writing great text for images takes a little practice.

Start with a true statement

Let's take a typical example: "baseball". That's it. One word describing an image we found on a real website. Now, we're not going to show you the image itself; can you guess what it looks like? Neither can people using screen readers.

Let's write something better.

As the old saying goes, "this is not a pipe." An image is not the thing — it's a collection of pixels that make a representation of a thing. With that in mind, we start a good alt attribute with a noun.

• "Photo of…"
• "Illustration of…"
• "Screenshot of…"
• "Painting of…"

Use specific words

Pick two or three things in the photo to be specific about what the pic represents.

• "baseball game"
• "children"
• "park"

Put it together: "Photo of a child playing baseball in the park." With a little practice, we've found that descriptive alts don't take much effort at all.

And that's half of the point: We want to spend less time programming and more time solving design problems. It's not just accessibility. Time debugging HTML, Sass and JavaScript is time lost. But accessibility is easy. Role, tabindex and alt attributes aren't complex. Take a few minutes now and try it on this sample page — then compare your ideas to download one we prepared.

A few more minutes

Five minutes is token effort. We can do more.

Let users skip navigation with a link

A simple link that doesn't appear to sighted users will help those with screen readers get to content faster.

.skip { visibility: hidden; }
<a href="#skip-navigation>

And put this just above where the content start:

<a name="#skip-navigation"></a>

Note: That's "visibility: hidden", not "display: none".

Avoid tabs with tabindex

Some readers discover links and regions, even if you set up tabindex across the page. If you set an element to tabindex="-1", screen readers should dodge those sections altogether. We use this for complex off-canvas navigation.

So even if you're in a hurry, accessible products are just a five minutes away. Ready? Go!

---