Overdoing accessibility

Sometimes when people first learn about Web accessibility they look for quick ways of improving the sites they build. This often leads to misuse or overuse of certain HTML features that are meant to aid accessibility, but when used wrongly have no effect and can actually have the opposite effect by making the page less accessible and less usable.

Many of the commonly misused accessibility features are HTML attributes. It is my feeling that they get misused either by developers who mean well but don’t quite understand how the attributes help end users, or by developers who add them simply to be able to tick “accessibility” off their to-do list and shut up their manager, client or whoever is pestering them about making the site more accessible.

Here are a few examples of HTML attributes that are often misused or overused:

  • The accesskey attribute. A potentially useful attribute, the accesskey attribute creates a keyboard shortcut for a link or form control. However, it is so badly implemented in most browsers that it’s safest to avoid using it. Very few users are aware of it, and with current implementations it can conflict with shortcut keys used for other functions in the browser.

    That said, accesskey can be useful to some people if many sites use the same shortcut keys. Many public sector sites use the same shortcut keys since they follow a guideline which states which keys to use for what. It doesn’t solve the user agent problem, but at least it makes the use of accesskey consistent.

    It is quite common to see accesskey use go completely overboard though, with just about every link and form control having an accesskey attribute, especially in the administrative interfaces of CMSs and other tools that claim to be accessible.

  • The tabindex attribute. Changing the order in which elements receive keyboard focus from the order they appear in the markup can perhaps be useful in some hypothetical cases. I can’t really think of any such cases, but that is not how the tabindex attribute is normally used. Instead it is often used to define the tabbing order of elements that are already in a logical order in the markup. This wouldn’t really be noticed or cause any problems if it weren’t for the fact that elements with a tabindex attribute take precedence over all other elements when using the keyboard to navigate.

    A good example is the comment form in a default WordPress installation. The form controls (input fields and submit button) all have tabindex attributes despite already being in a logical order in the source. The effect is that keyboard users will skip straight to the comment form when they start tabbing through the page. Very annoying and completely useless, though probably well-meaning.

  • The title attribute. The developers of several CMSs that are popular in my part of the world have apparently learned about the title attribute and that it can be used to clarify the target of a link. So they want to use it for all links that their CMS creates, mindlessly repeating exactly what is already in the actual link text, sometimes with “Link to: ” prepended. That is completely useless and does nothing to improve accessibility. All it does is increase document size.

  • The alt attribute. Overly explicit and verbose alt text is a nuisance. One of my favourite examples used to be csn.se, the website for the Swedish National Board of Student Aid. Until a few weeks ago, the site consisted of old-school nested tables and spacer GIFs.

    Somebody, probably a well-meaning person, added alt text to the many spacer GIFs and other presentational img elements that were used on the site. So far so good. But unfortunately the alt text should have been empty to indicate that the images were purely decorative. Instead, the text “Typografisk luft” (“Typographical space”) was used for spacer images and “Webbplatsens hörn” (“The website’s corner”) for images whose only purpose is to create rounded corners.

    There wasn’t just one or two of them either. On the English About CSN page I could count to no less than 185 spacer GIFs with alt="Typografisk luft". Take that, screenreader users! It makes for a superb example when demonstrating what not to do, so in a way it is unfortunate that they have now updated the site to get rid of the spacer GIFs. They do misuse the title attribute though.

In early August this year, Patrick H. Lauke held an excellent presentation where he brings up many of these overused accessibility features. The presentation slides can be downloaded in several formats from Too much accessibility. There is also an audio recording of the presentation, which is really great since you can listen to Patrick talk while going through the slides.

Patrick also brings up several other features that can improve accessibility if used correctly, so I highly recommend that you take the time to go through the entire presentation. You will come away with a much better understanding of why the HTML attributes I mention here can be problematic when used wrong, and how to use them well.

Posted on December 17, 2007 in Accessibility

