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.
Martin Sarsini 19 Mar, 2008
mcg 19 Mar, 2008
Jordan Wollman 19 Mar, 2008
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 19 Mar, 2008
Nemesis Design 19 Mar, 2008
thanks for this post, i didn't give particular attention to TH elements.
Mrmil 19 Mar, 2008
Dallas Web Designer 19 Mar, 2008
Lee 19 Mar, 2008
Matt May 19 Mar, 2008
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 20 Mar, 2008
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 20 Mar, 2008
Ricardo 20 Mar, 2008
frank 20 Mar, 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."
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 20 Mar, 2008
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 21 Mar, 2008
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 21 Mar, 2008
John Macpherson 22 Mar, 2008
Keep up the good work.
cssglobe 23 Mar, 2008
Ryan Keiser 24 Mar, 2008
I agree completely that "click here" is useless and not accessible.
Great summary.
los 24 Mar, 2008
cssglobe 24 Mar, 2008
I recommend reading this http://www.456bereastreet.com/archive/200412/the_alt_and_title_attributes/
Jak 25 Mar, 2008
dev 28 Mar, 2008
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 30 Mar, 2008
This is a very correct rule! The structure of the document must always be clearly visible. Thanks!
Manoj Gulati 17 Apr, 2008
epilasyon 17 Apr, 2008
şömine 18 Apr, 2008
src belgesi 19 Apr, 2008
lazer epilasyon 19 Apr, 2008
kapi 20 Apr, 2008
temizlik makinasi 25 Apr, 2008
cleaning machines 28 Apr, 2008
Web Hosting Sri Lanka 9 May, 2008
Best Regards
Team DH
kale kapi 14 Jul, 2008
firma rehberi 31 Aug, 2008
sklep internetowy 5 Mar, 2009