HTML Accessibility Basics Refreshers

The following is a list of some of the technical (HTML) accessibility options discussed in the AIR “Accessibility Basics” course.

• Text alternatives
  • alt

    Provide short descriptive text on all images. Keep the text limited to essential information, but make sure it provides all necessary information. For example, an image link to the Kumquats page should probably contain “About Kumquats” as the alternative text rather than just “About” or even worse, “About Kumquats; red text on a blue backgound with an icon of a Kumquat.” Note: If the entire site is about kumquats, the text “About” may be sufficient.

    Spacer images, slices, and non-essential decorative images, if used, should contain and empty value: alt="". Note: We recommend using CSS for style and layout, rather than using non-semantic spacer images and junk markup.

  • longdesc

    Images requiring long text descriptions, such as charts or graphs, should contain a longdesc attribute where the value is a URL to a full text description of the image. The external resources should be plain text or HTML.

  • ‘D’ link

    Because longdesc is not fully supported in modern browsers and screen readers, it is common practice to include a link (with ‘D’ as the link text) to the external description resource immediately following the image. Note: A ‘D’ link is not necessary on regular images, only images requiring a longdesc.

• Provide a logical tab order. Supplement with tabindex.

  Most web pages should not use the tabindex attribute at all. It is easy to overuse accessibility features to the point of poor usability. First rely on inherent document tab order and only sparingly use the tabindex attribute to supplement that order. tabindex is only valid on elements that could achieve keyboard focus by default: links and form elements.

  Group with tabindex instead of individually numbering everything. For example, you may have a search form that you would like to skip to immediately. Instead of tabindexing the form elements 1, 2, 3, etc., all of the elements should have the same tabindex value: e.g. accesskey="2". Within that section (the form) the tab order will be determined as normal.

  If you assign a tab order, give a tabindex value to every field in that section. Don’t put a tabindex attribute on a text field and submit button, unless you also add it to the related checkbox. Otherwise you’ll split up form elements and make it difficult to complete the full form without using a mouse.

• accesskey
  • Problems with accesskey
    • Lack of formalized accesskey standards

      There is no standard for which access keys to use for various links or navigation. There have been some accesskey standard proposals and notations of access keys in use, but nothing formal, for the following reasons.

    • Overriding default browser behavior.

      Most accesskey use requires a modifier key (usually Alt or Ctrl) and the author-defined accesskey. However user-agents may have a native use this same key combination. For example, IBM Home Page Reader, a speech browser, uses the key combination Alt+t to trigger data table reading mode. If an author defined accesskey="t" on any HTML element, it could theoretically override the default behavior of the user-agent.

      Arguments for this behavior sometimes drift to the the fact that this doesn’t technically disallow behavior. (Note: The following is an example of one browser’s behavior. It does not reflect the behavior of every one.) Pressing t while holding down the Alt key will access the author-defined access point. Pressing and releasing Alt and then pressing t will access the browser behavior.

      Technically, this allows standard behavior, but practically, no user wants a web page tp override their standard interface. Also, most people won’t know why the behavior stopped working or how to resolve the problem.

      Not everyone agrees on this, but it may be best to use number keys and a few standard symbols for accesskey values. For better or worse, this lesson uses the following accesskey values:

      • First: left square bracket “[”
      • Previous: minus “-”
      • Next: equals “=” (on the same key as the plus sign “+”)
      • Last: right square bracket “]”

      Update: Home Page Reader uses the number keys to switch language pronunciation so even those aren’t safe.

    • User doesn’t know about the keys.

      Unless the accesskey is displayed via a style sheet on in the page content, a user has no way of finding out what accesskey to use. Also, unless there are some official standards set in place, a user probably won’t remember your site’s keys unless they visit it every day.

    • Other reasons why use of accesskey may be harmful.
  • Other navigation alternatives
    • <link rel="..." />

      User agents can provide additional features based on metadata contained in the HTML. Opera 7 for Windows, for example, provides navigation buttons for documents properly utilizing <link /> elements (see Opera screen shot).

      

      Lynx, a text-only browser, displays the same information at the beginning of a document (see Lynx screen shot).

      

      View the HTML source to see this page’s related link information.

• Expand acronyms and abbreviations

  Expand all abbreviations and acronyms the first time they appear on a page, and use the simple abbreviation after that. There are a few ways to expand the items.

  • Directly in the text.

    This is the most common and most accessible way to expand an abbreviation. For example:

    This document is written in using the Extensible Hypertext Markup Language (XHTML). XHTML is a recommended solution for...

  • The acronym element.

    Acronym refers to an abbreviation that can be pronounced as it’s own complete word. By specifying the title attribute on an acronym element, most graphical browsers will present a visual tooltip when a user’s mouse is over the element. Also, screen readers can access title attributes. For example:

    Most of you are viewing this presentation in a GUI browser. Mosaic was the first GUI browser to...

  • The abbr element.

    It should be noted that Internet Explorer for Windows does not support the abbr element, even though it’s usually a better semantic choice for abbreviations than acronym. The abbr should be used on any abbreviation that is not an acronym. This includes abbreviations pronounced as individual letters (RDF, USA, LOL) and shortened words (Hwy, Fri, etc.).

    Some abbreviations fit in either category. They can be pronounced as letters (SWF or PNG) or as a word (“Swiff” or “Ping”). We usually choose the acronym element for these because of cross-browser support.

    Some people prefer to use acronym in all cases because of cross-browser support. This is an acceptable compromise, but we’ve chosen to use abbr in this lesson in order to follow standards rather than conform to browser bugs.