Tutorial with examples for making web pages more accessible.

Quick start accessibility

I have been looking at web accessibility recently due to an up and
coming project with a global client who needs their site to be AAA
where possible.

It has made me realise how small things can make a huge difference. Here are some quickstart ways to enhance the accessibility of your sites.

1. Hidden accessibility navigation for screen readers

You should include navigation for the sections within each page. This makes it much easier for people using screen readers or mobile devices to go directly to the content they want.

The CSS:

#nav-acc {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 39px;
}
#nav-acc p    { position:absolute; top: auto; left: -10000px; width: 1px; height: 1px; }
#nav-acc ul   { list-style: none; margin:0; padding: 0; }
#nav-acc li    { list-style: none; list-style-image: none; }
#nav-acc a    {
    position:absolute;
    display: block;
    top: auto;
    left: -10000px;
    width: 1px;
    height: 1px;
}
#nav-acc a:active,
#nav-acc a:focus {
    z-index: 1000;
    top: 0;
    left: 0px;
    width: 350px;
    height: 20px;
    background-color: white;
    border: 1px dotted #ccc;
    padding: 5px;
}

The HTML:

<div id="nav-acc">
 <p>
     <strong>Accessibility links</strong>
 </p>
 <ul>
     <li><a accesskey="c" href="#content">Jump to main content [Access key 'C']</a></li>
     <li><a accesskey="n" href="#nav-primary">Jump to primary navigation [Access key 'N']</a></li>
 </ul>
</div>

Acessibility Items

There will also be various elements within your markup which need to be hidden on screen but help describe items for screen readers. For this you can use the following class and markup:

CSS

.acc-item { position:absolute; display: block; top: auto; left: -10000px; width: 1px; height: 1px; }

HTML

<span class="acc-item">description of something for screen readers</span>

2. Label form information

When structuring your forms I expect you will already be using labels for input controls but if you have a series of inputs relating to a single label (ie Address) you should include labels for each of the inputs (ie Address Line 1,Address Line 2) here is some markup to show how we could achieve this. Note that we use the acc-item class to hide the individual labels.

<fieldset>
 <span class="labelHeader">Address</span>
   <label>
     <span class="acc-item">Address 1</span>
     <input type="text" />
   </label>
   <label>
     <span class="acc-item">Address 2</span>
     <input type="text" />
   </label>
   <label>
     <span class="acc-item">Address 3</span>
     <input type="text" />
   </label>
</fieldset>

3. Document strucure

Make sure that the structure of your markup is in the same order as you
would want to read it. A good check for this is to turn off all styles
within the view menu of firefox.

Conclusion

I hope this has been helpful, it is a really quick start for anybody who hasn’t got a huge amount of time to go any deeper. For further reading the reference below goes in to more detail. It’s not particularly hard to implement these practices so lets make the web a more accessible place.

References

http://webaim.org/techniques/css/invisiblecontent/