* 13 Tips For A More Accessible Web

Posted on November 17th, 2008 by Dave Johnson. Filed under AJAX, Accessibility, JavaScript.


There are few web projects that I have worked on of late where accessibility has been a high priority. Of course having worked on the Complete UI Ajax framework that is generally used to build internal web applications we were always trying to make our components as accessible as possible, particularly through the use of the keyboard.

In general through there are a few simple things that you can do to make you web applications far more accessible to your users that may use screen readers like JAWS or have to divert from normal computer settings like just using larger than normal fonts or even using high contrast mode.

  1. Remember if something can get focus through the tab key, users with screen readers will find it and the screen reader will describe it to them.
  2. The first is something that I am sure you have heard a thousand times and may or may not have listened. Don’t use tables for layout. I think that I saw this great site about it through Dion. Amongst the many arguments against using tables for your layout is that they have semantic meaning for
    screen readers - that meaning is course that there is some tabular data to follow. So you can imagine it can be confusing when tables are found without any tabular data!

  3. When a screen reader finds a table, users generally assume that is has a header row with column headings - so use the <th> tag to specify the column headers and maybe even put that entire row in a <thead> element.
  4. Use the unordered (<ul>) and ordered lists (<ol>) when appropriate. Unordered lists should even be used for things like menus by setting the display to inline and the list-style-image to something to get rid of the normal bullet.
  5. Always set the alt attribute on <img> tags. When the image is inside of an anchor this attribute should describe the image as the anchor will bring focus to that HTML. If it is just an ornamental image then leave the value of the alt attribute empty rather than ignoring it (this was demanded by a client due to bugs in certain browsers / screen readers).
  6. Use CSS for all images. The previous issue with image tags that are purely ornamental should not happen since you should be using CSS to set background images on your HTML elements. Not to mention the fact that those images should be sprited using something like SmartSprite and so you have to use CSS.
  7. Form elements should always have an associated <label> element with the for attribute pointing to the element that the label is for.
  8. Try to put dynamic HTML (drop down menus etc) into the HTML tree where they appear
    visually such that tab index for focusable elements is maintained. If you generate a drop down but append it to the bottom of the HTML page and position so that it appears visually at the top of the page, you would have to set the tabIndex attribute on anchors in the menu to get the correct tabbing effect.

  9. Don’t use tabIndex.
  10. Any element that has an onclick event on it should be an <a> tag (or at least enclosed in one). This will ensure that it is focusable and the user can then use the enter key to activate the click event. This is also a good reason not to use onmousedown or onmouseup events since those will not be captured by the keyboard. Similarly, if you use onmouseover and onmouseout to do anything that is not visual then you may consider having onfocus and onblur to do the same thing.
  11. If you have headings then use the heading tags! Semantics, semantics, semantics.
  12. Use relative sizings like em for your fonts and other dimensions and check out how the site looks as you change the font size.
  13. Put in a hidden anchor (position absolute, x,y -5000px) near the top of the HTML that contains a message like “Skip navigation” with an href pointing to an another anchor that will skip down to the actual contents of the page such that screen reader users can skip any redundant links and header information.

If you follow that simple list you should make your web sites and applications much more accessible.

For Firefox users I recommend the Firefox Accessibility Extension, which makes testing your pages pretty easy.

Anything to add? Please leave a comment below!

Tags: , , ,



6 Responses to “13 Tips For A More Accessible Web”

  1. 13 Tips For Web Accessibility | fixedinvest.com Says:

    [...] 13 Tips For Web Accessibility [...]

  2. NICCAI Says:

    Nice list. I sometimes use two hidden anchors - skip to navigation and skip to content. I would also mention setting a background color when using things like gradients as background images in css. With images turned off, there can be all sorts of surprises. So, test with images off (and css off for that matter).

    Also, did you happen to see this article on JavaScript and screen readers?

    http://northtemple.com/2008/10/07/javascript-and-screen-readers

  3. Dave Johnson Says:

    @niccai that is a good idea about the backgroudn colors.

    You know I was thinking to myself “I should probably run this blog template through my accessibility checklist” before I posted this :)

    Doing so now!

  4. Fil @ Nitobi » Blog Archive » Gearing for performance and accessibility Says:

    [...] disabilities might turn off your stylesheets or view your web page in a high-contrast mode. With Dr. Johnson’s post as a guide, I tackled a recent Nitobi project with some pretty good results. However, until you [...]

  5. doomminlecymn Says:

    Hello, I can’t understand how to add your blog ( nullisnotanobject.com ) in my rss reader

  6. Dave Johnson Says:

    either copy the link RSS Entries link at the top of the sidebar or the Feedburner link at the bottom.

Trackback URI | Comments RSS

Leave a Reply