Comments

  1. December 17, 2007 by Theodor Zoulias

    What about bringing the content before the menu to help screen reader users? Doesn’t that confuse keyborders? In reality coders most often tend to promote content over menu, hoping to win a better position at the SERPs. I would be delighted to know that there hopes are futile.

  2. Well said! Now I have a great reference for customers when I remove their silly tabindex attributes and redundant title attributes.

    PS: In your recommended music, great call on The Cure’s “Pornograpy” album!

  3. I wrote an article on tabindex values in a group that expands on some of the problems and good uses you might find interesting.

  4. Roger: Thank you. I may keep it short.

  5. No arguments from me :) I wrote something like this a bit ago called Avoiding Extremely Accessibility.

    It all boils down to the age-old truth: Too much of a good thing rarely remains a good thing!

  6. Amen, brother! Thank you for writing this article. Hopefully, many will read it :)

  7. cheers for the kind mention, fella. i still mean to get the transcript of my presentation up, once i get a chance to sit down and actually do it…

  8. It’s not really overdoing accessibility — putting “Typographic space” on 185 spacer gifs in a page is the exact opposite of accessibility. Saying that’s “overdoing” it is a gross misnomer, and cheapens people’s efforts to make sites more accessible.

    If your goal is to blindly use your tools, go ahead. If your goal is to make your content easier to get for ALL of your users, then avoid the 185 spacer gifs with useless alt text. The easy metaphor: the first case would imply that we would only eat pureed food, because kitchens have blenders; the second case implies that we get smoothies and applesauce out of blenders, but still get to cut our steaks. :)

  9. You might also find the RNIB’s category too much accessibility relevant here…

    …and you do realise you’ll probably be quoted now by the “what next, blind people suing because they can’t drive!!” crowd who were quite happy to trumpet Joe Clark’s title “accessibility is not your problem” (note missing “when”) without actually reading or understanding any of the content of the article…

    “Roger says people are overdoing accessibility” :-)

  10. December 18, 2007 by Roger Johansson (Author comment)

    Theodor:

    What about bringing the content before the menu to help screen reader users? Doesn’t that confuse keyborders?

    It can. It confuses me when I use the keyboard.

    Dennis:

    In your recommended music, great call on The Cure’s “Pornograpy” album!

    One of the best albums of all time :-).

    Sarven:

    I wrote an article on tabindex values in a group that expands on some of the problems and good uses you might find interesting.

    I only had time to skim it but it looks like a good explanation.

    Mike:

    Too much of a good thing rarely remains a good thing!

    Hehe, yeah that’s true.

    patrick:

    i still mean to get the transcript of my presentation up, once i get a chance to sit down and actually do it…

    A transcript would be great for the non-hearing people among us :-).

    JackP:

    and you do realise you’ll probably be quoted now by the “what next, blind people suing because they can’t drive!!” crowd

    Hmm. I didn’t think of that actually… oh well :-P.

  11. Just a little sidestep. 185 spacer images and alt-text are also a hell of a lot of bandwidth and extra data if you don’t set up correct caching.

  12. Alot of developers forget that a vast majority of web users are still with slow access to the net and older technologies (Windows XP, older machines, less RAM, etc.). So, the key to successful websites is to have the first page with mostly text, and then you should provide advanced features like FLASH presentations as selectable by the user, on demand only. Starting home webpages with too much show can be overwhelming as well as technologically impossible for some. KIS…Keep It Simple…

  13. It is my feeling that they get misused either by developers who mean well but don’t quite understand how the attributes help end users, or by developers who add them simply to be able to tick “accessibility” off their to-do list and shut up their manager, client or whoever is pestering them about making the site more accessible.

    If only it were the case that managers, clients, etc even cared about accessibility. Still, an excellent article and well worth thinking about. There is a point when accessibility “features” become hindrances to the users of your site.

  14. Overloading the title and alt attributes is a popular SEO technique. We’ve had a few SEO reviews come back recommending “keyword rich title attributes on all links”. Less offensive than some SEO approaches, but still not great.

  15. @Theodor Zoulias

    What about bringing the content before the menu to help screen reader users? Doesn’t that confuse keyborders?

    Speaking as a part-time keyboard navigator, any behaviour on a page that is contrary to what I would reasonably expect confuses the heck out of me. On an English language page, that means that I expect a top-to-bottom right-to-left movement as I TAB through a visual design.

    Even more interesting though is the argument that placing content before the menu not only doesn’t help screen reader users - it may actually confuse them.

    Some time ago, I had the opportunity to carry out a very quick test with a group of screen reader users from the Shaw Trust. They were asked to navigate through two pages with identical content and then indicate which page they preferred. The only difference was that one of the pages placed the content before the menu.

    Surprisingly, the testers unanimously chose the page that placed menu before content. When asked why, they said that this was the format that they were most used to on the Web and, therefore, felt most comfortable navigating.

    There’s a great deal to be said for avoiding designs that run contrary to users’ general expectations. As Steve Krug suggested, it’s probably better if you don’t make them think.

  16. December 18, 2007 by MartinX

    When working for a government web developer, I was instructed that ALL of my images must have ALT attributes. Even the spacers…

    “It’s in the manual” they said.

  17. I think what MartinX said is a part of the problem. You think that you MUST have ALT and TITLE on everything because it will not work in screen-readers and so one. And that might have been the truth five years ago. And still is to some… We also use TITLE although we have descriptive link texts, it’s an old heritage :)

  18. December 18, 2007 by Roger Johansson (Author comment)

    MartinX:

    When working for a government web developer, I was instructed that ALL of my images must have ALT attributes. Even the spacers…

    Well, that is correct. But spacers (which shouldn’t be used in the first place, but if you do use them) and other non-content images should have an empty alt attribute:

    alt=""
    

    That way screen readers will know that they can safely ignore them.

  19. December 19, 2007 by PeterL

    What’s best practice when it comes to acronym expansion (ie. acronym tag with/without title attribute), and similarly for citations, abbreviations and so on.

    Also, do any screen readers actually make use of this information (eg. by reading out the acronym, or pronouncing the letters instead of trying to read it as a word).

  20. re acronyms, from my reading the definition in HTML5, I think the way is:

    <dfn><abbr title=”Real Good”>RG</abbr></dfn>

    and the next time:

    <abbr>RG</abbr>

    Then pray that screen readers automatically use the expansion when they read the second abbr.

    This comment is without any real world experience with screen reader, but my way is web-authors use features first, UA developers deal with what’s on the web. Please do give comment on the specs if you want to though.

  21. I agree spacer gifs should be used as little as possible to control layout. However, webXact.com, which has a powerful online validator, requires either an image OR text to separate links. This poses a problem when one wishes to utilize a mouseover menu bar. If text is inserted between the links, then the bar fails to be contiguous, which defeats its artistic appeal, IMHO. This remains the only place I will use spacer images.

    (Btw, my little website is newborn and designed by templatemonster. Old HTML tags and many other faults. I’m redesigning it at this time and it should be much more accessible and functional within a couple weeks.)

  22. @Grace - how about you just use standard, appropriate mark-up (such as a UL) for your navigation menus instead? The opening and closing tags between list items is enough to pass that level of validation.

    Basically, don’t use spacer GIFs.

  23. December 27, 2007 by David Boz

    If a linked image has no meaningful info is it better to use a title on the link and leave the alt empty like so?

    <a href=”http://www.wherever.com/” title=”Go to wherever”>

    <img src=”images/go.gif” alt=”“>

    </a>

  24. December 27, 2007 by Roger Johansson (Author comment)

    David:

    If a linked image has no meaningful info is it better to use a title on the link and leave the alt empty like so?

    No, if an image is linked it should have an alt text that describes the link’s destination or purpose. You can’t rely on title text being announced or revealed to users.

  25. December 27, 2007 by David Boz

    What would the proper markup look like?

    <a href=”http://www.wherever.com/” title=”Go to wherever”>

    <img src=”images/go.gif” alt=”Go to wherever”>

    </a>

    or

    <a href=”http://www.wherever.com/” title=”Go to wherever”>

    <img src=”images/go.gif” alt=”Go”>

    </a>

    or

    <a href=”http://www.wherever.com/”>

    <img src=”images/go.gif” alt=”Go to wherever”>

    </a>

  26. December 27, 2007 by David Boz

    If you could answer that last one and this one I will be a happy man.

    How should a promo image that mentions nothing about clicking or going to a new page be handled?

    <a href=”http://www.wherever.com/new” title=”Get details about new product.”>

    <img src=”images/promo.gif” alt=”Our NEW product is the cat’s pajamas!”>

    </a>

    or

    <a href=”http://www.wherever.com/new”>

    <img src=”images/promo.gif” alt=”Get details about our NEW product which is the cat’s pajamas!”>

    </a>

    Thanks for the helpful info!

  27. December 27, 2007 by Roger Johansson (Author comment)

    David:

    In the first example I would probably use the last option without the word “Go” since links always “go” somewhere. If the image is not clear enough to sighted visitors I would add a clarifying title text, but as I said in my previous comment you can’t count on people actually noticing title text.

    In the second example, since the image says nothing about where the link will take you, I would likely use the text in your second option for alt text on the image and title text on the link.

    It’s hard to tell exactly without seeing the actual images, but in most cases this should work. The most important thing is to provide an alt text that describes where the link will take you.

  28. Although I’m still not totally into the accessibility stuff, thanks for clarifying that! I couldn’t help but laugh at the “Typographical space” and “The website’s corner” lol You’re a good writer, I’m subscribing to your feed :)

  29. I actually had a laugh reading about the incident over the alt attribute. Thanks for cheering up my day :)

  30. January 21, 2008 by Fernando Gouveia

    A good example of the “tabindex overdoing” (and in an accessibility-focused site, nonetheless) is http://webaim.org/blog/when-inaccessible-isnt/

    We have to tab through the 5 fields of the “Leave a Reply” form (in the bottom) before actually getting to the “skip link” in the top right corner of the page…

    Anyway, if I agree with much of what you said, I think Joe Clark (http://www.isolani.co.uk/blog/access/FallacyOfTooMuchAccessibility) is right when he says there’s no such thing as “too much accessibility”: only if you believe that stuffing your meal with senseless spices is “too much cooking”…

    The problem, as often, is “accessibility for dummies”

  31. February 2, 2008 by simon

    Anyone using spacer gif’s needs to go stand in the corner and think about what they did.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.