HTML/XHTML Accessibility Features
The topic of web accessibility is a detailed and complicated one that can’t be explored to the full in this reference. However, many of the HTML elements covered in this reference are designed to improve the accessibility of the content, or have specific attributes that support this goal. Where these elements occur, their accessibility features will be mentioned.
In a nutshell, the concept of accessibility focuses on making your web content easy for a wide range of users to access. This may include people with vision impairments (which can include a wide variety of such impairments, from simple short-sightedness, to complete blindness), people with mobility problems (from a shaky hand resulting from illness, or temporary impairment such as wearing a cast on a broken wrist, to permanent impairments like those experienced by amputees or people suffering paralysis), and those with cognitive issues. While it may seem as if there are a lot of people for whom you may need to make adjustments, the reality is that HTML (or XHTML) is actually a fairly accessible medium to begin with, and is usually made less accessible through the use of harmful techniques. Many of these techniques were introduced many years ago as workarounds to perceived shortcomings in browsers; many developers still use them today, much to the chagrin of more standards-aware web developers.
If you stick to using the right markup for the job—applying headings, lists, paragraphs, and blockquotes as they were intended to be applied—you’ll be well on the way to creating accessible content. However, in addition to these basics, a number of HTML elements or attributes that were introduced in HTML 4.01 may be used to enhance the content’s accessibility even further. In order to save you time and effort hunting these items down, I’ve compiled the list below to provide pointers to the most relevant areas.
Tables
-
provides a non-visual summary of the table’s content or purpose, which may be useful to people accessing the table using assistive technology
-
specifies the direction of the table cells that the header cell relates to
-
indicates which table headers are related to a given table data cell, providing context for the data for users of non-visual browsers
Forms
-
logically group related form controls, and provide a title for the grouping via the
legendelement -
links a form control to the associated descriptive text in a totally unambiguous way—a great aid for users of non-visual browsers, such as those using screen readers to interact with forms
Images
-
provides a text alternative for an important image; can be applied to
imgelement or to aninputoftype"image" -
provides a link to additional information, contained in a separate text file, about the image
General Aids
a well-written document
titleAlthough it’s not an accessibility feature as such, it’s worth noting that the
titleis what will be read out first for screen reader users; hence it provides a golden opportunity for explaining what is to follow.-
Headings provide users of such assistive devices as screen readers with an additional—and quick—method for navigating through a document by skipping from heading to heading.
list items (in
ulorolelements)Wrapping navigation items in a list allows users of assistive technology to skip entire blocks of navigation easily, jumping from one navigation level to another.
User-contributed notes
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.