Where to start with web accessibility

Web accessibility is an often overlooked element of web development that charities need to address. Around 1.3 billion people around the world experience significant disability, according to the World Health Organisation, representing one in six of the world’s population, many of whom are our beneficiaries, donors, volunteers, employees, leaders, and supporters.

Making our websites accessible is an important step towards becoming an inclusive organisation and ensuring that the charity sector is able to meet the needs of all the communities it serves.

Understanding web accessibility can be difficult, and in a sector that is continuously balancing limited resources with rising demand, getting to grips with web accessibility can seem like a big ask. It’s important to understand that, in 2023, it is no longer an ask but a requirement.

Where to start with web accessibility

Web accessibility can be complex. But at its most basic, there are some quick practices that charities can adopt to improve their site experience for people with disabilities.

Below, we explore four of the key ways that charities can make their websites more accessible, from making text more visible to using headings correctly for those using screen readers.
 

Colour contrast

Making sure your text is contrasted well enough against the background colours of your website is an important element of web accessibility and ensures that viewers who cannot see the full color spectrum are able to read your content.

The Web Content Accessibility Guidelines (WCAG)—standards which have been set in order to improve web accessibility universally—advocate three core rules when it comes to colour contrast:

Get the ratio right: the ideal colour contrast ratio is 7:1 for normal text and 4.5:1 for large text

Think about links: colour should not be the only indicator of an interactive element on your web page, such as a link

Avoid red and green combinations: red/green colour blindness is the most common, so avoid combining the two colours, particularly when it comes to sharing advice like “Dos and Don’ts” which typically follow the green/red colour scheme

There are lots of helpful (and free) colour contrast assessments available online, which can test whether there is enough contrast between your text and your website background. You can also find acceptable colour contrast palettes here.
 

Missing alt text on images

Alt text is possibly the most commonly known element of web accessibility and refers to the practice of adding text to images that describes what they depict for people with visible impairments.

Alt text can be added in a number of ways. Many content management systems (CMS) will have the ability to add alt text when uploading an image to your content. Your alt text should directly describe the contents of the image, so it reads something like “A laptop on a blue background with flowers surrounding it”.

According to HubSpot, image alt text can also be added easily in the HTML of your site, by placing the alt attribute inside the tag. It should look like this: in this helpful guide.
 

Missing or ambiguous link text

Links that do not involve text, such as buttons, logos, icons, or other images, can trip up screen readers that are used by website visitors with visual impairments. This could include the logo at the top of your website that links to your home page, or a social media icon that allows people to share your posts on relevant platforms.

The problem lies in that screen readers cannot read that the images are links. The solution, once again, is alt text.

Whereas alt text for non-linked images are used to describe the content images, alt text for linked images should describe the link action or where it is linked to. So, it should read, “alt= “Home page””, as opposed to “alt= “Logo”” so that visitors using screen readers know that this image can take them somewhere on your site.

Web accessibility designers provide a good guide to what alt text should look like in HTML, including what code looks like without alt text and what it should look like when added.

Charities should also watch out for ambiguous link text such as “Click here” or “Find out more”. Website visitors using screen readers will be presented with this text without context, not knowing where the “Click here” link will go to.

Equalize Digital advises that organisations “think of a call to action that will motivate the user to visit the link and make sure that the anchor text will make sense to a user out of context.”

So instead of “Click here”, you could write “Check out our latest cyber security podcast” or instead of “Download”, it could be “Download our guide to building a charity website”. When in doubt, be specific.

Heading structure

Heading structure is important to help website visitors know what your web page content is about and what information it includes. Headings should work like the index of a book and allow people using screen readers to jump from heading to heading in order to scan the web page for the content they want.

The A11y Project, which is a community-driven effort to make digital accessibility easier, offers some best practice advice when it comes to using headings appropriately. It advises using a hierarchical structure with your headings, ranking them from important to the least important.

So only the main title on each page should use Heading 1 (H1), while your main subheadings should be Heading 2 (H2), and each subsequent subheading within that section becomes Heading 3, 4, 5, and 6.

So your headings structure should look something like this:

• Heading 1[Title]
  • Heading 2 [Title of section]
    §  Heading 3 [Subheading]
    §  Heading 3
  • Heading 2 [Title of next section]
    §  Heading 3 [Subheading]
    §  Heading 3
    • Heading 4 [Sub-subheading]

You can find more information about heading structure from The A11y Project here.
 

Do your research on web accessibility

There are many more elements involved in making your website accessible and many online assessment tools that can help you discover those you need to address.

Charities can also find guidance on web accessibility from other specialist charities, such as disability charity Scope, which provides training and guidance on everything from making your emails accessible to different types of assistive technology that may help people access your website.

Wherever you are on your web accessibility journey, it is also worth going straight to the source and checking out the Web Content Accessibility Guidelines (WCAG).

The WCAG have been developed by the World Wide Web Consortium (W3C) with the goal of “providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.”

The guidelines explain how to make web content—the information on a web page or app, such as text, images, sounds, and structure—more accessible to people with disabilities.

The WCAG are updated regularly and are very thorough. , The guidelines are based on four key design principles:

• Perceivable
• Operable
• Understandable
• Robust

These principles are primarily concerned with how people interact with content, for example whether they use a screen reader to read content aloud.

There are also three different levels of compliance when it comes to the WCAG 2.0, from A (lowest) to AA (mid-range), and, finally, AAA (highest). To comply with the AAA standards, organisations also comply with  A and AA.  Charities should focus on conforming to Level AA of the guidelines, since the WCAG point out that it is not possible to satisfy all Level AAA criteria for some content. Level AA is therefore a more general and achievable benchmark.  

You can find out more about the Web Content Accessibility Guidelines by reading our brief (but thorough) overview here.