asymptoticdesign.co.uk - tips for web design and SEO

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.

some general accessibility guidelines

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.

font size

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.

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