Cymraeg

What do I need to know about creating an accessible website?

Creating accessible websites helps you share the work of your heritage organisation with more people. This resource by Diversity & Ability helps you understand how best to embed accessibility into your website so a larger audience can connect with and support your organisation.


This resource is available in English and Welsh
Woman in a wheelchair with her laptop, waving hello to someone on a video call with her
Photo by Marcus Aurelius for Pexels

What do I need to know about creating an accessible website?

1. What do we mean by an accessible website?

Accessibility is all about recognising the barriers that we, as a society, have put in place; barriers that limit who is able to access and participate in the world.

Disabled people, d/Deaf and Hard of Hearing people, people with experiences of mental health challenges, those with chronic illnesses- all of these individuals are prevented from fully accessing society by the barriers presented to them.

While we may traditionally think about physical barriers (for example, buildings that can only be accessed by stairs, rather than ramps) there are just as many disabling barriers in the digital world.

 

2. Why is it important for your organisation to have an accessible website?

As well as it being the right thing to do, there are many benefits to creating inclusive and accessible digital websites in the heritage sector:

Ensuring compliance and committing to best practice

In the UK, all organisations have a legal responsibility not to discriminate against people on the grounds of disability or any other protected characteristic (Equality Act, 2010). Plus, public sector bodies are legally required to make your website, and any mobile apps, accessible. (Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018).

Beyond the legal requirement, the Web Content Accessibility Guidelines (WCAG) give us all a framework for making web content more accessible to disabled people. It provides internationally recognised criteria, outlining standards for every possible aspect of your online media. Demonstrating commitment to WCAG signposts to disabled people (and everyone who cares about equity and justice) that you’re invested in making the digital world more accessible and inclusive- and there’s really no excuse for failing to do so!

Boost your website’s success

Websites are rewarded for meeting the WCAG standards. The more accessible your site is, the higher up it will rank when people search related terms on their search engines.

Plus, making your communications materials accessible gives you new ways to get your content out there; for example, using alt text for images and transcripts for audio content means adding great keywords to your site. This helps improve your search engine optimisation, which means your website will show up higher in search results when people look up particular terms online.

Reaching a diverse audience

If your website isn’t accessible, you’re excluding an incredibly large and diverse audience from your offering. That could mean customers, clients, employees, and anyone else who interacts with your site. Research has shown that 71% of disabled customers will click away from a website if it’s inaccessible, and 90% won’t contact business owners whose sites are inaccessible (Freeney Williams Ltd. and Click-Away Surveys Ltd., 2016).

 

3. Getting to grips with WCAG

The Website Content Accessibility Guidelines are designed to give you everything you need to make your website accessible. For a full breakdown of every criterion, head to w3.org.

Our top tip is to take advantage of the Quick Reference Guide, which talks you through each standard, including examples of what meeting the standard- or failing to do so- would look like.

But as a brief overview, there are three different levels of WCAG conformance:

Level A

  • The easiest level!
  • All websites should aim to meet Level A as a minimum requirement.

Level AA

  • An extension on Level A criteria.
  • The most popular level for website creators to aim for.
  • Covers a wide range of aspects of accessibility.

As an example, the Natural Resources Wales highlights their partial compliance with the Level AA standard in their accessibility statement. They state the ways in which a visitor of their site can adapt viewing to make the webpage more tailored to their accessibility needs. Where they have been unable to make their content accessible they suggest workarounds and contact information if someone requires further assistance.

They consistently refer to the Web Content Accessibility Guidelines and where they have met or hope to meet these standards. Visit Natural Resources Wales’s Accessibility statement.

Website Screenshot from Natural Resources Wales's Accessibility statement.
A screenshot of Natural Resource Wales’ website stating their accessibility statement and how they meet guidelines from Natural Resources Wales’s Accessibility statement.

Level AAA

  • An extension on Level A and AA criteria.
  • A very stringent standard for accessibility; it’s not expected that websites will fulfil all Level AAA criteria.
  • As it’s the most popular standard, this guide will primarily focus on Level AA. However, be sure to explore the guidelines in full, and aim for AAA wherever it’s achievable for you!

 

4. What should an accessible website look like?

WCAG handily explores four different aspects of website accessibility, signposting the various criteria that need to be met. For a website to be considered accessible, it should be:

1) Perceivable

