Digital accessibility

Public sector bodies in the UK are required to follow WCAG 2.1 guidelinesOpens in a new tab for website and digital accessibility. The guidance is designed to reduce barriers to accessing online content for readers with a range of visual impairments, impaired hearing, limited motor skills, and neurodivergent readers.

For a research project with a limited budget, carrying out an assessment and publishing an accessibility statement looks like a time-consuming task for a relatively small number of readers. However, around 22% of the population report some form of disabilityOpens in a new tab, whether permanent or temporary, and the National Autistic SocietyOpens in a new tab estimates around 20% of people could be neurodivergent in one way or another. So accessibility actually goes to the heart of usability and the user experience – you want your content to be accessible by everyone, no matter what their individual needs are.

Quick guides

At first glance, the guidelines are fairly daunting but there are a number of quick guides to help you:

• Understanding WCAG 2.1Opens in a new tab | GOV.UK
• WCAG 2.1 PrimerOpens in a new tab | GOV.UK on Github
• Accessibility guide checklistOpens in a new tab | 18F, US General Services Administration

Many of the actions focus on web page content and how it is displayed – these are usually within the control of the website editor, and are easy to follow. For example, Guideline 2.4.4Opens in a new tab Make sure the purpose of a link is obvious from its link text.

If you do a quick accessibility check each time you create a web page, you can pick up any issues immediately and know that your content is compliant. A browser plugin such as the WAVE accessibility toolOpens in a new tab from WebAIM makes checking very straightforward.

The server-side and design actions are more technical and may require support from a web developer or your IT team. For example, Guideline 2.4.1Opens in a new tab Give people who do not use a mouse a way to move to the start of the main content, or Guideline 1.3.2Opens in a new tab Make sure content can always be read in a logical order even when stylesheets are disabled.

If your website uses a content management system (CMS), most will have the fundamental accessibility requirements built in, but you must go through the guidelines and check, preferably before you launch a new site. Be wary of using plugins – while most CMS are built to be accessible, plugins are usually built by third party developers who are less concerned with the guidelines. Annoyingly, the CREDS site fails on a few very small errors generated by menu and filter plugins!

If you are hiring a web designer to set up your site, make sure you request the site be fully compliant with WCAG 2.1 guidelines, and don’t be afraid to check and request amendments if there are any issues.

Web content basics

Online readers tend to scan pages rather than read them completely, so the way you write must take that into account. You should:

• Write clearly and concisely in short paragraphs, and try to feature one concept per paragraph – a reader may not get to the end of the paragraph and so miss a subsequent topic
• Use meaningful subheadings, and keep them short.
• Include bulleted lists to break up the text where appropriate. Keep the bullets to a similar length, use similar sentence construction and don’t begin each with the same word.

Making use of white space and breaking up solid text is also helpful for neurodivergent readers who can find dense text blocks difficult to follow.

Fundamentals

• Use semantic markupOpens in a new tab – that is, construct the content using HTML tags. This is all managed for you in a CMS-based site
• Use sequential, hierarchical headings – don’t skip a level, for example h2 should be followed by h3 not h4
• Write descriptive links, never use ‘click here’ – screen readers read out the link text, so ‘click here’ gives no information about the link destination
• Always indicate the file type, page count and file size for links to pdfs.Include the file type in the link text: Shifting the focus: energy demand in a net-zero carbon UK, pdfOpens in a new tab (Opens in a new tab, 108 pages, 8.6 MB)
• If you choose to open links to external sites in a new tab, state Opens in a new tab or use an external link icon. If you use an icon, you should ensure that screen readers can identify that the link leaves the site
• Do not use tables to display content, and only use tables for data, not text.
• Do not change text colour – the underlying stylesheets govern text style and colour
• Do not use italics or underline text – underline usually indicates a link, italics can be difficult to read
• Use bold sparingly
• Each individual link should only appear once on each page
• Do not use colour or visual terms to describe content – for example, the ‘red button’ means nothing to someone who is visually impaired
• Avoid moving images and turn off autoplay
• All embedded video or audio content must have a full transcript with descriptions of any text-based imagery and important context such as sound effects.

What’s not in the guidance

Be careful with punctuation. Depending on the screen reader, some punctuation marks are read out differently, so if the mark is crucial to the understanding of a sentence, write it out: for example, write minus rather than using a dash.

• Don’t use brackets as screen readers often ignore them
• Bulleted lists don’t need commas or semi-colons, but do use a full stop at the end of the last point
• Try not to use dashes as they are often ignored too
• Don’t use slashes in text – they have a specific meaning in HTML
• Write out mathematical symbols if they are important to understanding the text
• Don’t use all caps, they are difficult to read. Some screen readers read out each individual letter rather than the word.

Additional accommodation for neurodivergent individuals can also improve the reading experience for other people:

• Include simple instructions
• Use literal language and short, simple phrases
• Include links to supporting information to allow for background reading.

Short pdfs should be made into long-form web pages rather than linked as files as they are often not created with accessibility in mind, and can be difficult to read on a smart phone or tablet. If linking to an external document, link to a web landing page rather than the pdf file, where possible.

What we’ve learnt

Tempting though it may be to use a paid-for service to carry out your assessment, we’ve found that doing it yourself helps you to understand the issues and create better content as a result. It also helps to highlight some of the technical pitfalls so you know what to ask a developer in future.

Embedding long videos into web pages is rarely worth the considerable effort of captioning, adding audio descriptions and transcribing the content. Research suggests that people rarely get beyond 15 minutes of a YouTube videoOpens in a new tab, and even less on social media platforms. To maximise the effort to impact ratio, keep videos short and to the point and design them for use across a range of social media.

Following accessibility guidelines can also lead to lighter weight and hence more sustainable web pages simply by web content editors taking a more considered approach to the type and quantity of content they upload.

Banner photo credit: Osman Rana on Unsplash