web content accessibility

It is very important for a website to be accessible to people with disabilities, and to people using browsers with reduced capabilities, for example without JavaScript or images support, or using screen readers. For this a site has to be well designed, easy to understand, with a coherent look, and easy to navigate. A site that is accessible and friendly to people, is also friendly to search engines, content that is designed to be accessible to people, is easy to crawl and index by search engines, also it is easy to adapt to a version for mobile phones.

The accessibility topics in this page are:

general guidelines,
website structure,
font size,
tables,
forms,
hyperlinks,
images,
JavaScript and Flash,
reference links and tools.

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 target attribute, 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 title attribute, of for example hyperlinks <a> elements, or of images <img> elements, to give more information about their content.

website structure

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, role, 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 h1, h2,.. should be used for titles of components of a page, and not only to have a larger font size.

tables

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.

The summary attribute of the table element 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 caption element. If a table has a caption element, the caption element has to be placed immediately after the <table> opening tag.
Attributes like headers and scope (used as attributes of td elements), and abbr and axis (used as attributes of th elements), can be used to help non-visual user agents to associate the content of data cells td with 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.

forms

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 legend (that are like captions for the fieldset elements).

Form control elements, like text fields, checkboxes, etc. can be associated with their description via the label element, that is spoken by screen readers.

The 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 a element, 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.

hyperlinks

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.

Images

Have alt attribute for images, with good short description of the image.

JavaScript and Flash

JavaScript and Flash can cause accessibility problems, and a website needs to be usable from browsers without JavaScript or Flash. Some functionality for JavaScript pages for browsers without JavaScript support can be given by using the <noscript> element. But there are new uses of JavaScript and Flash for accessibility. Adobe has accessibility features in some Flash versions or plug-ins, like screen readers or font resizing, etc.

reference links and tools

www.w3.org/WAI/: W3C web accessibility initiative
wave.webaim.org: WAVE web accessibility evaluator tool
firefox.cita.uiuc.edu/: Firefox accessibility extension
firevox.clcworld.net/: Fire Vox screen reader extension for Firefox
achecker.ca/checker/: ATRC web accessibility checker - University of Toronto
blogs.adobe.com/accessibility/2009/07/new_tutorial_on_flash_accessib.html: Adobe Tutorial on Flash Accessibility
www.adobe.com/accessibility/: Adobe accessibility center