Making Your Site Accessible

In a follow up to what is accessibility this article covers a few methods to make your site accessible to anyone, from anywhere. This is not the definitive guide, but it will set you on the right tracks. In the code snippets I will be using HTML4 strict as my chosen mark-up language.

The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.

Tim Berners-Lee, W3C Director and inventor of the World Wide Web.

Semantic Layout

The very first step should be to make your site legible. This can be done by using a semantic layout. These means your page will read like any document would, Word for example. The page should have a structure with headers flowing in a logical order.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <!-- keywords, description and other meta here -->
</head>
<body>
    <h1 id="site_name">Site Name</h1>
    <div id="intro"><p>This is introduction text</p></div>
    <h2 id="site_menu">Menu</h2>
    <ul id="menu">
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    </ul>
    <h1 id="page_title">Page Title</h1>
    <div id="content"><p>This is the main body of your page</p>
    <h2 id="sub_title">Another Header</h2>
    <p>Some more text</p></div>
    <div id="footer">Footer text</div>
</body>
</html>

A few things to note from the layout.

With no style sheet, the page reads like a document
IDs have been given meaning full names
Menus are contained in list format
Header tags can be reused provided they follow a logical order

This layout should also be usable in a screen reader or text only browser, such as Lynx. This of course will not work on a WAP browser, but should on a HTML capable hand-held device. However, steps will need to be taken to reduce page size due to the limitation of PDAs or mobile phones.

Tables

Tables should not be used for layout, pure and simple. Tables are containers that should contain tabular data. This again can lead to accessibility issues. The method to make your tables usable contain quite a bit of code, but here is a good example: Data Tables.

Give Meaningful Alternatives

For users that have images switched off, are unable to view images or the images don't load for whatever reason, you should always provide an alternative text (alt). This way the user can at least get the idea of what is supposed to be on the page.



<img src="/path/to/image" style="width: XXpx; height: XXpx; border: 0;" alt="Image description">

Additional, using the title attribute for links adds more substance and you should avoid the click here links. A better example follows:



<a href="#" title="Interesting Article about Accessibility">Interesting Article about Accessibility</a>
<a href="#" title="PDF document about Accessibility">Interesting Article about Accessibility (PDF)</a>

Accesskeys

Accesskeys are a means for people to jump immediately to a specific part of an HTML page by pressing ALT (PC) or CTRL (Mac), followed by the appropriate key on the keyboard, as defined by you via an accesskey parameter.

They're particularly useful for people with mobility issues who don't use a mouse and have a keyboard for their every movement on a computer. Accesskeys allow them quickly and easily to hop around the content of your Web pages. Able-bodied users can find them equally useful as shortcuts, too.

They are similar, if not the same as softkeys on a mobile device. Taking this into account, I primarily use numbers for the accesskey values as I use the same content on the mobile site as the full website that you are viewing now. To add accesskey functionality to your links, here is a simple example.



<a accesskey="8" href="/site/help" title="Help [8]">site help</a>

A list of keys used on this site are listed on the site help page. Further helpers can be included using style sheets or unobtrusive JavaScript. A good example of the former can be found on A List Apart.

Text

An obvious problem for some web sites is readability for the visually impaired. A good idea is to use proportional font sizes. This means that the user can increase or decrease font size easily. Additionally it is good to have some way for the user to change font sizes through the site and not through the browser itself. Again, A List Apart has an excellent article on one method to achieve this: Alternate Stylesheets.

Take care with choosing colors for your site too, especially background colors. There are many tools available on line that can sample the effective readability of your site taking colors into account.

Language

The main suggestion provided by WCAG 1.0 is to write clearly, cognitively and provide alternative / equivalent content as required.

Provide content that, when presented to the user, conveys essentially the same function or purpose as auditory or visual content.

You may also want to investigate voiceXML. Instead of many quotes from the WCAG document, see the link above for full details.

Limit Client Dependant Interaction

By this statement I mean if you are going to use JavaScript, CSS or multiple images make sure that you provide alternatives for those browsers without these functionalities. In other words: graceful degradation. For example, I know that my menu does not work in Opera 6. However, an alternative is provided - the menu just displays.

More features of this site are the links to external sites. These should open in new windows (or tabs) if you have JavaScript enabled and your browser allows sites to open new windows. If either of these factors are false, then the links should open in the same window. Also there is appropriate CSS styling to show that the link is external.

Pages on this site should read like a document, there is a CSS printer friendly version and XML feeds are also an alternative browsing method.

Meta Tags and Micro-formats

Meta tags go in the <head> of your document. They provide information on the page and site and also links to other resources such as stylesheets, javascript files and alternate resource types such as RSS feeds. Another use can be to include some sort of navigation that many browsers can interpret and use.



<link rel="Start" href="/web">
<link rel="Prev"  href="/web/what-is-accessibility">

In this example, some browsers could detect where the starting point of this section is, and what the previous article was and the browser could use an alternative means of navigating to the page. You could also provide translation alternatives.

Micro-formats can be included in the <head> of the document too, or as an external XML file. This can be including your geo-location or your "Friend of a Friend" social networking profile or your site profile. These will become more important as the web and mobile web develop.

Tim Berners-Lee vision of the "semantic web" go further than just a semantic layout. He sees all the data that is currently available more easily managed and useful. Point in hand, if you "Google" for taxi companies you will be given a list of taxi companies that could be from all over the world, if you use .com or at least country wide when you use a country specific TLD. This is pretty pointless if I want taxi companies that are local to me.

If a site registers it's geo-location and you are using a mobile device then the device should be able to determine where you are, and what the nearest taxi company is to you based on your current location. Of course you could use more specific search terms, but on a mobile phone typing is not that much fun.

There we have it, an overview of some of the steps required to make a site more accessible. It may seem like a lot, but if you write your code to certain standards then the additional steps are not that great. Next up in this series will be usability - another key factor in accessibility for web sites.