chrismar.sh

1. What Is Web Accessibility?

Web accessibility is not just about optimising code for screen readers or avoiding tables for layout. Web accessibility means ensuring that the content of your website is usable by everyone. Layout and design are as important to this as adding alt tags to your images.

Users who cannot access a website easily will not stay long. That’s a customer lost. As the internet grows, more and more people are using it to shop, book flights and find information, and having an inaccessible website restricts your audience.

2. Why Do We Need It?

The aim of a website is to display content, whether that content is a blog, a shop or simply a business’ location and phone number. Any barrier to the clear display of content is a failure to communicate, and that translates into lost revenue or custom.

In the same way that a poorly designed site will have people clicking the ‘Back’ button and going to your competitors, a site inaccessible to the deaf, partially-sighted or disabled vistors will have them choosing another site over yours. In addition, the Disability Discrimination Act (DDA) 1995 says:

“Where a provider of services has a practice, policy or procedure which makes it impossible or unreasonably difficult for disabled persons to make use of a service which he provides, or is prepared to provide, to other members of the public, it is his duty to take such steps as it is reasonable, in all the circumstances of the case, for him to have to take in order to change that practice, policy or procedure so that it no longer has that effect.”

Essentially, you need to provide the same level of service to disabled users as anyone else.
In fact, there have been several high profile cases of websites being taken to court over this. The Sydney Olympic Games Organising Committee were sued by a blind man who claimed their website was inaccessible (http://www.contenu.nu/socog.html), and, in the US, Ramada.com and Priceline.com were fined for having inaccessible websites (http://www.out-law.com/page-4823).

Whilst the US obligations on accessibility are less certain than in the UK, the Australian equivalent of the DDA is similar to the UK version. Whilst no high-profile cases have yet been brought in the UK, sites should be built as future-proof as possible, in all stages of the site from design through to development.

3. How Can We Create More Accessible Websites?

The W3C publishes Web Content Accessibility Guidelines (WCAG) (http://www.w3.org/TR/WCAG20) to help developers publish content in an accessible format. They are split into four areas: perceivable, which relates to colour, images and media content; operable, which relates to the process of interacting with the site; understandable, which deals with the useability of the site for all visitors; and robust, which concerns how the website appears in browsers such as screen readers, both current and future versions.

There are some simple steps that will not only help with accessibility but will, I believe, give a better user experience to all site visitors. The most important is semantic markup. There are many advantages in using semantic tags to mark the page structure, for instance:

• it is easier to style a page consistently
• it displays better in legacy browsers
• it renders fine as a text version, for instance in a mobile browser
• screen readers can read it perfectly
• code is easier for future developers to style or amend

Currently semantic markup means using <ul> or <ol> tags for navigation lists, <h1> – <h6> tags for headings, and <strong> and <em> tags to denote stress and emphasis. HTML5 brings another level to semantic markup, with elements such as <header>, <section>, <article>, <footer> and <nav>.

Structuring a web document this way should not be a slave to design: even though many clients buy in to a site design, we should be encouraging them to inspect the site structure as well.

Also, ensure that your websites render correctly not only in different browsers, but with different settings in those broswers. Turn off Javascript. Enlarge the text (2 or 3 times should be enough). Disable styles. Firefox add-ons such as the Web Developer’s Toolbar are very good for this.

Next, provide text alternatives to any non-text content. This includes alt attributes for any images, title  attributes for links and &lt;abbr&gt; tags for abbreviations. Other things to think about include alternatives for CAPTCHA images, captioning or subtitling audio and video, and using CSS for images that are used purely for design purposes.

For adaptable websites, make sure that content appears in a meaningful sequence. Examples of this include: inputs in a form should use the tabindex attribute to lead the user on the correct path; the ordering the DOM should match the visual order of the page; and labels in forms should relate to the input/select/textbox that they designate.

Colour is an important factor in a how accessible a website is: imagine a form with red text for required fields and green text for optional fields, and then imagine a red/green colourblind person trying to figure out which fields he should be filling in. Simply adding an asterisk by each required field immediately solves this issue. Colour should never be the only visual means of distinguishing content, it should also be flagged by an icon or other visual cue.

If the design of your site calls for light text on a light background (or dark on dark), this colour contrast kit is a handy tool for seeing whether the colours in your website have a high enough contrast. If the colours do not pass at least the AA level of compliance, it is worth rethinking the colour scheme, or at least adding a high-contrast stylesheet option.

Autoplaying audio or video can be distracting or can speak over a screen reader, so ensure that there is a mechanism to disable playback of multimedia (or, even better, avoid autoplaying audio or video at all). Ensure that your site is browseable using a keyboard, by using access keys.

Because some web users react more slowly than others, any time-based activities should be controllable: for example, if a user is logged out after a period of inactivity, their content should be available to them if they re-authenticate straight away; or if a page autorefreshes, the user should be left in the same place with the same options each time, so that data isn’t lost.

Accessibility shouldn’t be an additional level to website development – it should be integrated with your website development process. With all the tools available, it isn’t a hard task to ensure usability.

4. Useful Links

Accessible colours: http://snook.ca/technical/colour_contrast/colour.html

Web Accessibility Guidelines: http://www.w3.org/WAI/WCAG20/quickref/

UI Tests: http://uitest.com/