Website Content Accessibility

The spirit of WCAG

Although the introduction makes it clear that the guidelines are for the benefit of the disabled, it is also asserted that if the guidelines are followed, a better experience should be enjoyed by all website users, regardless of their disabilities. The guidelines promote accessibility for all.

Legal Perspective

We need to understand that the WCAG is a global concern, but is not a legal requirement. Local laws may demand more than these guidelines are able to support. For example, the Disability Discrimination Act (DDA) is an operative law in the UK, and should be read in conjunction with WCAG, particularly for service-based organisations.

For some UK organisations, there could be legal implications. The DDA upholds a view that organisations should employ and make services reasonably accessible to people with a wide and varied range of access needs. A company web site could be deemed such a service and the DDA laws could apply if the website is deemed inaccessible. The WCAG can be used to make the inaccessible accessible.

A website that is providing nothing more than a marketing campaign for an organisation is unlikely to fall foul of the DDA, yet should uphold WCAG access requirements.

The Guidelines

The WCAG gives us 12 guidelines that are organised under 4 guiding principles. Present here are the guidelines with simple examples as an overview to understand the spirit of the document. The WCAG is far more detailed in coverage and is specific to a much wider scope than is discussed here.

Perceivable – alternative ways to distinguish content

Using text alternatives to describe or replace non-text content is beneficial. This might include the use of the ALT tag to describe an image. The ALT content can be read by speech synthesizing browsers. The text might describe briefly what the image is or what is going on in the image. For example, ‘[Company] Logo’ or ‘The Prime Minister meets the Queen’.

Text captions and alternatives should be provided to describe audio and video content. The BBC, for example, now relies on video content for their news pages. They provide a summary of the content below the video clip. Is this enough though? Some people might get frustrated at the lack of text if they are unable to play the video for a variety of reasons, such as being in a work place that doesn’t permit audio players.

Content needs to be adaptable and be readily available to assistive technologies. This is primarily about presenting information and structure within a web page and separating the information and structure from the presentational attributes. An example might be the H1 tag to produce a level 1 header title. Here we have the structure of the title and the information being the words in the title. Cascading Styles Sheets (CSS) is used to control the size, colour and position of the title on the page, rather than hard coded HTML. This enables both normal and more specialist browsers to interact with the page and reproduce the information and intended structure, but in a presentation that aides the user. It could be as simple as enlarging the text within a normal browser, but too many web pages effectively switch off this basic browser feature due to hard coding text size within the HTML code.

Use sufficient contrast to make things easy to see and hear. From the textual perspective this is about ensuring that the text font and size can be read and that the colours used for text and background are sufficiently contrasting so as to promote readability. Generally speaking, dark text on light backgrounds, or vice versa, work well with commonly used fonts and font sizes. From an auditory perspective, the user should be able to pick out the intended audio content and control the audio file to stop it, rewind it and replay it at will. The ability to control audio files, which include video, should be obvious or explained textually on the page. Have you visited a web page that launches straight into audio and catches you unaware? It is often difficult to stop the noise and start again when you are in audio receptive mode. Imagine how this would be if you were reading a web page with just a speech synthesiser – trying to pick out the page information from the page content.

Operable

Make the functionality of a web page accessible by keyboard strokes rather than just mouse clicks. Many people, especially trained typists, use the keyboard more than the mouse to control menus and press buttons on web pages and applications. There are also keyboard emulators to support specific access requirements. The controls on a web page can be set to operate with keyboard shortcuts, as well as basic keyboard interaction, such as the Tab and Enter keys to move from one control to the next and activate it.

Give users enough time to read and use the content being presented. Try reading the credits at the end of a film or TV show and you will get the gist of what this is about. Scrolling or marquee text, auto-play images, videos, audio files and time-delayed redirects are all included in this area. As is the time it takes to complete a form in relation to a session time limit. Sufficient time should be allowed along with controls put in place that enable users to stop any automatic play and replay it at will, or even better, textual content and controls that enable all users to play the content when they are ready – not automatic.

Do not use content that causes seizures. Epilepsy can be brought on by flashing imagery. Television shows often warn viewers of flash photography or flashing images prior to playing a video clip. With web-based content such warning can be missed, especially by children. Also, CRT screens flicker as they repaint the screen. It is therefore appropriate to avoid flashing imagery. If it is required, the guideline is flashes or blinks (the image turns off then on again momentarily) should be less frequent than three times within one second. Even a one second burst can cause a seizure, and so the user cannot be offered to turn it off at their convenience. It simply should not be presented.

Help users navigate and find content and to tell them where they are. Navigation capabilities are essential for multi-page websites.

