You may have heard the term web accessibility and that you should comply with specific standards. You may well be wondering what all the fuss is about, why you need to bother and is it really worth it.

The short answer is it’s not all that bad, yes it is worth a little fuss and it really is worth it. As you will later read there are numerous benefits to designing an accessible website.

The purpose of this article is to introduce you to the concept of web accessibility, what it means, why it’s important, who it affects and some top tips on how to achieve a good level of accessibility when creating content.

What is web accessibility?

Web accessibility is about designing a website and its content in such as way that it is accessible to as many users as possible regardless of ability or the way in which they browse the web.

Why is accessibility important?

It is UK law and comes under the 1995 Disability Discrimination Act. In October 1999 section 21 came into effect, which says it is unlawful to discriminate against disabled people in the way in which you recruit and employ people, provide services or education. Websites are specifically mentioned in one of the case studies in the supporting material.

There are also numerous benefits to implementing web accessibility and these include:

Financial benefits

• Larger audience reach.
• Reduced support costs in dealing with website enquiries, re issuing documents and helping people find things.
• Reduced site maintenance and bandwidth costs.

Legal & General invested in making their website accessible and saw a 100% return on investment in 12 months as well as:

• £200k per annum saved on maintenance.
• 50% increase in natural search engine traffic.
• 75% reduction in page load times.

Technology benefits

• “Google is a blind user who reads the entire internet every month then reports what it finds to millions of people” If Google and other search engines are able to access your content and index it effectively then this will make things easier to find for all users.
• People can access the same information regardless of the technology they use – from a screen reader, to IE6 on a desktop PC to a Blackberry.

User benefits

• Improved usability.
• Improved readability, quality and confidence in site content.
• Corporate social responsibility: there is a moral and ethical responsibility to provide equal opportunities and access for all.

Who does it affect?

Here are just some examples of some of the different abilities that web accessibility caters for:

• Visual: Blindness, various common types of low vision, poor eyesight such as age related sight degeneration and various types of colour blindness.
• Auditory: Deafness or hearing impairments, including individuals who are hard of hearing.
• Motor/Mobility: Difficulty or inability to use the hands, including tremors, muscle slowness, loss of fine muscle control, due to conditions such as Parkinson’s disease, stroke or repetitive strain injury.
• Seizures: Photo epileptic seizures caused by visual strobe or flashing effects.
• Cognitive/Intellectual: Learning disabilities such as dyslexia and cognitive disabilities of various origins, affecting memory, attention, problem-solving and logic skills, etc.

Some are more common than others such as colour blindness, age-related sight degeneration, people who don’t use a mouse or people with dyslexia. People from all walks of life and industries are likely to be affected by one or more of these conditions. “Albert Einstein is reported to have suffered from dyslexia”.

Here are some examples of the different technologies that people will use to access a website and its content:

• Web browsers: Not everyone uses Internet explorer and even those that do, do not use the same version.
• Mobile phones and netbooks: The growing popularity of the Iphone and Blackberry devices for business use means that content is accessed on very small screens and its presentation needs to be flexible.
• Operating systems: Not everyone uses windows and those that do, do not use the same version.
• Adobe Acrobat, Flash and other types of commercial software: Not everyone uses the same version.
• Assistive technologies such as:
  Screen readers: Software that reads content aloud allowing blind people to access and navigate through it. There are different types that all work in a slightly different way.
• Voice input: Software that allows users to interact with a computer, activate controls and features by speaking.
• Braille: Device that is attached to a computer that allows people to interact with, activate controls and features by using Braille.
• Alternative pointing devices: Graphic pads, keyboard input (instead of a mouse).

Some tops tips for creating accessible content

Here are some key points to consider when creating content to aid accessibility:

Ensure text is clear and legible to support low vision users and those who suffer from conditions such as dyslexia.

Text must be scalable and must remain readable when increased to or decreased by 200%. This supports people with low vision.

Don’t use flashing images as it is distracting and can cause seizures. Content that flashes more than 3 times per second can cause problems. The London 2012 Olympics had to pull their initial online video ad as it received complaints from disability groups and individuals.

