What is web accessibility, and why does it matter?

Web accessibility can be defined in a number of different ways. Originally, it was meant as making web content obtainable to disabled people. Nowadays the definition may be broadened out. One definition of web accessibility is:

Web accessibility is about making your website accessible to all Internet users (both disabled and non-disabled).

Webcredible

When a web page or website is inaccessible, it means that someone who wanted to consume the content is not able to. Perhaps the content is not accessible on the device they are using, or their web browser does not interpret it in the expected manner, or the content is not provided in an alternative format suitable for their needs.

This article will focus on disabled users of the Web.

Types of disability

The ultimate goal of creating an accessible website is to have all users, regardless of the nature of their disability, able to access the content. This is a challenge, as disabled people are a heterogeneous group with differing abilities and needs. Some may not have any difficulty browsing the web at all. For those who do, disabled web users can be roughly categorised into five groups:

• Visual impairment
• Auditory impairment
• Motor impairment
• Cognitive and learning disabilities
• Seizures

More on these later.

Why is it important to have an accessible site?

There are various reasons:

It’s the law

Under the Equality Act 2010 in the UK, which replaced the 1995 Disability Discrimination Act, Section 29(1) states:

A person… concerned with the provision of a service to the public or a section of the public… must not discriminate against a person requiring the service by not providing the person with the service.

Other countries have similar leglislation. In the USA, Section 508 of the Rehabilitation Act (1998) requires all US Federal agency sites to be accessible. Australia’s Disability Discrimination Act 1992 prohibits disability discrimination by anyone offering goods or services.

In theory, failure to provide an accessible website could result in a lawsuit. In practice, few successful actions have been brought. One high-profile case was that of Maguire vs SOCOG – a blind man who sued the Sydney Olympic Games Organising Committee for failing to provide alternatives to pictures and access to all areas of the 2000 Olympics website.

It’s the right thing to do

Tim Berners-Lee, creator of the World Wide Web, says that:

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.

The economic argument

Disabled people make up 11.9 million of the UK population (nearly 1 in 5) and have a spending power of £80bn. The prevalence of disability increases with age, so if older people are a significant part of your target market for your product or service, this should be of particular interest to you.

The WHO estimate a prevalence of disability of 15% worldwide.

 Other benefits

Some other benefits of an accessible website are good PR, improved SEO and greater ease of use.

What needs do different disabled people have?

Visual impairment

There are nearly two million people in the UK who have some form of sight loss. Visually impaired users may have issues such as:

• central or peripheral sight loss
• reduced sharpness of vision
• problems controlling eye muscles
• colour blindness.

People with a visual impairment may use one or more forms of assistive technology to browse the web. These could include:

• a screen reader – reads aloud the text and links on the web page.
• a screen magnifier – enlarges the web page view, making it easier to see.
• a refreshable Braille display – converts text to Braille on a terminal.

“Refreshable Braille display” by Eddau is licensed under CC0 1.0

There are also accessibility features built into Windows. These are available from the Ease of Access Center in Settings. They include the ability to magnify the screen, improve colour contrast and provide text equivalents for sounds.

Website design features that help visually impaired people

1. Use of alt text for images. This is a simple aspect, but one which is not always implemented. When you insert an image on a page, make sure that a description of what the image represents is included. The image below contains alt text, which enables a user with sight loss to understand what it is there for.
   Including alt text means writing code such as:

   <img src="http://www.abrightclearweb.com/images/pouring-beer.jpg" alt="Close up of a beer bottle being poured into a glass" />

2. Using tables for data, not layout, and labelling them correctly. Fortunately, the usage of layout tables is much less common now that cascading style sheets can specify positioning on the page.
3. Choosing fonts which are easy to read, which can be resized. Standard fonts such as Verdana, Arial and Georgia are widely available on different devices. It is recommended to use relative font sizes, such as % or em, which are more easily resized. This also means making sure that the page looks fine if magnification is increased up to 200% zoom.
4. Ensuring sufficient colour contrast, and not being reliant on colour alone. This means avoiding colour choices such as light grey text on a white background (my pet hate!) Also, avoid using colour coding solely to distinguish different types of information.
5. Using breadcrumbs. This may not be necessary on small sites, but on large sites, it is really important to let users know where they are within the hierarchy of the website.
6. Enabling skip links for navigation or lists of links. Imagine being reliant on a screen reader and having to listen to the same list of twenty links every time you go to a new page. If that doesn’t sound like fun, create skip links in your pages to let users go straight to the content they want.
7. Label form controls. Don’t assume that a visually impaired person will understand what a text input box is for in the same way that a sighted person would.

