The web experience is developing into an increasingly rich environment.  Advanced navigation controls and dynamic content all add to this richness.  Which is great for the majority of users, but what if you have physical or visual disabilities?

This wonderful richness can make content inaccessible to you. People with physical disabilities and who cannot use a mouse may have difficulty with, for example, drag and drop type actions, and to the visually disabled, despite using screen readers, some of this content is just invisible.

Why you should care.

Take a look at these figures:

  • In the UK over 10 million people have some sort of physical or visual disability.
  • More than 2.5 million people have physical co-ordination problems
  • Over 2 million people have significant sight loss
  • Nearly 500,000 are registered as blind

Many of these people use, or would wish to use, the internet. By not making your web sites accessible you are effectively ignoring these people.

One last figure to consider: £80 billion is the estimated annual purchasing power of people in the UK with disabilities.

HTML and CSS

HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics imagery and script languages such as JavaScript, HTML and CSS are the basis of building Web pages and Web Applications. It is the advanced use of these technologies that is causing problems for people with disabilities.

How to improve accessibility

There are a number of simple things that can be done to ensure that your site is accessible

  1. Do not make your pages dependent on images – some web sites are completely image based – this is really bad practise.
  2. Make sure all images have Alt tags
  3. Use a  text based navigation system not images
  4. Give screen readers a shortcut link to the navigation and main content
  5. Put the main content first in the html page
  6. Visual CAPTCHA systems to filter spam bots also filter out the visually disabled – try and use one with an audio option as well as a visual one.
  7. Have well structured content using  header tags.

New Developments

WAI-ARIA

The World Wide Web Consortium (W3C) has a Web Accessibility Initiative (WAI) and is developing an Accessible Rich Internet Applications Suite (ARIA) purposely to address these accessibility issues. WAI-ARIA, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.

ARIA specifies Roles, States and Properties which can be used to assist screen readers

An example of a role:
<li role="menuitem">Home Page</li>
Examples of role and state:
<li role="menuitemcheckbox" aria-checked="true">Sort by Date</li>
ARIA also specifies  landmark roles which help to define the structure of a web page:

  • role="banner" –  for the masthead of the site,
  • role="navigation" –  for each of the navigation lists at the top and bottom of the page,
  • role="search" –  for the search form,
  • role="main" –  for the main content of the page,
  • role="complementary" –  for the related information in the sidebar, and
  • role="contentinfo" –  for the copyright statement at the bottom.

However, this is still a working draft and because of this, implementation across the mainstream browsers is spotty;IE8/9, Firefox 3, Opera 9.5+ and WebKit-based browsers like Safari 4+ all support some aspects of ARIA.

HTML5

The working draft for the HTML5 specification also has new tags that have a similar function to ARIA and improve the semantic structure of web documents:

  • section – represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.
  • article –  represents an independent piece of content of a document, such as a blog entry or newspaper article.
  • aside –  represents a piece of content that is only slightly related to the rest of the page.
  • hgroup –  represents the header of a section.
  • header – represents a group of introductory or navigational aids.
  • footer – represents a footer for a section and can contain information about the author, copyright information, et cetera.
  • nav –  represents a section of the document intended for navigation.
  • figure –  represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.

Use of HTML5 and ARIA

The HTML5 and WAI-ARIA specifications are still working drafts and because of this, implementation across the mainstream browsers is spotty:

  • IE8/9, Firefox 3, Opera 9.5+ and WebKit-based browsers like Safari 4+ all support some aspects of ARIA.
  • IE8/9, Firefox 3, Opera 9.5+ and WebKit-based browsers  like Safari all support some aspects of HTML
  • Once the standards are finalised then there ought to a consistent implementation of  both HTML5,  ARIA (and CSS3) across the major browsers
  • Screen readers like Window-Eyes 7 for Windows, and VoiceOver  for the Mac, have also started to incorporate ARIA  and HTML5 capabilities.

Further Reading

How to Improve the Accessibility of Your Website

W3C Web Design Standards

W3C WAI-ARIA

ARIA and Progressive Enhancement