Structure word documents correctly: do this by setting headings correctly using the style feature rather than just emboldening or underlining the text. This provides necessary structure for other technologies (such as, screen readers and search engines) to interpret the content correctly.

Ensure that documents are not locked and the properties can be changed.

Explain image content within the text; don’t just rely on the visual display alone to convey information as technology that doesn’t support images (screen readers, some mobile phones) and low vision users will not be able to make sense of it.

Add alternative text to images to describe what it is. If it is for decoration only then set the alt text to null so that the screen reader knows to ignore rather than trying to make sense of it in other ways.

Ensure images are optimised for the web to reduce file size. Ideally, they should be no more than 72dpi.

Ensure that there is sufficient colour contrast between the background and foreground, to aid users who suffer from colour blindness and low vision.

Make link text meaningful; an example of good link text is “guide to accessibility” and a bad link is “click here to view the guide to accessibility”.  This is because when the link is read out of context, it doesn’t make sense or tell the user where it’s linking to. This is quite common when people use different technologies or alter the display to suit their needs.

PDFs can be very problematic, for a variety of reasons, these include:

• There is a lack of underlying structure, which means there is no data behind the scenes for technology and devices to interact with and therefore make sense of. For example, it is unable to distinguish between a heading and a paragraph. As a result screen readers have trouble interacting and making sense of them and search engines have trouble indexing them properly.
• Different versions of the software will make it easier or harder to use, open.
• File sizes are generally large making them difficult to download.

Here is an example of what a user may experience when accessing a PDF that has no underlying structure:

Figure 1: A screen reader or Google may get no information at all.

Figure 2: Visual equivalent of what a user may hear; one long paragraph with no separation between sections, headings or text.

They can be optimised to offer a better level of accessibility, by implementing a few features. Read my top tips for creating accessible PDFs as a useful starting point.

Summary

I hope this has given you a useful introduction to the concept of web accessibility and some helpful tips when creating content for your website.

Remember people and technology come in all varieties and it makes good business sense to cater for as many as possible.

References

• http://www.w3.org/WAI/bcase/legal-and-general-case-study
• http://www.456bereastreet.com/archive/200706/london_2012_olympics_branding_film_causes_epileptic_seizures/
• http://news.bbc.co.uk/1/hi/magazine/6728071.stm

Here’s some things you can do to make PDF documents more accessible. One thing to be weary of though; making many changes to a PDF will bloat its file size, so try to make sure the original is as well structured as possible.

Vision impairments

• Do not create PDFs from image only scans.
• Create tagged PDFs. Tags will make the content more accessible if used correctly.
• Have a logical reading order.
• Provide alternative text for all graphics, links and forms fields.
• Use navigation aids such as bookmarks.
• Specify a document language within the properties.
• Use accessible fonts.
• Forms fields must be accessible, clear labels and logical tab order.
• Make sure security settings do not interfere with screen readers.
• Ensure that there is enough contrast between text and background colours.
• Do not rely on colour or images alone to convey messages so, be careful about using colour only when referring to something in the document like a graph or chart and explain the meaning of charts and graphs within the text.

Motor disabilities

• Don’t make hotspots around links too small.

Hearing disabilities

• If you add sound and movie clips to PDFs make sure you provide synchronised captions for the video or a full transcript.

Cognitive disabilities

• Use clear and simple language and keep jargon to a minimum.
• Run through a PDF document using the inbuilt Read Out Loud feature to check that it makes sense.

1. Use the label elements to associate form controls to text label
2. Ensure that the labels are descriptive
3. Position labels appropriately to maximize predictability of relationships to their controls
4. Where necessary show examples of expected data input, for example date format
5. Group related form elements by using the fieldset and legend elements
6. Group related options by using the optgroup element in a dropdown menu for example
7. Ensure there is a logical tab order through form controls
8. Include text instructions at the beginning of the form or set of fields that describes the necessary input
9. Ensure that the user activates changes by the use of a submit button, for example don’t use onchange events on dropdown menus
10. If you have to use an onchange event ensure there is a clear explanation of what will happen when the control is changed prior to the controls activation