Auditory impairment

According to Action on Hearing Loss, there are 12 million people with hearing loss in the UK.

40% of over-50s in the UK have some hearing loss.

Website designers can help make their sites accessible to hearing impaired people by:

• Captioning video. Although YouTube now offers automatic captions, they are not provided for all videos, and are often not of sufficient quality. It is best to provide your own when uploading a video.
• Providing transcripts of audio and video. Here is a list of companies providing transcription services.
• Create suitable content for users of sign language. Obviously, this is a more expensive option, and is better suited to larger organisations, or ones with a significant audience of people with hearing loss.

Motor impairment

This covers a wide range of conditions such as:

• Cerebral palsy
• Parkinson’s disease
• Spinal cord injuries
• Arthritis
• MS

These users may find it difficult or impossible to use a conventional mouse, so require alternative means to navigate and interact with web pages. This might be by using any of the following:

• an adaptive mouse, or trackball device

“Kensington Expert Mouse 5 Trackball” by Suimasentyottohensyuushimasuyo is licensed under CC BY-SA 3.0

• a standard or adaptive keyboard
• a joystick
• switch-based devices (single switch, or sip-and-puff switch)
• a mouth stick
• a head wand
• eye tracking software
• speech recognition software
• touch screen devices

WebAIM have more information on motor skill disabilities:

• WebAIM: Motor Disabilities: Assistive Technologies
• WebAIM: Survey of Users with Motor Disabilities

Website design features that help people with a motor impairment

1. Ensure web pages are keyboard accessible for those who cannot use a mouse. Keyboard users can tab through links, which should be in a sensible order, following the page flow.
2. Make links as wide as possible and static. This gives anyone with a mobility issue the best chance of selecting the desired link.
3. Set focus to page elements when they are selected. On this site, a link or text box which is currently selected by the keyboard has a black border.
4. Skip navigation links also help motor impaired users. These can be hidden with CSS, and made visible when they are tabbed through.
5. Avoid creating forms which are time-limited to complete. This prevents user frustration if the form resets to default because the user did not manage to finish it in a set time. My online bank has a checkbox to fill in to avoid the screen refreshing on timeout.

Cognitive and learning disabilities

This category is also quite broad, and includes conditions such as:

• Autism spectrum conditions – this applies to around 1% of the UK population
• Dyslexia – an estimated 7 million people in the UK have dyslexia
• Dyscalculia
• Dementia
• ADHD

People who are affected may have memory problems, struggle with understanding text or images, have a limited attention span or give up easily when faced with unexpected situations.

Website design features that help people with cognitive or learning disabilities

1. Use language that is simple and clear. This is something you should do anyway, as it helps all users. Some websites provide ‘easy read’ versions for people with a learning disability. Here are some examples of easy read guides on money and benefits from Mencap.
2. Have a sensible site structure, with site search and a site map. Let users find what they are looking for easily.
3. Lay out pages in a logical order. Use the H1 – H6 headings as intended; don’t mix the order of headings up.
4. Give clear error messages. Make sure the user knows what the error means, and what they can do to fix it. This is particularly important with filling in forms. If a field is required, make it explicit that it is required, and put the error message in an obvious place.
5. Distinguish between unvisited and visited links. This helps people understand which pages they have already visited.
6. Avoid the use of all caps text, large blocks of italic text and moving text. These can spoil the readability of text for users.
7. If a link opens in a new window, warn the user beforehand. People are used to clicking the Back button to revisit the last page. If you remove that option, let them know first.

User requirements may vary depending on the nature of the disability. For example, dyslexic users may prefer black text on a cream background, rather than black text on a white background. One way to cater for this could be to have a style selector.

Seizures

