Creating Accessible Content

Building an accessible website is becoming more and more important: it is estimated that roughly one in twenty people has a form of colour-blindness. So what steps can we take to ensure that a site can reach the widest possible audience?

Accessibility is built from the ground up: a solid foundation in a site structure will ensure that it is robust enough to interface with assistive technology such as screen readers.

But some things can go wrong when creating actual content for the site. Here is some advice to keep in mind to make sure your content is more accessible.

Use plain language

Your content should be easy to understand for the average user. Try to write shorter, more concise sentences, and avoid using too many adverbs and the passive voice. A good example of this is the NHS website and the way they explain medical information to the average user.

Do not use too many abbreviations and acronyms, and if you do, explain them in the text body where possible.

Elements such as CTAs (call to action links and buttons), links and form buttons should have a specific label: instead of using generic labels such as “submit” and “read more”, try to describe the action of the button, i.e. “Send form”. Links should also be implemented in the body of a paragraph to the keywords of a page instead of a generic “click here" at the end.

This helps because screen readers will scan a page by their links and form inputs, and it’s not easy to navigate a site where 7 different links are all named “click here”. How will you know which is which?

Contrast Ratios and Emphasis

Text elements should have good contrast compared to their background. You should aim to have a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. You can use this contrast checking tool to verify if your colours fit the recommended guidelines.

Good contrast will ensure that people with colour blindness or otherwise limited vision will be able to read your content.

You should avoid using colour alone to provide information on a site, and always include a text explanation. For example, if a user fills a password field wrong, the form should return the text "Wrong password" as well as the usual red styling.

And lastly, you should also avoid using underlines for providing emphasis. These are usually reserved for identifying links, and may be seen as a clickable element. Bold or italic font is recommended for emphasis instead.

Images and Videos

Whenever you insert an image, there will be an option to add a text alternative attached to it, usually labelled "Alt Text". Make sure the text is short and descriptive, not generic such as “picture number 2”. The text will be read out loud by screen readers so choose wisely!

This text alternative field can be omitted and left blank if the image serves no semantic purpose and is only decorative, but if in doubt, please provide a text alternative. 

Avoid using images of text, especially for large bodies of text. Zooming into an image will not provide the same results as zooming into text, and screen readers will not be able to read out the text on an image.

Videos should not be playing automatically on a page: silent videos can be used sparingly, but playing audio will make screen reader navigation next to impossible.

You should also avoid using any kind of flashing element if possible.

Use headings properly

If a page of your site contains a lot of text, you should be sectioning it off using headings. Headings will create a page structure that is picked up by assistive technology. This structure should be logical and consistent, and headings can be seen as ways to fraction content.

The first heading should be the title of the page, and the general recommendation is to only have one per page.

The second heading creates different sections of content on a page. These sections can be divided further into sub-sections with third headings, and so on.

When sectioning off your content, you should be doing it because of the meaning of your text, not with style in mind. The list below is an example of a theme divided into four heading levels:

Animals (Heading 1)

1. Cat (Heading 2)
   • Head (Heading 3)
   • Body (Heading 3)
   • Legs (Heading 3)
     • Front paws (Heading 4)
     • Back paws (Heading 4)

2. Dog (Heading 2)
   • Head (Heading 3)
   • Body (Heading 3)
   • Legs (Heading 3)
     • Front paws (Heading 4)
     • Back paws (Heading 4)

Accessible sites are best achieved by keeping things simple and logical, so do keep this in mind the next time you're structuring content.