Can your content be accessed in multiple ways, for example not just visually?

2) Operable

Is everyone able to navigate around your website and interact with the content?

3) Understandable

Can everyone understand how to interact with your site, and the language you’re using?

4) Robust

Is your content accessible to people using assistive technology?

 

5. Meeting WCAG standards: perceivable

To begin the process of ensuring your website is perceivable, ask yourself:

  • Does any non-text content (for example, photos or icons) have a text alternative?
  • Does audio content have accurate captions (for videos) or a transcript (for audio-only media like podcasts)?
  • Is there a high contrast between the colour of the text and background?
  • Does all text have a font size of 12pt or larger?
Top tip
Use Otter.ai for free (limited) transcriptions and YouTube’s automated captioning, but make sure to correct it to ensure accuracy.

 

Top tip
Use online contrast checkers like contrastchecker.com or webaim.com/resources/contrastchecker.

 

6. Meeting WCAG standards: operable

To begin the process of ensuring your website is operable, ask yourself:

  • Have you avoided flashing or strobing content?
  • Are your web pages clearly titled and ordered, with headings and labels to separate and highlight content?
  • Are the links on your page contextualised (for example, avoid saying ‘click here’)?

 

7. Meeting WCAG standards: understandable

To begin the process of ensuring your website is understandable, ask yourself:

  • If you have buttons, or other interactive components, do you make it clear what will happen when the user interacts with them?
  • Go beyond accessibility to real inclusion
  • As well as making our websites accessible, we should also ensure they’re inclusive.

Here are two recommendations that, while not necessary for meeting WCAG AA, will help make your website more welcoming and inclusive for everyone:

1. Ensure your language is inclusive. Follow the social model of disability and ensure you talk about ‘disabled people’, rather than ‘people with disabilities’.

2. Ensure your language is accessible. Write simply and clearly, with content that could be accessed by the average 13 year old.

Top tip
Readability is often analysed by the Flesch-Kincaid test. Use tools like Hemingway App or Microsoft Word’s built-in document stats to analyse your writing.

 

8. Meeting WCAG standards: robust

This section of WCAG is mostly about the code that sits at the back-end of your website.

If you’re using a website builder (for example, your website is hosted by WordPress, Squarespace or another similar platform), a lot of the accessibility requirements will already be built into your website.

But here are the questions you should still be asking yourself:

  • Are you paying attention to the website building options and ensuring you’re using them correctly (for example, using headings in the correct order)?
  • If you are doing any website coding or building, are you ensuring you’re correctly tagging and attributing your content?
  • If you are creating user interface components (interactive aspects like forms, links and buttons), are you clearly signposting and contextualising them in your code?
  • Are you using alt text for any non-text elements of your website?

 

9. What is alt text?

Alt text tells people what’s in an image. It’s important for people using screen readers, for example people who are blind or partially sighted.

If you haven’t written alt text before, it can be hard to know where to start, so here are a few tips:

  • Share the basic, essential information about the image
  • Write in full sentences (rather than just listing key words)
  • Aim for around 125 characters or fewer
  • Remember that if an image fails to load, the alt text will show up instead
  • Use the formula object-action-context to start with the most crucial information in the image

Here’s an example from National Trust’s site:

The front of Berrington Hall with a hoard of daffodils overlooking it.
A screenshot of Berrington Hall’s colourful website. The image displayed shows their location, a large brown building with options to explore the website more. Alt text for this image: The front of Berrington Hall with a hoard of daffodils overlooking it.

 

10. Accessibility statements

Having an accessibility statement means signposting that you:

  • Are committed to access and inclusion
  • Have accessible practices in place on your website
  • Acknowledge areas that may need improving or upgrading on your website are adhering to legislation that requires public sector bodies to display an accessibility statement

Top tips for creating an accessibility statement:

  • Publish your accessibility statement as soon as possible. It’s better to make it public, but add an acknowledgement that you’re in the process of auditing and upgrading your web’s accessibility, than to put off uploading it until your website meets all the standards.
  • Use a template. Gov.uk has a sample accessibility statement, and W3.org also has a guide to creating one.
  • Learn from your peers. Lots of heritage organisations have accessibility statements on their websites. For example, Visit Churches, Friends of the SD&R and Historic Royal Palaces.
  • This is an accessibility statement for your website, which is different to information about the accessibility of your physical spaces (but just as important!)
  • Your accessibility statement should be accessible from your website home page, sitting at the bottom, next to your privacy policy, site map, and other essential website elements.

 

