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
How to improve accessibility
There are a number of simple things that can be done to ensure that your site is accessible
- Do not make your pages dependent on images – some web sites are completely image based – this is really bad practise.
- Make sure all images have Alt tags
- Use a text based navigation system not images
- Give screen readers a shortcut link to the navigation and main content
- Put the main content first in the html page
- 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.
- Have well structured content using header tags.
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.
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
h6elements 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.
How to Improve the Accessibility of Your Website