Forum Moderators: open
Requirements of the accessibility needs of disabled (be it visually or physically or otherwise) and older users has long been neglected in web site design communities, although with the increased exposure of Section 508 of the Rehabilitation Act Amendments of 1998 (the recent penalty imposed on the 2006 Olympics website, for example) requirements and heightened awareness of the needs of disadvantaged users, accessibility is coming more to the fore.
However, much of the time it is treated as an afterthought, rather than being approached in a proactive fashion from the onset of the design and development lifecycle. I am currently writing a paper for a conference on this very topic, which is why I decided to post some simple tips and techniques that are easy to implement and will move your site closer to being truly accessible.
I've outlined 10 tips and techniques here that I feel are a good place to start on making your site accessibible. This information is out there and freely available but I thought it might be an idea to collate some of the more important ones and post them in one place.
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 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.
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.
Tip: Simply using <html lang="en"> will do the trick!
2. Use descriptive page titlesMany 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: <title>My Site Name: Products and Services Page</title>
3. Additional NavigationPapabaer [webmasterworld.com] recently flagged the use of the <link> tag as an extra navigation for Opera and many will know it from using it to call in external CSS files. 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: <link rel="Home" title="Home" herf=http://www.mySite.com/index.html>
4. Content on topMany will know that using CSS to position your content at the top of the html code has may advantages in 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 LinkIf 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.
Tip: Obviously you don’t want this on your visually rich page, so some simple CSS will sort this out:
.skipNavigation {
display: none;
}
6. ColourAs 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 [vischeck.com] online page checker to see how your page looks to people with colour deficiencies.
6. JavaScript LinksAgain, 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>
7. Link TitlesNeeds no explaination really – does it!
7. AccesskeysThese 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.
<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 accesskey 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 accesskey values and functions. Have a look at the diveintomark dot org accessibility statement, as a good example of this.
8. Table ElementsUse 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! <table summary="A summary of the table">
9. ImagesThe alt tag 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.
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.
9. FontsHere 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!
10. FormsUse 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">
HTH!
Anyone else got any tips and techniques that I'd missed?
<edit>Added call for other tips and fixed typos. And DaveN - in Cork, we always drink Murphys!</edit>
[edited by: BlobFisk at 3:45 pm (utc) on June 12, 2003]
I've seen some 508 compliant sites and most are pretty basic and try to avoid use of tables and too many images. How do you guys think more complex sites created in Photoshop will make the transition to a 508 compliant site? Is this even possible?
Is it possible or easy to create a 508 compliant site originally designed in Photoshop?
Why even try to hide skip navigation if the whole point of having it is for accessibility reasons? One link wont hurt the look of the site if it's integrated properly.
Well, that link would look like it has no reason when you have a rather large screen... I mean you click on it and obviously nothing happens ("Skip navigation.... hehhh? whyy?") Personally I have a simple menu with half a dozen entries, maximum height 50px; I still don't know whether it makes sense...
I've seen some 508 compliant sites and most are pretty basic and try to avoid use of tables and too many images. [...] Is it possible or easy to create a 508 compliant site originally designed in Photoshop?
Photoshop - yes, since you still need to implement that design into html, no problem to add accessibility there. Assumed one doesn't use sliced images with rollovers.
As for the use of tables I guess it will take a while until this "industry" standard will convert. People still want Netscape 4 compliant stuff rather than accessible...
Forcing the government institutions into regarding accessibility is the right way though. This will make the topic wider spread; eventually the industry will follow.
[edited by: heini at 3:44 pm (utc) on July 16, 2003]
[edit reason] fixed code [/edit]
[edited by: heini at 3:38 pm (utc) on July 16, 2003]
