About the author

Alistair McNaught has worked in staff development and digital technology for 20 years and co-authored a range of national training programs and accessibility guides for the education sector.

He contributes regularly to national and international conferences and is a founding member of the Digital Accessibility Working Group, liaising with Government Digital Service on behalf of the public sector and education.

Contributors 

Alistair is grateful to the following for support in preparing this guide: Ron Mitchell at Mitchellmedia; Lilian Soon at University of York, Zoe Hanscombe at OpenSight, accessibility engineer James Scholes; Atif Choudhury at Diversity and Ability; Sam Egerton Kemp for help with contacting members of the deaf community; Maggie McKay for help with contacting people with cognitive difficulties.

There are nearly 12 million disabled people in the UK. Since 1995, the right to “reasonable adjustments” has been enshrined in the Disability Discrimination Act and the later Equality Act.

While people are familiar with the need for physical accessibility adjustments such as ramps and lifts, much less attention has been given to digital spaces.

In 2018 the Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations was adopted into UK law. It defines a “reasonable adjustment” as meeting web accessibility standards.

Now in the final stage of thier phased introduction, the regulations require high accessibility standards on all public sector websites after 23 September 2020.

The legislation may not directly affect your organisation’s website, but as people recognise good accessibility, sites with poor accessibility will stand out. They will appear unprofessional and will reduce your organisation’s potential audience and support base.

Inclusive digital practice sends the positive message that your organisation values everyone it engages with.

This guidance will help you understand what is meant by digital accessibility and why it matters.

In a short guide, it is impossible to cover the range of tools, techniques and approaches relevant to every project’s website. Treat it as a travel guide to introduce you to different practices, ideas and even language. It will describe the highlights and give you recommendations – you must do the travelling.

The guide will explore three key principles:

Knowing:

• Who is responsible for the accessibility of your digital content?
• How do people experience your digital content in different ways?
• What does good practice look like?

Doing:

• Each section in this guide has links to further information and action.
• The guide’s Role related section helps you identify specific actions depending on your focus and skill level.

Telling:

• The final part of the guide is about telling users what does and doesn’t work well on your website. You can describe its accessibility once you have checked it for the key issues covered in the guide.
• An accessibility statement is a Plain English, user-focused guide which lets a disabled user know what they can expect from your website. It is a core document for disabled users.

There are many layers to a website, with different people contributing to each layer. Each person needs to make sure their contribution is accessible. If they don’t, the user experience can be poor, even if everybody else has done a good job.

Figure 1 shows the layers that make up the user experience.

Most websites will have a selection of these layers:

• Site design: the big picture of the website – how it works.
• Page design: the layout of individual pages – how they look and behave.
• Page content: What appears on the page – text, images, video, audio and interactive elements.
• Downloadable files: Including documents, presentations, spreadsheets etc.
• Outreach and engagement: Community-building, including through social media.

What you need to know about digital accessibility depends on the layer you work with – but everyone is responsible, together for the accessibility of digital content.

Putting inclusive design to work will enable disabled people to use your digital content effectively. It is hard to create a website where all content works for everyone – deaf people and blind people have entirely different needs, for example. Accessibility means no user is excluded rather than perfection for all.

This can be achieved by:

• Understanding the basics of digital accessibility – for example, find out from the Web Accessibility Initiative how people with disabilities use websites.
• Making accessibility part of quality control – it should be equally as important as spelling, grammar or branding.
• Using a variety of media to support people with different requirements.

The next section helps identify good practices that minimise exclusion.

Good accessibility principles benefit everybody, not just disabled people – but disabled people are disproportionately affected by inaccessible design. Some of the key principles are highlighted below.

Reading text

Text can be selected and read out

If text on a page or a resource can be selected and copied to the clipboard, it can also be read out loud by text-to-speech tools. Images of text cannot be, however. Listening to text helps people with vision difficulties, learning difficulties or neuro diversity. It also helps with multitasking.

Colours and contrasts work for all

Good contrast between foreground and background colours will suit most users working in most lighting conditions.

Avoid conveying information by colour alone – this will support people who cannot distinguish colours. For example, ensure hyperlinks are underlined as well as in a contrasting colour.

Read more information on links, colours and appearance.

Language that works for all

Use simpler words and shorter sentences. Don’t let jargon, acronyms or technical terms get in the way of understanding. Take a sample of your text and paste it into a readability calculator to check.

Tables that work for all

Blind users benefit from alternative text or a caption to summarise a table’s purpose. Their screen reader software reads from left to right and top to bottom. Use clear headers on simple tables. Don’t split or merge cells or leave empty rows/columns – this disorientates blind users.

Only use tables for data or structured information – not for page layout

Magnification without sideways scrolling

