October 4, 2023

What are the Web Accessibility Guidelines? An introduction to the WCAG

If you’ve been hearing about web accessibility, and you’ve been wondering:

A) What it is 

B) What it means for you, and your business 

C) Where the hell do you start

Then you’re not alone. In this article, we’ll address point A.

Let’s dive into it. 

What is Web Accessibility?

In a nutshell, web accessibility is what we all have to consider when it comes to our websites, and how accessible they are to people with disabilities. As not everyone can navigate the web with ease, it’s down to designers, developers (and business owners) to ensure that they follow the relevant guidelines. 

In steps the WCAG (Web Content Accessibility Guidelines). 

The WCAG provides a framework for creating inclusive online experiences, so that people with disabilities including visual impairments, motor difficulties, and cognitive issues can still navigate and understand the web with as easily as possible. 

Web Content Accessibility Guidelines

To give you a brief overview of guidelines, there’s a handy(ish) acronym to follow: POUR

P - Perceivable

Can information on a website be understood by users, no matter which sense the rely on? Guidelines here discuss image alt text, captions, and more

O - Operable 

Can users with physical disabilities like cerebral palsy, spinal disorders, blindness or even severe arthritis use the site? 

U - Understandable

Is the website easy to understand? I.e. is it easy to read, are navigation and input elements where the user expects?

R - Robust

Does the site work across different devices and browsers? Can it be understood and read by assistive technologies? 

Within each of these points, there’s different criteria to follow. 

How to get an Accessible Website 

There are two* levels when it comes to being compliant with the WCAG criteria. 

*Okay, there’s actually 3, but Level 1 means you’re not compliant, so we’ll ignore that one. 

Level AA - the minimum standard for every website

Level AAA - the highest level of web accessibility

In order to achieve these levels, you have to comply with the Accessibility Guidelines. If you’re a business owner, it’s important that you work with a designer or developer who adheres to these. 

So, what are the WCAG Guidelines?

Here we go:

  1. Choose accessible design elements: Choosing accessible fonts, colours, and layouts and ensuring that text has a high contrast level with the background at all times.

    Tip: Test your colours using a WebAims contrast checker to test your text on different colours that you’re considering for backgrounds and buttons

    Click here to open WebAim
  2. Providing Alternative Text: Adding descriptions to relevant images, graphs or other non-text elements so that users who require a screen reader can understand the context.

    Tip: Think about what the value of an image is. If it’s purely decorative, then it won’t need a description. But if it showcases your work, shares a statistic, or you want users to get a description of your team, then add an alt tag.
  3. Keyboard Accessibility: By clicking the tab button on your keyboard, you should be able to navigate between the links on a page. To scroll, press the up and down arrows, and click enter to select. Any user should be able to navigate a site purely by using their keyboard.

    Tip: To be extra helpful, it’s good practice to add a “skip navigation” button at the top of the page, that way users who rely on keyboard navigation don’t have to go through all the links in the menu bar, when they enter each page.
  4. Video and Audio: Add captions and offer transcripts for any audio content, as well as offering the ability to pause.

    Tip: Most video editors offer “auto captions” which are easy to edit. My favourite mobile tool is Cap Cut. For longer videos try or Adobe Premiere. 
  5. Semantic HTML: Using the correct elements for sections, headings, lists, and links helps assistive technologies to understand the content and structure of a page.
  6. User Testing: Test your website with users who have disabilities. There are scanners and plugins that can help, but it’s always best to ask someone who will spot the issues that the technologies miss.

Just like we have accessibility laws for brick and mortar businesses, there are legal obligations for web accessibility too. But more than that, there’s the moral side to it - you’re basically a good guy if you take the time to adhere to these guidelines (in my not-so-humble opinion).

I strongly believe that it’s our job as designers and developers to ensure that we design and build for all users. By not doing so, we’re allowing our clients to lose out on potential sales. 

And for any business owner who’s built and maintains their own site, I encourage you to run a few tests on your site. If you need any help, I offer an Accessibility Audit for £120.

Find out more about the accessibility audit here.