Accessibility

Overview

15% of the world’s population lives with a disability, according to WHO estimates.

Many of these conditions make it more difficult for people to use the web and other tech the same way as others do.

Fortunately, there are assistive technologies that help people overcome these barriers.

However, these tools are only useful if the web content they’re trying to access is built in a way that can be navigated and interpreted meaningfully.

What do we mean by accessibility on the web?

When we talk about web content accessibility, we are generally referring to best practices that improve the user experience for people with disabilities. For example, we add captions to our videos so that people who are deaf or hard of hearing can still engage with our content.

Other types of disabilities require specific assistive technologies to help them navigate and engage online. These technologies include screen readers, alternative input devices like eye trackers or head pointers, text-to-speech functions and much more.

Web content accessibility experts break down this work into four key areas:

• Perceivable -Information and user interface components must be presentable to users in ways they can perceive.
• Operable – User interface components and navigation must be operable. This means that users must be able to use the interface and it cannot require interaction that a user cannot perform.
• Understandable – Information and the operation of user interfaces must be understandable. This means that users must be able to comprehend information as well as how to use the interface.
• Robust – Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. This means as technologies and user agents advance and evolve, content should remain accessible.

What can affect someone’s ability to access web content?

Types of Disabilities that impact Web Accessibility

• Auditory – ex. people who are deaf or hard of hearing
• Cognitive or Neurological – ex. people with conditions like ADHD, dyslexia or autism.
• Physical –ex. people with mobility limitations due to loss of limbs, tremors and similar conditions
• Speech – ex. people who are mute or speak with a stammer
• Visual – ex. people with complete or partial blindness including colour-blindness

What technologies exist to improve web content accessibility?

Generally, when we think of assistive technologies, we think of tools like sightseeing canes or hearing aids. However, after considering all of the different types of barriers to engaging with web content, you can see why countless new tools and aids have been developed to meet people’s specific needs.

Here are some of the assistive aids that tend to play a large role in our work to make web content accessible.

• Screen magnifiers – Websites should be responsive and easy to resize
• Screen reading or text-to-speech software – All web content should have a text alternative so they can be interpreted by a screen reader
• Keyboard navigation – Since some people cannot use a normal cursor to use their computer, they rely on tabbing to different parts of the page to navigate.

Other benefits to accessible content

The impact of web content accessibility goes beyond assisting people with disabilities. Because most of our work to improve the way assistive technologies interpret our content, it means that it’s easier for other systems, like search engines, to easily crawl and understand our work as well.

These guidelines also improve other key areas of web content work:

• Search engine optimization
• Accessing the web from a mobile device or low bandwidth
• General user experience
• Simple and clear writing style

© Giorgos Moutafis/Amnesty International

© Amnesty International

Tips and tricks you can make your content more accessible

• Use alt text so that your images can be interpreted by screen readers or text-to-speech functions.
• Structure your page with headings so that it is easy to skim.
• Follow good copywriting practices so your text is easy to understand.
• Use inclusive language.

Accessible images

If someone is blind or partially sighted, they might use a screen reader to browse the web.

When the screen reader gets to an image on the page, it will read out ‘Image’ and then look for the ‘alt-text’ property designed to describe the image. If that ‘alt-text’ field is empty, then that user is missing out on a portion of the content on that page.

This is an even bigger problem when we convey complex ideas using images, like when we add graphs, charts and other data visualisation assets.

Text on images

There are various elements of accessibility that we need consider when thinking about text on images.

We should avoid using images and illustrations that rely on being able to read the text in the actual image file. This text is not accessible to screen readers and will most likely be difficult to read on smaller devices.

Instead of adding text in the image itself, we should use text fields in the CMS to add text over an image to create a similar design effect.

Even when we use text fields in the CMS to add text over images, we still need to think about colour contrast to make sure that text is still accessible.

For example, it is very difficult to read black text that sits on dark images.

Structured headings

People rarely read digital content in the same order that it shows up on a page. Most readers use the structure of the page to help them find what they’re looking for.

This includes:

• Headings and Subheadings
• Bold text
• Paragraphs
• Blockquotes
• Images and Videos

Who benefits from using structured text?

• People with visual impairments – Headings make it easier for people using screen readers to skip to the part of the page that interests them.
• People with cognitive disabilities like dyslexia or ADHD – Breaking up the page with headings, images, and block quotes make it easier for people to quickly understand the key messages on a page.
• People with motor-neuron conditions – Some people, particularly those who have trouble with fine motor functions use their keyboard to navigate content instead of a mouse. Structured headings make it easier for these people to skip to the part of the page they want.
• Anyone else who likes clear and easy-to-understand written communications! – Structure is a powerful way to convey meaning. It is easier for audiences to follow a writer’s train of thought when the text is intentionally structured.

© Amnesty International

Without headings or structure

With headings and structure added

Clear writing

General writing guidelines

• Use clear subheadings to structure the page. Aim for 2-3 paragraphs per subheading so the page is easier to skim.
• Try to keep sentences short so they are easy to read. In most cases, sentences should not be more than 20 words.
• Keep paragraphs short to avoid a ‘wall of text’. Try to stick to 2-3 sentences per paragraph.
• Use a short word instead of a long word if possible. Our reading comprehension is lower when we read online

Inclusive language

Amnesty International has guidelines that help us avoid language that is offensive to people with disabilities.

This guidance instructs writers to use ‘person-first language’, or language that puts the person before their disability. For example, we should say ‘people with disabilities’ instead of ‘disabled person.’

We should avoid phrases that imply a negative connotation on the experiences of people with disabilities. This includes a lot of everyday language that we might not realize is rooted in ableist ideas or excludes people with certain disabilities.

Featured Image

To add alt text to your featured image:

1. In page settings, go to your featured image.
2. Click on the image to open it in the media library.
3. Add your alt text in the ‘Alt Text’ field.
4. Click ‘set featured image’

Image Block

To add alt text to an image in an image block:

1. Click on the image block to reveal the block toolbar.
2. Select ‘Replace’ and then ‘Open in media library’. 
3. Add your alt text to the ‘Alt Text’ field in the image details.
4. Click ‘Select’ to save.

To convert text from a paragraph block to a heading block:

1. Click on the sub-heading.
2. Select the paragraph icon in the block toolbar.
3. Select Heading from the drop-down list.
4. Update the post to save your changes.