If content on a page can be zoomed to 400% and read without having to scroll sideways, it helps people with vision difficulties as well as those reading on a small screen. This is described as “text reflow” or a “responsive web page”.

Check your site by clicking CTRL and + in any browser when using Windows or CMD and + for Mac

Navigating through information

Page design allows instant navigation by headings

Utilising inbuilt heading styles (Heading 1, Heading 2 etc) in webpages and documents allows users to navigate content by heading level using:

• Inbuilt tools – Word’s Navigation pane or Adobe Reader’s Bookmark pane.
• Browser plugins – for example headingsMap on Chrome.
• Assistive technology such as screen readers.

A logical heading structure with no missed levels is key, especially for blind users – it enables them to quickly get to the section they need. Search engine specialists state that headings make your site more discoverable.

Create headings in Word (writing specialist) and headings in web page (usability specialist).

Page design allows instant navigation by hyperlinks

If each hyperlink in a page or document has a unique and descriptive text, a blind user’s screen reader can pull up a list of hyperlinks on a page and read them out. The user can then select the one they need. If the link text is “click here” or “more information,” the user can’t tell which one to use.

WebAIM accessibility specialists promote good practice with links.

Page design allows instant navigation by lists

If lists are created using the inbuilt list tools in a word processor or web editor, a blind person’s screen reader software can jump to any list in the document. This is more efficient than listening to every paragraph until the user finds the list they need.

Don’t create “lookalike lists” using asterisks and tabs/spaces – a screen reader can’t jump to these.

Page design lets users skip content they don’t need

"Skip links” let keyboard-only users – for example blind or physically disabled people – jump over repetitive content, such as menus or social media feeds. This makes your website significantly easier for them to use.

Learn more about skip navigation links from WebAIM.

Media and interactivity

Images that work for all

Describing images is beneficial for people who can’t see them and for people who can see them but struggle to interpret them. An image can be described in the nearby text or in the alternative text field of the image (alt text). When you add an image to a document/webpage, use the option in the properties dialogue box to describe the image.

Images need to be described differently depending on use or purpose. Find out how to describe different types of images from the Web Accessibility Initiative or check examples of different types of alt text from Penn State University.

Multimedia that works for all

Audio with an accompanying transcript is accessible to users who struggle to hear – or prefer to skim read.

Similarly, videos with transcripts or captions – even a text summary of the main points – enable people with hearing impairments to still access the content. People watching in noisy settings also gain.

Videos with no narrative may need audio description, unless the information is available in another format.

Interactions that work for all

If interactive elements or dynamic content can be controlled using the keyboard, people who cannot use a mouse will benefit.

If you know some of your website’s interactive elements (eg virtual reality) won’t work for some users, be open about it so people don’t lose time trying to make it work.

Don’t force interactions on people – users should be able to stop auto advancing content, such as slide carousels.

Menus that work for all

Most websites have navigation menus repeated on each page. These benefit disabled people if:

• Every menu and submenu item is accessible without using a mouse – press tab key to move and enter to select.
• Each item is visually highlighted as the user tabs to it.
• Users can skip over the menus with a “Skip to main content link” – see this guide’s Navigation section for more info.

Forms that work for all

If your web form is properly labelled for blind users, they know which information – name, address etc – to put in which field. Similarly, if they make an error, the alert needs to be accessible to their screen reader. Turning the dialogue box red is not accessible for a visually impaired user.

Creating and testing accessible forms (WebAIM) requires technical skill but there are also basic form checks to try (Web Accessibility Initiative).

Heritage sites demonstrating good practice

• The website for The University of Manchester’s Whitworth Gallery is an example of magnification without sideways scrolling – use Control + to magnify and reflow the page.
• Aisling Ghéar’s Theatre-focused website has examples of a consistent heading structure – use HeadingsMap in FireFox and headingsMap in Chrome to reveal headings.
• People’s Collection Wales’ website is a good example of image description.
• The MyRoute project website is an example of consistent audio and video transcripts.
• The Stonehouse Heritage project website has good keyboard accessibility

Share accessibility challenges and solutions with others so that problems can be worked on collaboratively. Many online communities exist and can be great for getting support. Here are a few UK focused examples to explore:

• Conservation Research – enables discussion related to the conservation of objects, works of art and buildings.
• Google Groups on heritage and related topics.
• Heritage Arts Network – aims to share information and promote critical discussion around heritage and contemporary art practice.
• Heritage Chat – #HeritageChat is a monthly, one-hour Twitter chat for the historic environment sector.
• Heritage list – a discussion list for academic and industry researchers, heritage, tourism, museums and culture.
• Heritage Workspace Home – hosts discussion forums and groups focused on helping the heritage sector.
• Heritage Yorkshire – supports people engaged in heritage research in the Yorkshire region.

