How to make your website WCAG compliant

In today’s digital world, inclusivity and accessibility are crucial components of web design and development. Ensuring that your website is accessible to everyone, including individuals with disabilities, is not only the right thing to do but also a legal requirement in many places. Making a website accessible helps improve user experience as well as boost search engine optimisation (SEO) and organic search rankings.

The Web Content Accessibility Guidelines (WCAG) are standards designed to make web content accessible to more people with disabilities. In this guide, we’ll walk you through the steps to make your website WCAG-compliant and create a more inclusive online experience for all users.

What are the WCAG guidelines?

The Web Content Accessibility Guidelines (WCAG) are developed and maintained by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C). These guidelines are organised into four principles, each representing a critical aspect of accessibility:

1. Perceivable: 

This ensures that all users can perceive the information presented on your website, regardless of their sensory abilities. This includes providing alternatives for non-text content like images and videos. 

2. Operable: 

Make sure users can easily navigate your site with a range of abilities. This includes features like keyboard navigation and sufficient time for users to read and interact with content. 

3. Understandable: 

Create content that is clear and easy to comprehend. This helps users understand the structure, purpose and functionality of your website. 

4. Robust: 

Build your website to be compatible with various current and future technologies, ensuring it remains accessible over time. 

How Accessibility can improve Discoverability: 

By improving accessibility, you are improving user experience and, in turn, boosting SEO. Better accessibility also improves searchability as it helps the algorithms understand the content better. 

A study carried out by AccessibilityChecker.org concluded that improving the accessibility of a website enhances SEO. The study looked at 847 sites that use accessibility remediation solutions, using BuiltWith to determine when these services were installed. Semrush was then used to look at each site’s traffic at two points, three months before and three months after the accessibility solution was integrated.

The results of the study demonstrated that the majority of the 847 sites sampled saw an increase in organic traffic after installing the accessibility tools. It found 73.4% of the sites had traffic growth in the three months after, with 66.1% of sites seeing an increase in monthly organic traffic between 1% and 50% and 7.3% of sites having an increase of more than 50%.

Out of all the different accessibility solutions used across the sites, EqualWeb came out on top for generating the highest increase in traffic, on average achieving a 116% change. This was closely followed by both UserWay and accessiBe. 

Steps to Achieve WCAG Compliance:

Conduct an accessibility audit: 

Evaluate your website’s current accessibility status. This can involve using automated testing tools, conducting manual checks, or involving individuals with disabilities in usability testing. Once your site has been reviewed, it will allow you to identify areas of non-compliance and prioritise them for improvement. 

Implement Proper Heading Structure: 

Use HTML heading tags (h1,h2,h3 etc.) correctly to create a logical and hierarchical structure for your content. Proper headings help screen readers and other assistive technologies understand the content’s organisation and allow screen-reader users to skim read the page without the screen-reader skipping sections.  

Provide Alternative (Alt) Text for Images:

Every image on your website should have descriptive alt text that conveys the image’s purpose and content; this is crucial for users who rely on screen readers to understand visual content. Aim to keep alt text to less than 100 words, and ensure you don’t keyword stuff, as this can have a negative impact on SEO. 

Ensure Keyboard Accessibility: 

Test and ensure that all interactive elements, like links, buttons and forms, can be easily accessed and operated using the keyboard to allow access for users who cannot use a mouse. 

Offer Captions and Transcripts:

It’s important to provide captions and transcripts for any video or audio files; this allows users with hearing impairments to access the information. 

Make Links Easy to Identify: 

Ensure that links on your site are for everyone; sometimes, just a colour difference isn’t enough. Adding bold text or underlining can help with clarity and user experience.

Don’t Assume Able People in Your Text: 

When writing copy for your site, it’s important not to assume you are talking to just able people. For example, instead of writing, ‘you will see…’ change it to, ‘you will find…’. 

Choose Colours Carefully: 

Ensure your website’s colour choices provide sufficient contrast between the text and background to make content readable for sight-impaired readers. The minimum contrast between the text and the background should be a ratio of 4.5:1; you can use online tools, such as WebAim colour contrast checker, to check this. 

Choose an Easy to Read Font: 

Choose more sans serif than serif fonts, as these tend to be clearer and easier to read. Don’t use a font size less than 16px for the main text and 14px for the footer, as this could make important text challenging to read. 

Clear and Consistent Navigation: 

Users should be able to easily find and access different sections of your site through consistent and functional navigation. 

Optimise Form Fields: 

Make sure form fields are well-labelled and have clear instructions. Use appropriate input types and error messages to guide users through the form completion process. Setting a completion message/page to remain until the user leaves the page is also a great way to improve user experience so users can be sure their form was completed correctly. 

Ensure a Responsive Design:

Your website should be responsive and work well on various devices and screen sizes. This helps users with different devices and assistive technologies access your content seamlessly. 

Once you have audited your site using online crawlers or manually with assistive technology, it can be a good idea to add an accessibility statement to your site. An accessibility statement shows what guidelines or regulations your website complies with. To make one, you can use tools such as the w3.org generator, simply input your information, download it as a html page and add it as a custom embed widget.  

Creating a WCAG-compliant website is about building a digital space that welcomes everyone and creates a more inclusive environment. We hope you found this blog helpful in making the changes necessary for your site. If you need any help adjusting and improving your website, get in touch.