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.

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Share on FacebookTweet thisDeliciousStumbleUpon RedditSubscribe

Comments (36 Comments)

1. Martin Sarsini
   March 19, 2008

   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!

2. mcg
   March 19, 2008

   Thanks, I wasn't aware of #2.

3. Jordan Wollman
   March 19, 2008

   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.

4. MD
   March 19, 2008

   This page has validation errors...

5. Nemesis Design
   March 19, 2008

   Ahah.. 2 little validation errors.. easy to fix.. thanks for this post, i didn't give particular attention to TH elements.

6. Mrmil
   March 19, 2008

   Great post, though I'd add that there must be just right amount contrast between color of the text and it's background.

7. Dallas Web Designer
   March 19, 2008

   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.

8. Lee
   March 19, 2008

   Nice post, wasn't aware of #2 either. Would be useful to have a screen reader just for testing purposes.

9. Matt May
   March 19, 2008

   #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!

10. Tyssen
    March 20, 2008

    <blockquote>When read out of context, make sure that your links make sense. i.e. use "read full article" instead of "click here".</blockquote> 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.

11. fdog
    March 20, 2008

    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.

12. Ricardo
    March 20, 2008

    Great article and tips for accessibility.

13. frank
    March 20, 2008

    "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.

14. Steve Firth
    March 20, 2008

    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.

15. Ted Goas
    March 21, 2008

    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.

16. Mike
    March 21, 2008

    It's great that accessibility is becoming more and more important.

17. John Macpherson
    March 22, 2008

    Quick and good post, just the way i like them! Keep up the good work.

18. cssglobe
    March 23, 2008

    Thanks for the comment guys.

19. Ryan Keiser
    March 24, 2008

    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.

20. los
    March 24, 2008

    Would title="" tag be a suitable replacement for the alt="" tag for images?

21. cssglobe
    March 24, 2008

    @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/

22. Jak
    March 25, 2008

    Thank really useful tips

23. dev
    March 28, 2008

    #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

24. Nastya Manno
    March 30, 2008

    "...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!

25. Manoj Gulati
    April 17, 2008

    Great article and tips for accessibility.

26. epilasyon
    April 17, 2008

    good article for thanks

27. şömine
    April 18, 2008

    thanks for article

28. src belgesi
    April 19, 2008

    good ideas

29. lazer epilasyon
    April 19, 2008

    thanks your article

30. kapi
    April 20, 2008

    Thanks.. good

31. temizlik makinasi
    April 25, 2008

    thanks for article

32. cleaning machines
    April 28, 2008

    thanks for article man.

33. Web Hosting Sri Lanka
    May 9, 2008

    Very useful tips. Thanks for Sharing. Best Regards Team DH

34. kale kapi
    July 14, 2008

    Thanks.. good

35. firma rehberi
    August 31, 2008

    Nice. I am a teacher. Thank you for this article.I’ve translated this into my language. Regards

36. sklep internetowy
    March 5, 2009

    thanks for article man :)

Sorry, the comment form is closed at this time.