web content accessibility
some general accessibility guidelines
- have valid (X)HTML and CSS code. It is better to use the Strict doctype for (X)HTML documents, because it does not support frames related
features like opening links in a new window with the
targetattribute, that might cause problems for accessibility.
- use correct semantic structure, and hierarchy of HTML elements, with headings
h1, h2,..in correct order.
- HTML content separate from style with external stylesheet files, for colours and font size to be easy to change if necessary in the browser's customized stylesheet files.
- use contrasting colors for text and background,
- if animation and sound are embedded in a page, add control features for pause/stop,
- use the
titleattribute, of for example hyperlinks
<a>elements, or of images
<img>elements, to give more information about their content.
It is good practice if the pages of the same website, or of a main part of a website, have similar appearance and functionality,
so the main components of a page (header, site navigation, header, content, search box, etc.) are easy to find.
There is a new HTML attribute,
that associates semantic functionality with HTML elements, or main components of a page.
It is good practice if chunks of page that are repeated across a site, like site navigation etc., have a 'skip to' link,
or if they are identified for easy navigation across page by using the role attribute.
It helps with accessibility if the site has a good HTML sitemap.
It is important that the text is easy to resize in the web browser,
without breaking the page layout. It is good practice to set the font size and width of block elements containing text
in relative size units, like
em or percentages, and not in pixels.
The font size can be changed from the browser with
View > Zoom in Firefox and
View > Text Size in IE.
The font size should be set in stylesheets, using correct HTML elements,
for example headings
h2,.. should be used for titles of components of a page,
and not only to have a larger font size.
table elements are difficult to interpret by screen readers, this is why it is better
to use tables only if necessary for presentation of complex data structures,
not for page layout, and to use stylesheets for page layout.
There are some HTML attributes of table elements that help non-visual media, like speech or Braille, to present the content and structure of tables.
summaryattribute of the
tableelement can be used to provide a short description of the table's purpose and structure for non-visuau user-agents, and it is necessary especially if the table does not have a
captionelement. If a table has a
captionelement has to be placed immediately after the
- Attributes like
scope(used as attributes of
axis(used as attributes of
thelements), can be used to help non-visual user agents to associate the content of data cells
tdwith the information contained in header cells
th. The association is made via the id attribute of header cells, so they need to be named by setting correctly their id atribute.
These features are very well described in the W3C documentation about table rendering by non-visual user agents from the HTML 4.01 specification.
There are various (X)HTML features that can make a form more accessible and easier to use.
For example different parts of a form can be grouped semantically using
fieldset elements and
(that are like captions for the fieldset elements).
Form control elements, like text fields, checkboxes, etc. can be associated with their description via
label element, that is spoken by screen readers.
accesskey attribute can be used for easier navigation through forms.
This attribute assigns an access key to an element. An access key is a single character from the document character set.
Pressing an access key assigned to an element gives focus to the element.
The HTML elements that support the accesskey attribute are :
a, area, button, input, label, legend, textarea.
The action that occurs when an element receives focus depends on the element.
For example, when a user activates a link defined by the
the user agent generally follows the link. When a user activates a radio button,
the user agent changes the value of the radio button. When the user activates a text field, it allows input, etc.
If a label accociated to a text field has an accesskey attribute, then typing the access key gives focus to the label, which in turn gives it to the associated text field. The user may then enter text into the text field.
Have good anchor text for links with unique content, not 'click here'.
It is better not to open links in new windows by default. New windows can open full-screen in some special browsers, and without the 'back' button they break the flow of web navigation.
Links must be separated by characters, or images, not only by space.
Have alt attribute for images, with good short description of the image.
can be given by using the
like screen readers or font resizing, etc.
reference links and tools
- W3C web accessibility initiative
- WAVE web accessibility evaluator tool
- Firefox accessibility extension
- Fire Vox screen reader extension for Firefox
- ATRC web accessibility checker - University of Toronto
- Adobe Tutorial on Flash Accessibility
- Adobe accessibility center