The following is a list of some of the technical (HTML) accessibility options discussed in the AIR “Accessibility Basics” course.
- Text alternatives
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.
Images requiring long text descriptions, such as charts or graphs, should contain a
longdescattribute 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
longdescis 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
- Provide a logical tab order. Supplement with
Most web pages should not use the
tabindexattribute 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
tabindexattribute to supplement that order.
tabindexis only valid on elements that could achieve keyboard focus by default: links and form elements.
tabindexinstead 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
accesskey="2". Within that section (the form) the tab order will be determined as normal.
If you assign a tab order, give a
tabindexvalue to every field in that section. Don’t put a
tabindexattribute 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.
- Problems with
- Lack of formalized
There is no standard for which access keys to use for various links or navigation. There have been some
accesskeystandard 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
accesskeyvalues. For better or worse, this lesson uses the following
- 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
accesskeyto 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
accesskeymay be harmful.
- Lack of formalized
- 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
- Problems with
- 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...
Acronym refers to an abbreviation that can be pronounced as it’s own complete word. By specifying the
titleattribute on an
acronymelement, 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...
It should be noted that Internet Explorer for Windows does not support the
abbrelement, even though it’s usually a better semantic choice for abbreviations than
abbrshould 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
acronymelement for these because of cross-browser support.
Some people prefer to use
acronymin all cases because of cross-browser support. This is an acceptable compromise, but we’ve chosen to use
abbrin this lesson in order to follow standards rather than conform to browser bugs.
- Directly in the text.