• A single page of content could use headings as a means of conveying navigable structure, especially where there might be blocks of superficial content around the main content, like adverts and such like. Help users by providing a link at the top of the page to get to the main content. Each page should also have a descriptive title so that people can determine if the page served is what they are expecting.
• When the page is presented, offer keyboard users the ability to tab onto a control that can link them to the start of the content, thereby skipping over the many controls found in page headers (menus and images). This could also be used to tab onto audio or video controls.
• Where a table of contents is provided, be descriptive in the links to aid navigation, and where two links point to the same place, use the same description.
• Don’t produce an aesthetically pleasing menu at the expense of having no menu at all if the technology used to drive it is not loaded or simply not used in the user’s browser.
• Navigational aides should be present in the most basic form of HTML with alternative text provided for non-textual links, such as images.
• Use alternative methods of navigating a site, such as providing a search capability or a structured site map (the human readable type as opposed to the search engine type).
• Use an appropriate method of showing the user where they are on the site after they have used the navigational aides.   

Understandable

Make text readable and understandable. Text content can be made more difficult to read and interpret when employing presentational methods that go against the usual way of doing things. For example, using small letters where capitals are normally expected and vice versa; using words like ‘content’ which have two meanings and are pronounced differently. There are also suggestions that text should not be fully justified, like it is in books, and there shouldn’t be blocks of italic text, again like there is in block quoted text in books. You may wonder if it is possible to be fully compliant with this guide because it is too easy to fall foul of it. Some things we can do:

• Define the main language of the web page in the headers
• Define changes of language in the content so that it can be read by document readers correctly
• When many unusual words are used, especially figurative, they are difficult to interpret. Consider using a glossary or a link to its meaning – or simply use other words that mean the same.
• Don’t use abbreviations in abstract. The abbreviation ‘Rd’ may not be correctly interpreted as ‘Road’. Acronyms can also be a problem if they are pronounced one way but spelt another. Endeavour to provide the meaning of the abbreviation the first time it is used. For example, World Health Organisation (WHO).
• Try to keep content as simple as possible. If this is not possible, declare the reading level that the document is aimed at.

Make content appear and operate in predictable ways. When visiting a website we expect the page we are looking at to behave in predictable ways. We don’t like it, for example, when we tab or click a link and find that it activates a pop-up window.

• ‘On Focus’ events – try to avoid their use and instead use ‘On Activate’ events which require the user to actually activate something rather than having something happen when they are merely tabbing through controls.
• Avoid using the ‘On Input’ event to automatically do unexpected things like submitting a form. Sometimes, however, this event can be useful, like for providing additional context related fields when a user selects from a list. It can still appear confusing and it might be better to provide a multi-page sequence of forms than one big complex form.
• Use consistent navigation on all pages of a website. There are general de-facto standards that suggest a menu system be provided either along the top or down to either side of a page. Business names and logos tend to be at the top of the page. If you use skip links and search boxes, have them in the same place for each page.
• Also be consistent in the way that controls are identified. For example, a description of a control to submit material to a website should always start with the word, ‘Submit’ or ‘Upload’, but not a combination of both words. Use ‘Enter’ or ‘Go’ or ‘OK’, but not all three.

Help users to avoid and correct mistakes. Mistakes are inevitable and all humans encounter them -- it’s how we learn. With many websites, mistakes are encountered due to poor design. For example, not making it clear what the user is expected to enter in a form field. When an error is encountered, it is not always made clear to the user, who is wondering why their search results have not been returned and continues to hit ‘Submit’ without resolving the issue. We have all been there, suffering in frustration. This is what can be done to aide users:

• Provide a clear text message that describes the error and the field it relates to. The field could also be highlighted in some way to guide users.
• Provide clear labels for each field, along with associated text that describes what is expected and any formatting requirements, especially for dates, postcodes, telephone numbers and alike.
• For transactions that carry a financial and non-returnable burden, ensure that the user is wholly aware of what they are committing to as a final check prior to submitting the form. Also inform users of any irreversible submissions.
• Provide help links or contextual help for each field of a form

Robust

Be compatible with current and future technologies. Assistive technologies are developed to aide those with special accessibility requirements. Such technologies are developed in line with current standards and guidelines. If you act outside of the standards and guidelines, assistive technologies are likely to fail – to the detriment of the user.

• Ensure that each page of a website is correctly written with start and end tags in place and nested in the correct order so that the pages are parsed correctly without crashing.
• Endeavour to use standard interface criteria rather than custom controls

Much of the guidelines take a fairly common sense approach to web page design and development. From the developer’s perspective, it is about understanding who the audience is and the many access needs they may have. 

The guidelines don’t thwart creativity. In fact they bring greater dimension into web page and associated media development. It creates a greater and more exciting and, hopefully, a more meaningful challenge for developers.

References and Further Reading

http://www.w3.org/WAI/WCAG20/quickref/Overview.php

http://www.w3.org/TR/UNDERSTANDING-WCAG20/