11 Accessibility Tips

written on:19 Mar, 2008 by Alen Grakalic

11 Accessibility Tips

When developing a site we all sometimes overlook simple methods that we can use to make our site more accessible. Here's a list of tips that should really be used by all of us, myself included.

1. Structure your document so it can be read without stylesheet

This is the most important tip. Be extra careful of properly structuring your page. Use headings to describe content sections, use lists, make sure that you page has the logical flow. Don't rely on stylesheet to create that flow for you.

2. Separate your links

Separate consecutive links with more than just a white space. Screen readers tend to interpret two (or more) non separated consecutive links as one.

3. Meaningful links

When read out of context, make sure that your links make sense. i.e. use "read full article" instead of "click here".

4. Include skip to content link

Permit users to skip repetitive navigation links. If you have the same navigation at the top of the page this allow users to go directly to the content instead of having to scroll down every time they load a page. This doesn't concern screen readers alone, this is very useful in the web or mobile web.

5. Provide text equivalent for non-text data

Usually we are talking about images here.. To provide text equivalent you can use ALT attribute for briefly describing image's meaning. Also there is a LONGDESC attribute for longer descriptions. For images that have no meaning use empty ALT attributes (alt=""). The other way to use text equivalent is to describe the non-text element's meaning in content.

6. Image links

Related to the above, be careful when using only images for links. Without text equivalent, screen readers will not be able to display the link. Use ALT attribute so screen readers can use it as a link text.

7. Tables

Identify row and column headers. Use TH for headers instead of regular TD styled with alternative styling. Also, provide captions with CAPTION element to describe the contents of the table. If you don't wish to use captions use TITLE attribute to describe the contents in few words. Use SUMMARY attribute for describing table's purpose. This is especially useful for non-visual readers.

8. Client Scripting

Make sure that your web page is usable when various when scripts are turned off. Don't rely on cool JavaScript to navigate or view content. If that is not possible provide alternative ways to access content.

9. Color

Make sure that information that is presented through the use of color is also available without it. Otherwise, color blind users will not be able to understand the meaning.

10. Link to accessible version of your page

If you can't create accessible page for some reason or another, provide a link to accessible page instead.

11. Validate

Validate your document to check for errors.

About the author:

cssglobe's image Designer, developer and a passionate standardista with large experience in all types of front-end work. Started to get involved with web in 1999. and turned freelance in 2005., the same year he started Css Globe. Alen's work has been featured on numerous css galleries including famous Css Zen Garden official list. Available for contract work.

Enjoyed the article?

Subscribe to our RSS feed or share it with your friends.

Comments

Martin Sarsini on 19 Mar, 2008 wrote:

Good tips, simple and clear to understand, in my opinion everyone who doesn't have a clue of what web accessibility is (or must be), must read at least this. It's crazy to see how even the most simple and easy rules are highly ignored. Come on, at least let's make the web more accessible!
mcg on 19 Mar, 2008 wrote:

Thanks, I wasn't aware of #2.
Jordan Wollman on 19 Mar, 2008 wrote:

Great article. Very simple, concise, and easy to understand.

It's amazing to me how many high-profile, corporate, juggernaut sites I run across on a daily basis that pay no attention to the accessibility of their site. I don't have statistics on the impaired users out there, but I would imagine that at the very minimum, ten percent of the worlds population needs the accessibility to be more than what you can see in your browser, with JS turned on, and a million color monitor.
MD on 19 Mar, 2008 wrote:

This page has validation errors...
Nemesis Design on 19 Mar, 2008 wrote:

Ahah.. 2 little validation errors.. easy to fix..
thanks for this post, i didn't give particular attention to TH elements.
Mrmil on 19 Mar, 2008 wrote:

Great post, though I'd add that there must be just right amount contrast between color of the text and it's background.
Dallas Web Designer on 19 Mar, 2008 wrote:

The was good one. This some that we should all practice. There was few that I did not know about that I will start to do.
Lee on 19 Mar, 2008 wrote:

Nice post, wasn't aware of #2 either. Would be useful to have a screen reader just for testing purposes.
Matt May on 19 Mar, 2008 wrote:

#2 isn't really a problem anymore. It was something that IBM Home Page Reader couldn't handle, but HPR hasn't been updated in several years, and isn't in heavy use anymore.

The Web Content Accessibility Guidelines have stated that #2 is a problem "until user agents" fix it. Effectively, the death of HPR makes it fixed. :)

