HTML version of our quick guide to web accessibility, helping you meet the Accessible Information Standard including practical advice, case studies and a glossary.

1. Introduction – Make digital health accessible to all

PIF’s Health and Digital Literacy Survey report, published in October 2020, made 10 recommendations to help overcome the health and digital literacy challenges faced by the UK population.

A central recommendation was to ensure health websites meet WCAG 2.1 global accessibility guidelines from the World Accessibility Initiative (WAI).
 

In summary this means organisations producing health information should:

  • Ensure every element of the website is easy to find.
  • Ensure the website is fully operable.
  • Ensure the content of the website is easy to understand.
  • Ensure the website is robust – can be accessed from different devices and browsers.
  • Ensure digital content is accessible to all your audiences – including people with low digital skills, dyslexia, visual impairments, and those who speak English as a second language.
  • Learn best practice from other organisations across various industries.
     

For public sector bodies meeting the Accessible Information Standard is a requirement, for all others it is good practice. Accessibility is also built into PIF’s criteria for the PIF TICK quality mark for trusted health information.
 

The rapid switch to digital health information during the pandemic has made the need to improve the accessibility of websites more pressing. PIF members asked for a simple guide to accessibility at the Health Information Challenges and Solutions Workshop held in March 2021.
 

PIF’s long standing partner, Texthelp, is an accessibility specialist. The team helped us produce this guide, which has been reviewed by our Advisory Group.
 

Most of the advice is drawn from the World Accessibility Initiative (WAI). Their website is full of helpful advice and guidance if you want more detail. This quick guide covers the WCAG 2.1 guidelines.
 

As with all things digital, development is rapid. WCAG 3 is on the way. It will include new guidance for people with cognitive impairments, a new rating system and will cover a wider range of digital tools. PIF will keep members up to date with new developments.
 

We have also included some brief case studies which demonstrate how making accessibility improvements can have huge benefits for all users and improve Google rankings.

 

 

2. World Content Accessibility Guidelines WCAG 2.1 and UK legislation

World Content Accessibility Guidelines WCAG 2.1 from the World Accessibility Initiative (WAI) were developed in cooperation with individuals and organisations around the world. They provide a single shared standard for web content accessibility that meets the needs of individuals, organisations and governments.
 

The WAI website explains how to make web content more accessible to people with disabilities.  This includes advice on text, images, sounds and the code that defines the structure of the website and its presentation.
 

Websites can achieve one of three levels of accessibility – A, Double A, or Triple A – based on the criteria outlined within WCAG 2.1.  It all sounds very technical, but the guidelines are really easy to understand and often easy to implement.
 

Countries and states all over the world have developed their own web accessibility legislation and regulations based on the guidelines provided by WCAG. So, this really is a good place to start.

  

Legislation in the UK includes:

 

 

3. What you can do to meet WCAG 2.1

WCAG 2.1 uses the POUR structure, which outlines what it means for a website to be perceivable, operable, understandable and robust. In other words, accessible.
 

Based on POUR, we have suggested some actions to improve accessibility and shown where digital inclusion software can help meet some of the requirements.
 

Ensure every element of your website is discoverable (perceivable)

Every element of every website should be discoverable.  This means that content should switch between formats i.e. images to text, text to audio, so people with visual impairments, hearing limitations, and cognitive disorders can use it too.

Your ActionDigital Inclusion Solution
Use metadata to provide text alternatives to images.Alt. text behind images to provide oral descriptions to the visually impaired.
Minimise visual overload.Remove distracting content allowing users to focus on what’s important.
Ensure downloadable content is accessible too.Convert text to an alternative format such as audio for offline listening.

 

Ensure your website is fully operable

Web users with limited movement or tremors may use adaptive devices instead of a keyboard and mouse to access web content. Options for visual display can help other groups of users.

Your ActionDigital Inclusion Solution
Optimise web code to ensure that all functionality is available from a keyboard or alternative devices.Fully keyboard accessible (if someone is using a keyboard only and unable to use a mouse or a touchpad).
Help users navigate and find content.Dual colour highlighting shows users where they are on the page.  Screen masking tools with a ruler can help users to focus on one area of the screen at a time.
Do not use content that could cause seizures.A screen mask can be applied to ‘dim’ the screen and web page simplifiers can remove distracting content.

 

Ensure the content on your website is understandable

Content that someone can access is not necessarily accessible. The language used should be easy to read and understand. Some users may need additional tools to be able to ‘read’ text including screen readers and translation.

