Accessible Links

Some guidelines for accessible hyperlinks that I emailed to someone awhile ago…

  1. Most important, make sure the actual link is descriptive (not just the surrounding text). Users of screen readers can tab through links and the screen reader reads only the linked content. If the link reads “Click Here” or “Download Now.”
  2. If a graphic is really necessary and used for a linked item, be sure that is has an appropriate alt tags
  3. Consider use of the title attribute if needed for documents with long titles or documents offered in multiple formats
  4. When possible, avoid the use of pop-up windows. If necessary, be sure to inform the user that by clicking on the link they will be leaving the site
  5. Add a ‘Skip Navigation’ link at the top of a page to allow users to skip to the content of the page (alternately, consider a ‘Skip Content’ link if needed to access navigation easily)
  6. If necessary, add the tabindex function to hyperlinks to specify the order that they tabbed to
  7. If links are on the same line, be sure to use a separator

Others?

  1. Sergi says:

    I’d say most important is having a proper href pointing to a url. No javascript: pseudo-protocol, please.

    If you ever feel like adding a popup, just use smth like onclick=”window.open(this.href, options…);return false;”

    Most of the browsers will understand the onclick and open it, but those that dont, will at least follow the href. 🙂

  2. David Spinar says:

    I agree with Sergi. When using pop-ups, informing a user is not sufficient. You should use a proper content of href attribute.

    And I would add 2 more rules:

    1) Distinguish links from other text content with more than just color, so that users that cannot “see” the color (because of their visual impairment or hardware device) can recognize it. Underlining is of course the best way.

    2) Do not use the same link text for various link targets. Use for each target unique and well destriptive link text and do not rely on context. When it is impossible to distinguish it in link text, distinguish it in title attribute.

    (sorry for my poor english – I am not a native speaker)