On #10, there's really very little reason to create an alternate site, but the requirement in WCAG 1 is that _if you do_, it must be updated as frequently as the principal site.

Overall, this is a good, quick list to work from. Thanks!
Tyssen on 20 Mar, 2008 wrote:

When read out of context, make sure that your links make sense. i.e. use "read full article" instead of "click here".

In that example, 'read full article' is not really any more useful than 'click here'. OK, a user who arrives at that link without reading anything that precedes it (by navigating through a page via links) will know that the link is to an article, but not much else. It would be better to say 'read full article about whatever the article title is'. Yes it's a lot more verbose, but if you're really concerned about correctly dealing with this point, then that's what's required.
fdog on 20 Mar, 2008 wrote:

On #6: Be sure of using the ALT attribute correctly. If an image is only used for decoration the ALT attribute should be a blank character.
Ricardo on 20 Mar, 2008 wrote:

Great article and tips for accessibility.
frank on 20 Mar, 2008 wrote:

"fdog on 20 Mar, 2008 wrote:
On #6: Be sure of using the ALT attribute correctly. If an image is only used for decoration the ALT attribute should be a blank character."

no, the img tag should not be used for "decoration" any images you want to use as "decoration" should be background images in your stylesheet, html is for content.

nice list by the way, access keys in your main nav and a useful link title could be good additions.
Steve Firth on 20 Mar, 2008 wrote:

Nice article, explains it nice and simply in a usable way ... the wai and wcag guidlines can prove to be a somewhat clunky read at best.

Worth re-enforcing what you said in point 5 ...

we do alot of work for councils and gov type bodies and we're seeing the need for text alternatives [transcripts] quite with media such as video becoming more popular.
Ted Goas on 21 Mar, 2008 wrote:

Great article Alen. You've provided some great classic examples as well as new insights.

Great advice on #6! Perhaps we could suggest to use a combination of ALT and TITLE attributes? TITLE attributes used to describe the link (like a tooltip for the link) and ALT attributes to describe an image, should it not display.

I realize IE displays the ALT attribute instead of a the TITLE attribute on a rollover, but that's just IE.
Mike on 21 Mar, 2008 wrote:

It's great that accessibility is becoming more and more important.
John Macpherson on 22 Mar, 2008 wrote:

Quick and good post, just the way i like them!

Keep up the good work.
cssglobe on 23 Mar, 2008 wrote:

Thanks for the comment guys.
Ryan Keiser on 24 Mar, 2008 wrote:

One thing... be careful with #11. Automated validation can create false impressions of something being accessible. For example, it will look to see if there is alt text for an image, but it will not check to see if it is relevant or meaningful. In some cases, a valid page can not be accessible and the other way around.

I agree completely that "click here" is useless and not accessible.

Great summary.
los on 24 Mar, 2008 wrote:

Would title="" tag be a suitable replacement for the alt="" tag for images?
cssglobe on 24 Mar, 2008 wrote:

@los: Alt and title attributes are completely different things. Title provides additional information about the element (image, link etc.) while alt should be alternative description in cases where image can't be rendered. It represents text alternative to non-textual data.
I recommend reading this http://www.456bereastreet.com/archive/200412/the_alt_and_title_attributes/
Jak on 25 Mar, 2008 wrote:

Thank really useful tips
dev on 28 Mar, 2008 wrote:

#12 Don't justify your text.
It is the easiest thing to do and it will have a huge impact on your readers.
Ref: http://www.rnib.org.uk/xpedio/groups/public/documents/PublicWebsite/public_textjustify.hcsp
Nastya Manno on 30 Mar, 2008 wrote:

"...1. Structure your document so it can be read without stylesheet..."
This is a very correct rule! The structure of the document must always be clearly visible. Thanks!
Manoj Gulati on 17 Apr, 2008 wrote:

Great article and tips for accessibility.
epilasyon on 17 Apr, 2008 wrote:

good article for thanks
şömine on 18 Apr, 2008 wrote:

thanks for article
src belgesi on 19 Apr, 2008 wrote:

good ideas
lazer epilasyon on 19 Apr, 2008 wrote:

thanks your article
kapi on 20 Apr, 2008 wrote:

Thanks.. good
temizlik makinasi on 25 Apr, 2008 wrote:

thanks for article
cleaning machines on 28 Apr, 2008 wrote:

thanks for article man.
Web Hosting Sri Lanka on 9 May, 2008 wrote:

Very useful tips. Thanks for Sharing.

Best Regards
Team DH