Your ActionDigital Inclusion Solution
Give users enough time to read and use content.Audio speed and voice options can allow users to customise to suit their needs and preferences.
Ensure text is readable.Magnifying tools can increase the size of text.
Use language that can be understood
by all.		Translation tools can convert text into other languages.
Be clear so visitors understand what actions to take on the site.Read aloud hidden text descriptors, or alternative text, behind images and videos. And, identify hyperlinks by reading them aloud too.
Help users to avoid and correct mistakes.Audio features read text out loud, including information typed into forms, so that visitors can identify and correct spelling mistakes.


Ensure your website is robust – can be accessed from different devices and browsers

Each individual accesses the web using technology which suits their needs and preferences. This includes different devices and browsers.

Your ActionDigital Inclusion Solution
Optimise your website for use with assistive technologies.Digital inclusion solutions such as screen readers work most effectively on websites optimised for accessibility.
Maximise compatibility with current and future user tools.Some digital inclusion solutions are regularly updated to continue to work across all common browsers and platforms.

 

 

4. Make your digital content easy to read and health literate

Ensure your digital content is accessible to all your audiences. This includes people with low digital skills, dyslexia, visual impairments and those who speak English as a second language.
 

There are a number of really important areas that content writers should consider when writing for the web:

 

Use clear and simple language

The average reading age is quite low. The Office of National Statistics recommends a reading age of nine for web content. Remember we are bombarded with messages all day long.  The clearer your message, the more likely it will be remembered. 

Try to avoid technical terms or jargon – this is not always possible so provide a simple explanation to help tailor the content to your audience.

When using acronyms, remember to write them out in full the first time you use them.
 

Structure your content well

The structure of your content can also enhance its readability. Use short paragraphs, active voice, sub headings and bullet points. Avoid long complicated sentences.

It’s more inviting and easier to read well-structured content than a blanket wall of text.
 

Use real headings

Web content design templates define the hierarchy of your headings.  So, for example, H1 is the most important heading, followed by H2 and H3. Structuring your headings this way makes your content much more accessible to people relying on screen readers, for example, to navigate between sections on your site.

 

Page titles: make them meaningful and unique

Page titles should provide the most relevant information about the page so be concise and unique.
 

Links: make sure they are informative

Links should be descriptive – the user should know what they will find if they click on the link. People relying on screen readers to navigate your site may decide to read all the links on your
page first, to get a feel for the content. If your links all say, ‘click here’ or ‘read more’, that is not really helpful. 
 

Images: add alt. text

It’s good practice to add alternative text to your images to describe the images to people who may not be able to see them. It’s also really good for search engine optimisation (SEO). Some content management systems won’t publish your content if your alt. text is missing.
 

Video: provide transcriptions or captions

Transcriptions and captions present the spoken content as written text. Providing the written text for the audio is so important for people who:

  • Cannot hear well or at all
  • Speak English as a second language
  • Want to grasp the content more quickly and efficiently
  • Need to hear the content over distracting sounds wherever they are listening.
     

Make downloadable documents accessible

PDFs are inaccessible to screen readers so if you are adding any documents to your site for your visitors to download, make sure they’re in an accessible format too.

All content on the public-facing website is written so that eight year olds can understand it.

5. Case studies

NHS.uk

The NHS Digital team took steps to simplify the content across all sections and invested time in reducing distractions and confusing features.  As part of the project, PDFs were reduced from 12,000 to a few hundred, which is a huge achievement.

Reducing PDF content led to much improved SEO for the NHS sites. Google ranking and search engine traffic was better.

Improving technical aspects of the website was not enough and although the new site templates achieved triple A rating, when the team uploaded content they found that it dropped. The content was not accessible.

Now, all content on the public-facing website is written so that eight year olds can understand it. Content on the professional-facing website is written for 12 year olds. Even experts prefer reading information in simpler terms. Jargon has been reduced, redundant text removed and reading age is considered for all new pages
and posts.

 

Tesco – co-production brings return on investment

Tesco involved 20 users with visual impairments when it designed its new shopping website. When the beta version was ready, it recruited another 70 people to test and give feedback on their experience.

This helped improve issues with colour contrast. People who have low vision or colour blindness could find it difficult to read text from a background colour if it has low contrast.

The feedback from users led to Tesco stripping out a lot of unneeded images from the new website. They improved the descriptions on all their images via alt text.  They also revamped the main site’s layout, introducing a much more intuitive navigation journey and menu bar.

Tesco’s digital team worked towards the principle that a user should be able to make a purchase of 30 items within 15 minutes.

The accessible site performed better on mobile devices and on low speed connections. Again, making the experience better for all.

The resulting improvements led to an increase of £13 million pounds per year in sales.

 

Legal & General – accessibility audit and usability testing of existing sites

Legal & General conducted customer research on its website, asking for information on any pain points or blockers.

The digital team focused mainly on the accessibility needs of their target audience including those with low digital literacy, visual impairments, non-native speakers and their older customers. They ran extensive user testing with these groups.

