Web site design communities have long neglected the accessibility needs of disabled (be it visually, physically or otherwise) and older users.

However, accessibility is coming more to the fore, not least because of the increased exposure of Section 508 of the US Rehabilitation Act Amendments of 1998 (cf. the penalty imposed on the 2000 Olympics website, based on the Australian forerunner to Section 508).

However, much of the time accessibility is treated as an afterthought, rather than being approached in a proactive fashion from the onset of the design and development life cycle.

I’ve outlined 14 tips and techniques here that I feel are a good place to start on making your site accessible.

Why should I make my site accessible?

It’s basic good manners! You don’t put white text on a white background, as people won’t see it, so you should avoid using colours that are indistinguishable to people with colour deficiencies. About 8% of adult males suffer from one type of colour deficiency of some form – if your site uses a colour scheme that is not compatible with their colour deficiencies, they’ll leave. We do our utmost to support browser versions used by 2 – 4% of people! So we should be catering for this significant user group.

It’s also becoming the law – while Section 508 is primarily for US governmental and state sites, I believe that soon enough we will see more formal moves that will mean all new sites should comply to some basic accessibility rules.

There is a large group of people with disabilities surfing the web. They may be interested in the content of your site, they might like to buy the product that you are selling – however, if your site isn’t accessible you’re loosing users and you’re loosing sales… it’s as simple as that.

So, what can I do? Here are the 14 Tips.

1. Specify the language used on your page.

Very, very often overlooked! If you don’t specify the language that the content of your page is written in, screen readers will make a stab at guessing it – and may well get it wrong.

This is especially true of technical pages, or pages where the content is based on a topic that uses a lot of terminology or topic specific vernacular.

You can also use lang= on the <div>, <span> and <p> tags (to name a few), meaning that a paragraph of German text can be identified to a screen reader by using: <p lang=”de”>

Tip: Using <html lang=”en”> identifies the page as being in English.

2. Use descriptive page titles

Many screen readers have keyboard shortcuts that allows the user to toggle through the currently open windows by reading out the title of the window.

Tip: After the <head> tag insert a <title> tag describing the page, like this: <title>My Site Name: Products and Services Page</title>

3. Additional Navigation

Many people will know this from using it to call in external CSS files (i.e. cascading style sheets defining the formatting of a page).

However, the link tag has a very important use in making your site accessible for people using screen readers, as these will be displayed (for want of a better word) at the top of the page.

Try it! Put in some <link>‘s and view the page in Lynx – it behaves similarly to a screen reader.

Tip: Include a link tag in the <head> section of the web page: <link rel=”Home” title=”Home” href=http://www.mySite.com/index.html>

4. Content on top

Many will know that using CSS to position your content at the top of the html code has may advantages in search engine optimization (SEO). However, this is also a very important technique in accessibility.

This means that people using screen readers do not have to scroll through the entire navigation of the site before getting to the content. This does lead us into the next point.

5. Skip Navigation Link

If the content on top option is not viable for you, then it is important to use a “Skip Navigation” link.

Just add an anchor before your main navigation <a href=”#mainContent” title=”Skip Navigation”>Skip Navigation</a>, and have a named anchor at the start of your content <a name=”mainContent”></a>.

This allows users to skip the navigation and start chewing through your copy.

Obviously you don’t want this on your visually rich page, so some simple CSS will sort this out:

.skipNav {
    display: none;
}

This will hide it from the visual browsers, but it will display perfectly in text and some speech browsers. For more CSS compliant browsers, using an alternative stylesheet for screen readers (media=”aural”) and setting display: inline;”

Tip: Add a skip navigation link that brings the reader straight down to the main content of the page.

6. Colour

As mentioned above, cater for the ~8% of people with colour deficiencies. Flag your links clearly, for example green text and red links will be identical to deuteranopic (red/green colour deficiency) users.

I always underline my links, but bolding and a good colour variation will do too!

Tip: Use the VisCheck online page checker to see how your page looks to people with colour deficiencies.

7. JavaScript Links

Again, SEO people will tell you not to do this as spiders can’t/won’t follow JavaScript links. Similarly, for accessibility reasons.

Stats say that 11% of users browse without JavaScript, which includes disabled users whose browsers just don’t support it.

Tip: Put the link in as normal in the href and run your script onClick, overriding the default action with a return false; <a href=”some/link.html” title=”Link Title” onClick=”runScript(); return false”>The Link</a>

8. Link Titles

Needs no explanation really – does it?

Tip: Use the title function in links: <a href=”seo.html” title=”On how to design accessible web pages”>Web usability</A>

9. Access keys

These are basically keyboard shortcuts to various pages on your site. Fully supported in screen readers and somewhat supported in visual browsers, by using ALT+ a number, followed by Enter, users can navigate directly to the page.

Here is the code: <a href=”home.html” title=”Home” accesskey=”1″>Home</a>.

You can use it for your skip navigation too! There are some unwritten conventions for access key assignment: 1 is generally for the home page, 2 is generally for the Skip Navigation and 9 is generally for the Contact Page.

Tip: Many sites have accessibility statements that outline the access key values and functions, and sometimes also define acronyms and abbreviations. It is important to make sure that your access keys are defined – thus, an Accessibility Statement.

10. Table Elements

Use table headers to specify the legend on data tables:

<tr>
<th>Column 1 Header</th>
<th>Column 2 Header</th>
</tr>

One of most omitted accessibility element is the summary on tables. This acts as a summary of the contents of a table. This summary is never displayed in visual browsers, but a screen-reader user will get a summary of the table before being read it’s contents. Think of it as an ALT tag for tables!

Here is the code: <table summary=”A summary of the table”>

11. Images

The alt attribute goes without saying, but don’t forget the longdesc attribute. This is a link to a file (generally text, or text only html) that gives a more comprehensive description of the image that the alt text.

So called “spacer” images should use a blank alt tag (alt=”") to reduce page clutter to the screen reader.

Tip: Image maps should always have an associated longdesc, to explain the contents and areas of the image map. Also, don’t forget the title attribute on your <area> calls.

12. Fonts

Here I will emphatically say: Use Relative Font Units! This is an accessibility issue for users whose eyesight is impaired, but are not totally blind. IE will not increase the size of a fixed font unit (View > Text Size)

Tip: I’ve found that 80% is a good size to use for your body text! A good formula for working our percentage or em values is outlined at WebmasterWorld.

13. Forms

Use labels! This allows visually impaired users to know what each form input element is for!

Tip: <label for=”workPhone”>Work Phone Number (Optional)</label> <input type=”text” id=”workPhone”>

14. Acronyms and Abbreviations

If you use acronyms and abbreviations (this is especially true for technical sites), always use the <acronym> and <abbr> tags.

This defines the meaning of the acronym/abbreviation and also makes the screen reader pronounce the letters correctly.

Tip: <acronym title=”Cascading Style Sheets”>CSS</acronym>

I hope that you have found this informative, and you may even have learned something new! The main point is that with little effort and make it part of your development life cycle, making your site accessible is very straight forward.

Useful Links:

Bobby accessibility test site
Section 508 information
World Wide Web Consortium
Web Accessibility Initiative (WAI)