Insights

How to Ensure Your Website Meets WCAG Guidelines

May 14, 2024

Written by:

Bryony Hall, Lead UX Developer

The Web Content Accessibility Guidelines (WCAG) are a set of recommendations for how to make your website more accessible to users with disabilities. The WCAG guidelines come in three tiers; A, AA and AAA. With A being the lowest tier and AAA being the highest. The most common tier aimed for achieving is the AA standard.

Complying to digital accessibility guidelines are an important consideration for a website. We recommended improving accessibility as features that are built or implemented to improve accessibility have the potential to improve the use of the website for all users. Think of how many times you struggle to see the contrast on a site in bright light, or want to use captions on a video and they aren’t available. Both concerns that are addressed when it comes to digital accessibility.

Image Alt Text

Most content management systems (CMS) like WordPress will give you the ability to add alt text to images via the admin panel and then output it when the images are pulled through onto the site. Adding in alt text thus is an easy step in making your website more accessible by providing an alternative way of understanding the content of images in a non-visual way. This change can also be made by anyone with admin access in most cases and will not require any developer input.

Understandable Content

Ensuring your content is understandable and readable is an important part of the WCAG guidelines. This includes providing a glossary of terms for more complex terminology and expanding all abbreviations in full on their first use. This again is a change easily made by anyone with admin access to a website with a CMS and should not require developer involvement.

Add-On Toolbars and Plugins

These solutions increase the accessibility of your site through a toolbar or icon which sits on top of the website and can be triggered by clicking to activate its options. These tend to be paid for on yearly licence and enable more accessible features to be overlaid onto the website, rather than improving the default accessibility of the website through the code or standard design.

Some examples of accessibility toolbars/plugins include:

Although a simple solution to improve accessibility in an easy manner, these options are often considered as less-optimal than improving the actual functionality of your website through code and design changes. As it does not make a website more accessible by default to all users and requires specific activation in order to use.

Website Accessibility Audits

A website accessibility audit is the best way to ascertain how your website currently performs in terms of accessibility. There are a number of ways in which you can get an accessibility audit:

Browser Extensions and Tools

There are a number of ways to run an accessibility audit yourself via your browser. Chrome’s lighthouse tool gives you some basic accessibility insights, however for more detailed information you could look to install a browser extension such as IBM Equal Access Accessibility Checker or use Chrome’s rendering tool to see what your website looks like with a visual impairment.

Dedicated Websites

Numerous websites offer accessibility audits such as the Accessibility Checker or Monsido which offers a simpler way to check your website than needing to install a dedicated browser plugin. These vary and are either paid or a free service and will normally give you a report of areas where your website can be improved.

Uplift

If you are interested in improving your website accessibility, get in touch with us and we will look to assess and action any accessibility amends possible on your website. These will often be made in discussion with yourself as a number may affect the look and feel of your website in order to meet the criteria.

Visual Changes

A number of WCAG guidelines can only be met by being agreeable to making visual changes to your site. These include:

  • Use of colour; the use of colours on your website and how colours are used together impacts colour contrast. By being flexible in how colours are used together or being willing to swap colours out for another can make a more accessible website.
  • Click targets; a click target is the area around which a link is clickable. Meeting minimum click target sizes can mean increasing the visual size of an element or increasing the space around it. This means that an element may need to visually change slightly in order to achieve the desired target size.
  • Line length; The length of a line of text should be limited where possible to not exceed the 80 characters. This change can be made by tweaking the design of large content sections in order to make them easier to read.

These and a number of other visual changes can be amended to improve the accessibility of your site when consulted with a designer in order to achieve better accessibility in a way that still fits with your website brand.

Prioritise Accessibility

Ultimately the best way to ensure your website meets WCAG accessibility standards is to prioritise it. Whether this is in your workflow for your current website, or raising it as a requirement when scoping a new website and starting to address it at design stage. Raising it as a discussion point will get the ball rolling.

Remember any changes you make to enhance the accessibility of your site has the ability to benefit all users.

Further Reading

News and insights.