A seizure occurs when there is a change in the electrical activity of the brain. Seizures may produce any reaction from no symptoms to convulsions. Seizures are commonly associated with epilepsy, but can also be caused by low blood sugar, brain injury, tumours, strokes, meningitis and other conditions.

Website design features that help people who may have seizures

• Avoid large, bright animations or video that have strobing, flickering or flashing effects. These kinds of content may cause photosensitive seizures. Content should not flash for more than 3 times in one second. If you must use such content, warn the user and allow him or her to control it. Don’t have it auto-play, and give the user the ability to pause it.

How can I make sure my site is accessible?

Web Content Accessibility Guidelines

A number of standards, guidelines and laws have been formulated to meet the needs of disabled people using the web. The Web Accessibility Initiative (WAI) was formed in 1997 to promote accessibility. It released the Web Content Accessibility Guidelines (WCAG) in 1999. This featured 14 guidelines, each with a number of checkpoints at three priority levels: P1 (must be fulfilled), P2 (should be conformed to) and P3 (may be addressed). 

Only if a document met all the checkpoints for a priority level could it be described as conforming to the WCAG. If all P1 checkpoints were met the page was level A, for all P2, AA and for P3, AAA.

Version 2.0 of the WCAG followed in 2008. It is based on four principles, that content should be perceivable, operable, understandable and robust. There are 12 main guidelines which are subdivided further. Each one has success criteria ranging from level A to AA to AAA, the latter being the highest level. Guidance is given on understanding the criteria, meeting the requirements to satisfy them and typical missteps.

The latest version is WCAG 2.1, which builds on WCAG 2.0 by adding a further 17 success criteria to address cognitive difficulties, low vision conditions and mobile accessibility.

WebAIM has a simple checklist for WCAG 2.0, with links on the guidelines and how to pass.

WAI-ARIA

The web has changed in recent years, with less static content and more real-time information such as rolling news and tweets. Drag and drop interfaces, calendar controls and sliders are also now used in web pages, but these are not native to HTML. The technologies used to generate these, like AJAX and JavaScript, are not necessarily accessible, so the WAI has produced a new guide to cover such cases. This is called Accessible Rich Internet Applications (WAI-ARIA) 1.0. Any things that the user can interact with (widgets) are given roles which describe their function, state (e.g. checked or unchecked) and place on the web page.

Further reading on WAI-ARIA

•  Introduction to ARIA – Google Developers
• Introduction to ARIA – Accessible Rich Internet Applications
• ARIA Roles 101

Different countries’ web accessibility standards

As mentioned earlier, the USA has Section 508 guidelines, which apply to the accessibility of all information technology. Full information is available at the Section508.gov website.

The UK equivalent is standard BS 8878 Code of Practice, which was developed by the BSI in 2010 and is available for purchase.

Accessibility testing

A number of accessibility testing tools are available to check accessibility against the WCAG or Section 508 guidelines . Tools can check for a number of accessibility violations, but cannot find every error. Ideally, testing with disabled users is also required.

If you have a low budget for testing, some free web-based tools are:

• WAVE– produced by WebAIM. Evaluates pages for common accessibility errors and checks page contrast. Also available as a Chrome toolbar.
• CynthiaSays – similar to WAVE. You can choose to check a page against the WCAG or Section 508.
• aXe – free Chrome extension for checking accessibility.
• WCAG contrast checker – Firefox add-on to assess colour contrast.

Remember, though, that tools are limited in their uses. Read about the pros and cons of accessibility testing tools.

Summary of web accessibility and its importance

Web accessibility is a big subject, and this has just been an introduction to the topic. It is something that needs to be factored in at the outset of a website build rather than thought about at the last minute. The needs of different disabled people can be complex, but it doesn’t take much effort to make a site more accessible. A good approach is progressive enhancement – start with a basic, cleanly marked up website that everyone can access and gradually add more complex features with CSS and JavaScript.

Improving accessibility can help your content be seen by more people, boost your SEO and increase your chances of making sales. Ultimately, though, it’s just the right thing to do. Building accessible websites makes the web better to use for everyone.

Category: Accessibility Tags: ARIA, disability, wcag