Overall customer feedback on the site was positive and complaints about accessibility issues fell to zero.  Within weeks, natural search engine traffic increased by 50%. Legal & General enjoyed a significant improvement in Google rankings for all target keywords and search terms.

The site was faster and page load time was reduced by 75%. It also performed better on mobile devices.

Because the platform was more simple, streamlined and usable, there was a reduction in maintenance costs and an increase in customers receiving quotations.

 

Verizon Media – accessibility labs

The company behind Yahoo!, AOL and HuffPost has built accessibility labs with three purposes.

Educate: All staff are trained in accessibility, its importance and how to integrate it into work.

Experience: Staff with a development or design focus use the same types of assistive technologies as those with disabilities when designing websites and apps.

Testing: Involving users with disabilities to provide feedback on all apps and websites.

 

The main accessibility features include:

Keyboard Support: If someone is using a keyboard only (and unable to use a mouse or a touchpad) they can navigate Verizon’s websites and apps just as easily using their keyboard.

High Contrast: Background ratio is 4.5:1 for people with colour-blindness, dyslexia and other visual impairments.

Dynamic Text Resizing: If a user wants to zoom in on any Verizon website or app, they can do that without the content being distorted.

Video Captions: All of Verizon Media’s original video content have captions.

Labels and descriptions for screen reader users: For screen readers, developers accurately describe items and pictures on a page during the development process.

 

 

6. Glossary of terms

Accessible Information Standard
A law aiming to make sure people with a disability or sensory loss are given information they can understand.
 

Alt. (alternative) text
Describes the appearance and function of an image on a page. Also known as alt. descriptions, alt. attributes and alt. tags.
 

Beta version
A website which is on limited release with the goal of finding errors and issues before the final release.
 

Google rankings
Systems used by Google to sort through billions of web pages to find the most useful and relevant results.
 

Headings
HTML headings start at level 1 and end at level 6. Well designed websites will use these headings to form an outline of content. Heading 1 is the most important.
 

HTML
HyperText Markup Language is the language used to create web pages.
 

Hyperlinks
A link which someone can click on to take them to more information.
 

Metadata
Data providing information about other data. For example, text descriptions of images.


Navigation journey
The path a user may take to reach their goal on a website/

 

POUR structure
A website is perceivable, operable, understandable and robust.

 

Search Engine Optimisation (SEO)
The practice of improving both the quality and quantity of website traffic through non-paid (organic) search results.

 

Web Accessibility Initiative (WAI)
A global organisation developing standards and support materials to help you understand and implement accessibility.

 

 

7. Useful websites

Ability Net
abilitynet.org.uk
 

British Dyslexia Association
www.bdadyslexia.org.uk
 

NHSEngland – Accessible Info
www.england.nhs.uk/ourwork/accessibleinfo
 

NHS England – Digital Service Manual on Accessibility
service-manual.nhs.uk/accessibility
 

Plain English Campaign
www.plainenglish.co.uk
 

Royal National Institute for Deaf People – Supportive technology and products
rnid.org.uk/information-and-support/technology-and-products
 

Royal National Institute for the Blind – Technology and useful products
www.rnib.org.uk/advice/technology-useful-products
 

Sense – Accessible Information Standard
www.sense.org.uk/get-support/information-and-advice/accessible-information-standard
 

Accessible Information Standard Explained – animation
www.youtube.com/watch?v=ZJngMo37WvA
 

Texthelp – Web accessibility
www.texthelp.com/resources/web-accessibility
 

Thomas Pocklington Trust – Technology and Accessibility
www.pocklington-trust.org.uk/technology
www.pocklington-trust.org.uk/accessibility
 

World Accessibility Initiative
www.w3.org/WAI

 

 

8. Thanks and About Texthelp

PIF would like to thank Texthelp for their support in producing this guide and to PIF Advisory Group members for reviewing content, particuarly Joanna Dundon for her helpful comments.

 

About Texthelp

Founded in 1996, the Texthelp Group is a global technology company helping people all over the world to understand and to be understood.  It has led the way in creating innovative technology for the education and the workplace sectors for the last three decades.

Texthelp believes in a world where difference, disability or language are no longer barriers. It is focused on helping all people learn, understand and communicate through the use of digital education and accessibility tools.

With over 40 million users worldwide, the Texthelp suite of products include Read&Write, EquatiO®, WriQ®, Fluency Tutor®, ReachDeck® and Speechstream® which work alongside existing platforms such as Microsoft Office and G-suite, enabling them to be integrated quickly into any classroom or workplace with ease. 

 

Web: texthelp.com

LinkedIn:  linkedin.com/company/texthelp

Twitter:  twitter.com/texthelp