KISS Series: WCAG
In this KISS (Keep It Super Simple) Series, we break down what WCAG (Web Content Accessibility Guidelines) is, and why accessibility is important and can benefit all.
As part of our mission to educate small business owners with digital knowledge, we have created the KISS Series (Keep It Super Simple), where we take digital theories and concepts and break them down into bitesize, understandable explanations.
In this post, we break down what UGC is, what value it brings, and how to incorporate it in your business, whether you own an eCommerce store or a service-based business.
Content:
WCAG: Web Content Accessibility Guidelines
WCAG stands for Web Content Accessibility Guidelines, and is a series of guidelines aimed at making digital content accessible to those who have visual impairments or other disabilities which can affect how people use their digital devices. These guidelines were created by W3C (World Wide Web Consortium, or the Internet Gods as we laymen would know them as).
As with many things, WCAG went through a few iterations to keep up with developing technology. The first guideline was released in January 1995; the second was updated in December 2008; the latest version was updated in October 2023, and this version (WCAG 2.2) is the main recommendation.
Why is accessibility important?
Humans are predominantly visual beings. We process images faster than we read text, we tend to see things first before touching and tasting. A lot of our world is designed with visuals as a priority, whether it's clothes, buildings, and even plates of food.
But what about those who don't have their sight or only have partial vision? In the UK alone, there are 340,000 people registered blind or partially sighted, with more than 2 million people living with sight loss. This means that all the visually-led design features are experienced in a different way for these users: some users cannot see colours as intended, while others require a screen reader to dictate content to them.
This can lead to an accessibility gap, whereby those with disabilities cannot enjoy the full experience and functionality of a website, and are thus disadvantaged, discouraged and even completely excluded. And in a world where we should always strive to be inclusive, this is why accessibility matters.
In addition, accessibility considerations benefit all. As we will detail later, one of the key recommendations within WCAG is to ensure a strong colour contrast between text and background, whether that is a solid background or an image. While this is useful for those who are colourblind, having a sufficient colour contrast has been shown to help reduce eye strain. If you're able-sighted, have you ever visited a website or come across a graphic like a poster and struggled to read the text overlayed on top because the words weren't big enough or the font colour was too close to the background colour? This is an issue that WCAG can resolve, therefore adhering to WCAG is recommended to improve experience for all users, regardless of disability.
One thing to note!
Note that WCAG is a recommendation; it is not an actual legal requirement. Having said that, there are some countries or bodies whereby accessibility is the law for some industries, for instance:
EU: the EAA (European Accessibility Act) makes digital accessibility a legal requirement for all businesses in all member states by June 2025; however, it is up to each country to decide what their requirements should be, but it is expected that the laws will follow the guidance of WCAG 2.1.
UK: there is no legal requirement for private companies and businesses to comply with accessibility laws; however, all public and government bodies must have accessible websites. This law has been in effect since 2018. However, it is worth noting that, if a UK company sells to the EU, it will have to comply with EAA.
USA: like the UK, there is no legal requirement for private businesses, but state and local governments' web content and mobile apps must adhere to WCAG 2.1, Level AA.
Australia: like the UK and USA, there is no legal requirement for private businesses, but the Disability Discrimination Act 1992 mandates that all governments must meet WCAG 2.0 A requirements.
As you can see, a common thread is that accessibility is a legal requirement for the government websites and resources (which is quite frankly the least that can be done, to ensure all citizens can access the same information and no citizen is excluded), but the law doesn't extend to private companies. Nonetheless, it is an exercise worth doing, to ensure your business provides the same service and content to all users and to ensure no potential customer or client falls through the gap because they can't experience the customer journey or access the content in the same way.
In addition, many of these countries base their web accessibility laws and legislations on WCAG criteria, therefore if you adhere to WCAG standards, you are likely to be compliant with your country's web accessibility requirements. However, it is always worth double checking, in case there are slight variations on any of the criteria.
WCAG Requirements
Before we get into the actual guidelines, let's quickly touch on the priority levels. You may have seen on the above country list, there was reference to Level A, Level AA etc. The guidelines are split into 3 priority levels, A, AA, AAA (how creative).
A: web developers must satisfy these requirements. These are the bare minimum requirements in order to make the web content accessible to all
AA: web developers should satisfy these requirements. If not, some groups may find it more difficult to access the content (though not impossible)
AAA: web developers may satisfy these requirements, as this will make accessing the content easier for all.
Essentially, there are some requirements laid out within WCAG that are must-haves, and others that are nice-to-haves. As you can see, Australia mandates that their government websites meet the minimum requirements, whereas the USA have gone a step further to ensure the government websites meet the middle requirement. While it is nice for businesses and bodies to satisfy the top requirement, it may be difficult for some, which is why Level A is published, so that everyone knows what the minimum requirement is.
For the sake of simplification, we will only focus on the A requirements, but if you ever want to learn more about AA and AAA standards, you can visit WCAG to learn more.
Now onto the principles. If you ever think of WCAG, just remember to POUR:
Perceivable
Content should be perceivable by all senses, and not just sight. For instance, content needs to be readable by screen readers, to help those who need to hear a description of what is onscreen.
Alt Texts
These are text descriptions to describe non-text content such as images, videos and other media forms. A screen reader can't describe an image to the user, but it can read out the alt text if it is included so the user can imagine what is onscreen.
How to do: every website builder gives you the option to add alt text to your images. If you're coding with HTML, use "alt=" in your img tag
How this helps able users: if an image fails to load, the alt text will appear, which will help able users understand what the image is meant to be. In addition, it can help with SEO, as the alt text describes the image to the bots, so they understand what is on the page.
Sensible structure
With every website, you can declare what is the heading of the page, the subheading, what is the main text content and so on. Think of it like a book, where you have chapters, subchapters and text. By declaring them in a sensible and meaningful way, it helps screen readers break down large chunks of text into meaningful content that breaks and flows naturally.
How to do: every website builder gives you the option to choose your style, from Header 1 to Header 6 and Paragraph 1-3 (or some iteration of this). In HTML, use <h1></h1>, <h2></h2>, <p></p> etc tags to define which text has what style. Ensure your website has only one H1, as each webpage should only have 1 main header (like each chapter in a book should only have 1 main title, but can have multiple sub-titles); otherwise your content should be broken up into different pages. The sequence of your sub-headers does not necessarily have to be sequential, but it is advisable to avoid confusion, especially when a screen reader is used.
How this helps able users: usually headers and sub-headers have a different font design, whether it's a larger size, a different colour or a bold design. By structuring text into meaningful sections, it helps break down large chunks of text into digestible portions, and the visual difference in header design helps this process.
Colour Reliance
Colour should not be the only indicator of information. For instance, if there is a button on the page, the only difference to the rest of the text should not just be colour. If this were the case, colourblind users may not be able to distinguish between the text with functionality and regular text. There should be other features to make it obvious that that is a button that requires interaction.
How to do: websites often add an underline (as you can see on this page) to links to ensure it is visible to colourblind users that that text has more functionality than basic text. Buttons are also often designed to stand out from regular text, from having coloured backgrounds to hover effects.
How this helps able users: by indicating that the link, button or other feature is different to regular text, it helps those who don't speak or read the language realise that that text or design is different to the rest. It also just makes the general user experience better, as people don't have to find the function; it already stands out to them. This is a big part of CRO (Conversion Rate Optimisation), which you can read about in our KISS guide.
Colour contrast
This is actually an AA requirement, but we will include this because it actually is a crucial requirement. WCAG dictates that text should have sufficient contrast against its background, whether it's a solid colour or an image background. The contrast ratio should be at least 4.5:1 (with a few exceptions such as large text or logos).
How to do: there are plenty of contrast checker such as WebAIM and Brandwood's a11y that are free to use and you can easily check if your colour palette complies with WCAG's minimum requirement.
How this helps able users: ever had tired eyes from trying to read white text on a light background? Or squint at tiny text that is placed over a background image? Insufficient contrast can cause eye strain, therefore complying by colour contrast helps make text more legible and perceivable.
Audio control
If any audio plays automatically for more than 3 seconds, there must be some form of audio control, whether it is to pause or stop the audio or to adjust the volume independently from the overall system volume level.
How to do: most video embedding tools include this functionality. For HTML, include <video controls> in your code.
How this helps able users: some of us (like yours truly) do not like being surprised by noise from videos, others may jump if a video is too loud. Most of us can agree that a video or music suddenly playing without our knowledge or consent is quite annoying. By giving the option to control this, it makes the overall user experience more enjoyable.
Operable
Content should be operable without the use of a mouse. This is relevant for users who do not have full function of their arms and/or hands, and therefore cannot use a mouse, and must use a screen reader or a keyboard to navigate instead.
Keyboard
We tend to take mouse navigation for granted. Other than scrolling, we use our mouse to click on fields where we need to input information. But what if you cannot use a mouse? All functionality of content must be operable through a keyboard interface, such as using the Tab button to move to the next field or button.
How to do: most website builders have this built into their functionality.
How this helps able users: some people actually don't like to use a mouse. A previous colleague used to navigate File Explorer exclusively on her keyboard. It can speed up the process and make actions like entering forms quicker and easier without having to move your hand to your mouse to click on the next field.
Timing
If there is a time limit to content, there should be the option to extend or adjust the amount of time to fill in the information. There are, of course, exceptions, such as auctions and other time-sensitive activities, but you may have noticed that a lot of websites where there is a time constraint, such as with banking or booking a hotel room, there is a timer, and a warning if you're about to time out and the option to extend. This gives users who require more time the ability to complete their action without interruption or complete shutdown.
How to do: most website builders have this built into their functionality.
How this helps able users: we've all been there. You're trying to purchase something but you've left your wallet in the other room, or you're trying to book a room but your spouse isn't picking up the phone to confirm you can proceed. By giving the option of extending the checkout time, it ensures you can keep the screen without losing the information, being logged out and so on.
Flashing Lights/Images
For those who have epilepsy or other conditions, flashing lights and images can bring about at best a headache, and at worst a seizure. Therefore, pages cannot contain anything that flashes more than 3 times in any one second period, or the flash is below the general flash and red flash threshold.
How to do: you can have soft flash features such as words gently flashing and appearing on the screen, but do not include any aggressive flash features.
How this helps able users: it just isn't an enjoyable experience and it's not great for the eyes to have bright lights flashing at your constantly. In general, we barely like it when a lightbulb that's about to go out gently flickers. Imagine having a bright light strobe into your eyes!
Navigable
A website should provide ways to help users navigate, find content, and determine where they are.
How to do: include a navigation bar, which is a feature most website builders have, and title and sequence your webpage in order (which goes back to the point about sensible structure in Perceivable). If you have an eCommerce webshop, consider adding breadcrumb navigation to show the customer how they got to that PDP, so they can easily navigate back to their previous page to browse other related products.
How this helps able users: easy navigation helps users find the relevant information or product they want and need, which makes the overall user experience more enjoyable and easier.
Understandable
All content should be readable and understandable. We will not go into detail about this section because many of the criteria are self-explanatory and straightforward, but some of the criteria includes:
If there is an error in a form input, the error should be clearly indicated
eg. If a user has missed out filling in a mandatory field, that field is indicated. This is normally built into most website builder's functionality
The content should be consistent, no matter what device you are using
Instructions must be provided when content requires user input
eg. Headers for each form field, so users know where to put their First Name, Last Name etc.
Avoid making users enter redundant information, such as making users enter the same information multiple times
Robust
Content should be compatible with current and future technology and can be interpreted by a wide variety of user agents, such as assistive technologies like screen readers. Again, we will not go into full detail for this, but the main thing is to ensure your website is mobile responsive, so that your content appears on different device types without losing crucial content (though a change in layout is OK, as long as it is accessible, understandable and readable).
Why Accessibility Matters
We've already touched upon this, but at Mpowering Solutions, we truly believe that we should strive to make our world--including our digital world--as inclusive and accessible as possible. We know people and loved ones who have been able-sighted for most of their life and have suddenly experienced sight loss due to conditions and illnesses like stroke and cancer, which is a stark reminder that disabilities are much closer to home and can happen to anybody.
The list of requirements may seem long on the surface, but if you read into them, they are actually incredibly straightforward, logical, sensible and beneficial to all, even those who are fully able-bodied and able-sighted. Almost all the criteria are easy to implement, especially if you use website builders such as Hostinger, Wix and so on.
By implementing accessibility requirements such as alt text and text hierarchy, it also helps with SEO performance, as it helps the search engine crawlers understand your website better. So there is only upside to implementing accessibility-friendly measures!
Accessibility should not be seen as a burden; it should be seen as an opportunity. We should strive to make the world a place where your digital experience is the same regardless of disability and impairment, and that nobody is left behind in an accessibility gap that can be easily avoided.
TL;DR Conclusion
WCAG stands for Web Content Accessibility Guidelines, which are a series of guidelines and criteria to ensure web content is accessible to users with visual impairments and other disabilities
WCAG is not a legal requirement, though each country or governing body may have its own legislation on accessibility. However, many of these laws use WCAG as the guide, therefore adhering to WCAG would likely ensure your website is legally compliant.
WCAG can be broken down into 4 sections, and can be remembered with the acronym POUR (Perceivable, Operable, Understandable, Robust)
While WCAG and web accessibility is not a legal requirement in the UK for private businesses, it is advisable to implement accessible features and designs, as they benefit all users as well as SEO
At Mpowering Solutions, we believe in accessibility so much that it is included in our SEO Audit. If you want to ensure your website is accessible, get in touch about an SEO Audit and we can embark on your accessibility journey together!
