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

  • table - summary attribute

    provides a non-visual summary of the table’s content or purpose, which may be useful to people accessing the table using assistive technology

  • th/td - scope attribute

    specifies the direction of the table cells that the header cell relates to

  • th/td - headers attribute

    indicates which table headers are related to a given table data cell, providing context for the data for users of non-visual browsers

Forms

  • fieldset and legend elements

    logically group related form controls, and provide a title for the grouping via the legend element

  • label element

    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

General Aids

  • a well-written document title

    Although it’s not an accessibility feature as such, it’s worth noting that the title is what will be read out first for screen reader users; hence it provides a golden opportunity for explaining what is to follow.

  • headings (h1-h6)

    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 ul or ol elements)

    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

Related Products