Twitter can be an excellent source of support – follow the Museum Disability Collaborative Network (@museumDCN) and others and search for hashtags like #HeritageChat or #MuseumHour.

Use mailing lists and social media to ask questions, offer suggestions and build supportive networks.

Role 1: website and page design

New website

If you are developing a new website, either someone else will build it for you or you will build it yourself using an online tool, for example WordPress, Wix or Google Sites. In either case, it is cheaper, less work and more sustainable to get accessibility right at the beginning rather than to fix it afterwards.

These are the things to consider:

Third-party suppliers or volunteers

If you rely on volunteers, talk to them about which of the practices in the Good practice section they are confident they can meet. You will need this information for your accessibility statement, which is discussed in the last section of this guide.

If you are paying a supplier, specify that they must meet Web Content Accessibility Guidelines 2.1 at level AA. Find out more about their testing strategy – do they include users of assistive technologies? Check if they work with and advise people in relevant roles like content editors. Can they advise you on tackling complex problems, such as image descriptions, captions etc?

Online tools, for example WordPress or Wix

Do online research to find out which of the different themes and styles you can choose are the most accessible. Include accessibility keywords in your search terms – for example, "most accessible WordPress theme."

Either or both

Avoid common bad practices that create accessibility barriers. These include:

• Slide carousels or background videos that can’t be stopped.
• Text over video or image backgrounds.
• Social media feeds that can’t be skipped over by a keyboard user.

See the Web Accessibility Initiative’s examples of common bad practices (and fixes). Mugo Web provide technical details about creating skip links for social media feeds.

Existing website

If you already have a website, some things will be easy to improve – for example page content is under your control. Other things may be harder to change. Where this is the case you can still support users by describing your accessibility strengths and weaknesses in the accessibility statement – see final section in this guide.

Explore the Good practice section in this guide. Note what works and what needs to be improved on your website.

If your website uses Wordpress, you should be able to update to a more accessible template if needed.

Perform website checks with automated accessibility checkers. These only identify 40% - 50% of issues but are good at finding colour contrast problems, missing image descriptions and problems with links and headings.

Free checkers for the Chrome browser include WAVE tool, Microsoft’s Accessibility Insights tool and the aXe-web accessibility testing tool. Wave and aXe are also available for FireFox.

Unless you are technically skilled, some of the report may not make sense. Use what you do understand – for example poor colour contrast – to make any improvements you can – for example changing colour schemes.

Whether starting a new website or maintaining an old one, identify the accessibility practices you can and can’t achieve. Note this for your accessibility statement – see the final section in this guide.

Role 2: creating basic page content

When creating basic page content (text, images and tables), you can only influence some aspects of website accessibility, but these are still important. Summed up in the acronym SCULPT, they include:

Structuring content 

Use heading and subheading styles to identify sections. Use a tool like headingsMap plug-in for Chrome to check if the visual page headings match the heading levels in the code.

Colour and contrast

Ensure no information is conveyed only by colour. Keep colour contrasts strong.

Use of images

If an image is just for decoration, mark it by adding "" in the alt text dialogue box. If the image is important, describe the main points in the alt text dialogue box.

Links

Every hyperlink should have unique text, not “click here.”

Plain English

Check the readability of your text. If your project uses specialist terms it may be hard to get the reading level down. Instead, provide a glossary for people new to the subject.

Table structure

Keep tables simple. If necessary, have several simple tables rather than one complicated one. Don’t merge cells. Use row and column headings as needed.

More information 

All these areas are covered in the Good practice section of this guide. More detail is available on the SCULPT for Accessibility website.

Role 3: creating downloadable content

The SCULPT principles also apply to downloadable content, including documents, presentations, and spreadsheets. A well-designed webpage is more accessible than most downloadable documents, especially PDFs.

If downloads are essential, these are good practices to follow:

• If you use a recent version of Microsoft Office, look for the inbuilt accessibility checker in the Review ribbon  – this is an easy way to check accessibility.
• Make your Word documents accessible.
• If you create PDFs from Word documents, make sure they are accessible and offer both Word and PDF options for download.
• This advice from the Government Digital Service suggests when it is appropriate to use tables and how to create accessible tables.
• Practice the dos and don’ts of designing for accessibility as outlined on these posters from the Home Office.

Role 4: creating multimedia content

Videos, audio and interactive content can make websites more accessible to a wide range of people. However, they can also accidentally exclude blind users, deaf users or people who can’t use a mouse.

Minimise this risk in the following ways:

• Provide transcripts of video/audio narration. You can use a free voice recognition tool like Voice Typing (in the Google Docs tools menu) to create a script if needed. You can also use inbuilt dictation options on Macs, Windows 10, smartphones and tablets. Correct any mistakes before uploading.
• If your video is on YouTube, check to see how well YouTube’s automatic captioning has worked. You can manually edit YouTube captions for accuracy if needed.
• Let users know how to access YouTube’s automated captions.
• Videos with no narration (eg just music) need a separate text description for visually impaired users or an audio description track with the video.
• Using just the tab, spacebar, arrow keys and enter key, check any media players and interactivities (eg quizzes) work for keyboard-only users.

Role 5: social media

Social media can help build a community around your project. However, while it is easy to set up an account, it requires significant effort to make the most of it as an engagement and marketing tool.

No single social media platform is yet 100% accessible, so using more than one platform increases your chances of helping a disabled user to engage. Your practice helps too – here are some key points:

• Use Camel Case in hashtags so the screenreader reads each element individually – #SeeEly clearly refers to a location, whereas #seeely isn’t clear.
• Use alternative text on images.
• Avoid images of text (eg photos of posters) unless all the text is available in the alt text or social media post.
• If using videos, make sure subtitles are available.
• Use emojis sparingly – they can exclude and confuse, and they add extra words to screen reader output (eg “laughing face” and “smiling face”).

The RNIB guide on accessible social media or Inclusion Scotland guide to accessible social media (PDF) offer more tips. Large projects with dedicated social media staff may find the Social Media Playbook from the UK government website useful.

Role 6: webinars and online events

Online events offer advantages to many disabled people, but they can also create barriers. Minimise barriers in these ways:

• Ensure registration forms invite people to mention any additional requirements.
• Contact anyone identifying additional requirements to check how to support them. You may not have the skill, tools or budget to meet complex requirements, but discussions can help reduce barriers – for example by making a presentation available in advance.
• Be familiar with the accessibility options within the tools you use. PowerPoint and GoogleSlides have options to switch on automated captions. Some tools let users change font size in the text chat pane.
• Search for accessibility information on your webinar platform.
• Explore the Future Teacher guidance on creating accessible webinars.

If a project receives more than 50% of its funding from the government, it is likely the Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations will apply to its website. This means they must aim to meet the accessibility requirement and produce an accessibility statement conforming to a model accessibility statement template from Government Digital Service.

Even if the regulations don’t apply, accessibility is still a branding matter attracting praise or criticism.

Even with the best will in the world, it is not always possible to achieve 100% accessibility. You may rely on volunteers, or your tools may not create fully accessible content.

You might use techniques like virtual reality, adding value for some disabled people but excluding others. Different access needs can have contradictory requirements.

What matters is minimising barriers, maximising opportunities, being transparent and being responsive:

• Minimising barriers. Where possible, make sure your basic practices are accessible by following the guidance in the Good practice section of this guide.
• Maximising opportunities. Interactive elements can engage many disabled people, but you may not be able to make them equally accessible for everyone. Make sure the key information is available even if the full experience is not. For example, the interactive timeline for the Headway project has an accessible alternative for screenreaders.
• Be transparent. Make sure your accessibility statement is honest about what works, what doesn’t work and whether you can fix it.
• Be responsive. Provide contact details so users can get in touch about any access difficulties. Being responsive encourages support and enthusiasm.

The best kind of accessibility statement is written in Plain English and is user focused. It helps users gain from your accessibility benefits and anticipate barriers.

This sample accessibility statement for public sector bodies from the Government Digital Service is a useful model.

Look around the culture and heritage sectors too – examples of different but effective practice includes Shabang’s accessibility statement and the British Museum’s accessibility statement.

The most important elements of an accessibility statement include:

• Telling users how they can benefit from your good practices in digital accessibility. Many users have modest computer skills and do not realise how an accessible web page or document can help them.
• Telling users what doesn’t work and what can be done about it. For example, your downloadable PDFs may have poor accessibility, but you may be able to provide a Word version on request.
• Providing contact details so users can report difficulties, suggest improvements and, if necessary, escalate complaints.

If you are a public sector body, there will be some additional required text – see the links to the sample accessibility statement and look for the “legally required” sections.

Your organisation’s website and social media presence is a bigger solution than it is a problem for people with disabilities. Nevertheless, disabled people encounter many barriers. These can be avoided if website and content creators are aware of good practice.

By checking your practices with this guide’s Good practice section, and by following the tips in the Role related section, you should be in a good position to improve your website’s accessibility.

Creating an accessibility statement improves your users’ experience by letting them know what works, where the barriers might lie and who to contact to stay involved.

And every person you keep on board is a potential advocate for your project.

This is shared under a Creative Commons Attribution 4.0 International (CC BY 4.0) licence. Please attribute as “Digital Skills for Heritage: Accessibility Online (2020) by Alistair McNaught for The National Lottery Heritage Fund, licensed under CC BY 40.”