11. Helpful tools and resources

The only robust way to ensure your website is accessible is through human testing. However, there are some tools and resources that can help you take the first steps towards building an accessible website. We’ve shared a few in the top tips throughout this guide, but in addition, you may want to explore:

Lighthouse

Google Lighthouse is an open source tool for web developers. If you use Google Chrome, right-click on any web page, select ‘Inspect’, and then go to the ‘Lighthouse’ tab, you’ll be able to explore the accessibility of the page.

For those who aren’t full-time web developers, it can be difficult to understand what to do to fix the errors that Lighthouse highlights. But it can be useful in giving you an overview of the different areas you need to work on!

Download the tool.

 

WAVE

WAVE Evaluation Tool is a free Google Chrome extension that you can download and use on a web page. It will investigate the page and show any errors, warnings and action points in real-time.

It’s a great entry-level exploration of how you’re getting on in meeting the accessibility guidelines and criteria

Download the extension.

 

Free, open source, and trial assistive technology

If you don’t use assistive technology, it can be very useful to explore different assistive technology tools and software yourself to get first- hand experience of what it’s like to navigate your site using assistive technology. Plus, you may discover new types of technology that can enhance your work!

Check out D&A’s free resources and guides.

 

12. What’s next?

Once you’ve explored the free tools above, you’ll get a better sense of how much more you need to do to make your website accessible. Lots of organisations provide Website and Communications Accessibility Audits, ensuring your website and its content are accessible, inclusive, and enabling.

To understand more about digital accessibility, why it’s important, and what it really means, Diversity and Ability’s video on ensuring digital accessibility for all brought experts together to discuss best practice and beyond.

If you have any additional questions about digital accessibility, diversity and ability, or inclusive communications, feel free to get in touch with Diversity and Ability by emailing workplace@diversityandability.com.

Diversity and Ability staff team
Diversity and Ability’s team

Download guide

Download: What do I need to know about creating an accessible website – Diversity and Ability [pdf 4mb]



More help here


Woman in wheelchair browsing smartphone in cafe and making notes

How do I ensure that the digital content I create is accessible?

Creating accessible digital content helps you share the work of your heritage organisation with more people. This resource by Diversity & Ability look at both the ethical and legal requirements of ensuring your digital content is accessible. It provides a step-by-step guide from alt text to accessible hashtags and everything in between.

 
A man talking to his colleagues while showing something on a laptop

How can I support diversity and inclusion through my online content? A step-by-step guide to inclusivity

Ensuring your content reflects the diverse and inclusive aims of your heritage organisation is important. This resource provides a step-by-step guide to creating diverse and inclusive content across your digital platforms, including your website. It also explores the difference between diversity and inclusion and how best to address these issues through your digital content.

 
A man in a white suit with hands raised out suspended high in the air from a wire

Accessible Marketing Guide

A comprehensive guide to making your marketing activity and communications accessible to the widest number of people. This version was updated in 2020 by Grace McDonagh, Marketing Officer, Artsadmin in partnership with AMAculturehive, with support from the UnlimitedArtsadmin and Shape Arts teams. The guide is also available as a PDF, large print, audio and Easy Read formats.

 

Browse related resources by smart tags:



Access Accessibility Digital content Website accessibility
Published: 2022


Creative Commons Licence Except where noted and excluding company and organisation logos this work is shared under a Creative Commons Attribution 4.0 (CC BY 4.0) Licence

Please attribute as: "What do I need to know about creating an accessible website? (2022) by Diversity & Ability supported by The National Lottery Heritage Fund, licensed under CC BY 4.0




 
 


More help here



Digital Heritage Hub is managed by Arts Marketing Association (AMA) in partnership with The Heritage Digital Consortium and The University of Leeds. It has received Department for Digital, Culture, Media and Sport (DCMS) and National Lottery funding, distributed by The Heritage Fund as part of their Digital Skills for Heritage initiative. Digital Heritage Hub is free and answers small to medium sized heritage organisations most pressing and frequently asked digital questions.

Arts Marketing Association
Heritage Digital
University of Leeds logo
The Heritage Fund logo