What does WCAG stand for?
WCAG, or Web Content Accessibility Guidelines, is like a roadmap for making websites accessible to everyone, including those with disabilities and temporary impairments. Its main goal is to ensure that websites are easy to use, no matter how people access them—whether they’re using a screen reader, temporarily dealing with a broken arm, or recovering from eye surgery.
For businesses, following WCAG isn’t just about ticking boxes; it’s about improving the user experience for all. This inclusivity can reduce legal risks, boost SEO, and expand your audience.
Why does accessibility matter for your website?
Universal user experience
Accessibility ensures that your website is usable by everyone, regardless of physical or cognitive abilities. When a site is accessible, it opens the door to a wider audience, including those with disabilities, temporary impairments, or even people in challenging environments, like bright sunlight or noisy spaces. Imagine trying to use a website with an injured dominant arm—it’s much easier if you can navigate without a mouse.
Beyond inclusivity, accessibility improves SEO, boosts your reputation, and helps avoid legal risks. It’s not just about compliance—it’s about creating a better experience for all users.
SEO Benefits
From an SEO perspective, accessible websites tend to perform better because they often align with best practices for search engines. For example, using alt text for images, creating well-structured content, and ensuring proper heading hierarchies are fundamental for both screen readers and search engines like Google. A case study by w3.org involving NPR found that adding transcripts to their radio shows not only improved accessibility but also increased search traffic by nearly 7%, demonstrating a clear SEO boost from WCAG compliance .
Legal Risks
Failing to meet WCAG guidelines can put your business at significant legal risk. There’s been a steady increase in lawsuits against companies with non-compliant websites. For example, the Domino's Pizza case in the US highlighted that the inability to use a website with a screen reader could lead to legal action. Domino’s lost the case, setting a precedent that even online services must meet accessibility standards. Similarly, Target faced a $6 million settlement for their inaccessible website, which further highlights the financial and reputational damage caused by non-compliance.
However, the legal landscape in the UK is still evolving compared to the U.S., where accessibility lawsuits are more common.
One key UK regulation is the Public Sector Bodies Accessibility Regulations (2018), which mandates public sector websites and mobile apps to comply with WCAG 2.1 AA standards. While private sector businesses don't have specific legal obligations to meet WCAG standards, they can still face legal action under the Equality Act if their websites aren't accessible. In fact, a business can be sued if it’s deemed to have failed to make "reasonable adjustments" for users with disabilities.
The lack of highly publicised private sector cases doesn't mean the risk is absent. Companies that ignore accessibility risk legal claims and reputational damage, as demonstrated by Nordstrom's case in the U.S., where poor accessibility led to a class action lawsuit. While not directly in the UK, these cases set precedents that could influence future legal action in the UK, especially as the demand for accessible websites grows globally.
Regularly auditing your website and implementing WCAG guidelines can help you avoid these risks while making your website more user-friendly. To learn more about the specific benefits accessibility can bring to web design and business growth, be sure to check out our Why does website accessibility matter? blog post.
WCAG 1.0 to 2.2 - Why are there so many versions of WCAG and what do they mean for my website?"
If you’ve ever wondered why there are multiple versions of WCAG (Web Content Accessibility Guidelines) like 1.0, 2.0, 2.1, and now 2.2, you’re not alone. It’s easy to feel confused about how these versions differ and why they keep changing. However, the reason for these updates is straightforward: the web is constantly evolving, and so are the needs of people with disabilities.
The evolution of WCAG: Why multiple versions?
WCAG was first introduced in 1999 with the release of WCAG 1.0. At the time, it provided foundational guidelines for making websites more accessible, but web technologies were relatively simple back then. As websites became more interactive and dynamic, the initial guidelines started to feel outdated. For instance, early WCAG didn’t account for complex user interfaces or the growing use of mobile devices.
Fast forward to 2008, and WCAG 2.0 was launched to meet the growing complexity of web design. This version introduced the well-known POUR principles (Perceivable, Operable, Understandable, and Robust), which became the standard framework for accessibility. The upgrade from 1.0 to 2.0 wasn’t just a tweak—it was a major overhaul to ensure that websites worked better for people with different abilities, including those using assistive technologies like screen readers. Importantly, WCAG 2.0 became the legal standard for web accessibility in many countries, including the UK and the US.
What came next? WCAG 2.1 and 2.2
With the explosion of mobile devices, tablets, and more complex web apps, WCAG 2.1 arrived in 2018. It was created to bridge the gap left by its predecessor, focusing on mobile accessibility, low-vision users, and those with cognitive disabilities. These updates were crucial because a lot of people use mobile devices to access websites, and the smaller screen sizes introduced new accessibility challenges. For example, buttons and touch targets needed to be large enough for users to interact with easily, especially for those with motor impairments.
The latest version, WCAG 2.2, was published in October 2023. This version further expands on cognitive accessibility, focusing on simplifying interactions like login processes and ensuring that controls are easy to operate. It also brings in new guidelines for dragging movements and improving the visibility of focused elements on a page. Think of WCAG 2.2 as the next step in making websites more intuitive and user-friendly for everyone.
How many versions of WCAG are there?
As of today, there are four major versions: WCAG 1.0, 2.0, 2.1, and 2.2. While each version builds on the last, they don't replace each other. Instead, they add more detail and accommodate newer technologies, ensuring that the guidelines stay relevant as the web evolves. For example, WCAG 2.0 is still considered legally sufficient in many places, but implementing WCAG 2.1 or 2.2 ensures a higher level of compliance and user accessibility.
What does this mean for your website?
In a nutshell, every version of WCAG aims to make websites better for people of all abilities. However, with each new version, websites are expected to do more to accommodate evolving needs. This doesn’t mean you need to completely redesign your site every time a new version is released, but it does mean you should be aware of updates and implement them where possible.
For instance, WCAG 2.2 introduces guidelines that make login processes easier, especially for those with cognitive disabilities. If your site has user accounts, this update could help users who struggle with complex login systems. Similarly, improving touch targets on mobile devices could benefit users with motor disabilities.
Ultimately, staying up-to-date with WCAG versions ensures your website is accessible to the widest audience, while also protecting your business from potential legal risks. Accessibility isn’t just a box to tick—it’s about creating a better experience for everyone who visits your site. And with WCAG 3.0 on the horizon, it’s clear that these guidelines will continue to evolve as web technologies and user needs grow.
By keeping your site aligned with the latest standards, you’re not just following the rules—you’re future-proofing your online presence and ensuring that no one is left behind.
The four principles of WCAG: POUR explained
When it comes to making your website accessible, WCAG breaks it down into four main principles, often remembered by the acronym POUR: Perceivable, Operable, Understandable, and Robust. Let’s break these down in a way that makes sense.
Perceivable
This is all about making sure your website’s content can be seen or heard by everyone. Whether someone’s using a screen reader or has a colour vision deficiency, they need to be able to access your content. Think of it as ensuring all your signs in a shop are readable, whether by sight or hearing.
Operable
Your website should be easy to navigate and use, even for people who might not be using a mouse. If someone can’t click a tiny button with a mouse, they should be able to use their keyboard to move around your site easily. It's like making sure all doors in a building are wide enough for everyone to walk through, no matter what they’re using to get around.
Understandable
This is about making your content and functionality easy to understand. If a website is confusing, with unclear instructions or strange layouts, people won’t stick around. It's like having signs in a shop that are so complicated no one knows which aisle they’re in.
Robust
Finally, your site needs to work well with different browsers and assistive technologies—now and in the future. It’s a bit like future-proofing your building so it can stand the test of time and still be accessible to everyone, even as new tools and technologies come into play.
How to implement WCAG guidelines on your website?
In our previous post, “Why does website accessibility matter?”, we explored some of the key tips on making your website accessible (like alt text, descriptive alternatives to multimedia and testing). Now, we’re going to dive a little deeper and walk through how we implement WCAG guidelines into our client’s websites.
Ensure keyboard navigation
It’s about making sure users can fully navigate a website without needing a mouse or relying solely on their keyboard. This is crucial for people with physical disabilities, those using assistive technologies like screen readers, or even users with temporary impairments who may find using a mouse difficult.
To make a site keyboard-friendly, we ensure that all interactive elements—like buttons, links, and forms—can be accessed using the Tab key. We carefully check the focus order, meaning the sequence in which elements are highlighted when tabbing through the page. Each item needs to appear in a logical order, much like how it would if you were navigating visually. For example, tabbing should take you through the navigation bar, then the content, and not jump around randomly.
We also make sure that every interactive element is clearly focusable, meaning it’s visually obvious where the keyboard’s focus is. For instance, when a user tabs to a button, that button should highlight or change in appearance, so the user knows exactly where they are on the page.
Finally, we provide alternatives for actions that typically rely on a mouse, such as sliders or dropdown menus, ensuring they work smoothly with keyboard commands.
Keyboard navigation is not just a technical checkbox—it’s essential for making the web more inclusive and user-friendly for everyone.
Use clear headings hierarchy
A clear headings hierarchy is vital for both accessibility and SEO. Structuring content using the right headings (H1, H2, H3, etc.) ensures that users with disabilities—especially those using screen readers—can easily navigate your website. Screen readers rely on these headings to create an outline of the page, helping users quickly find the section they’re interested in (and yes, bots scanning webpages for ranking purposes work in a similar way!). Without a proper hierarchy, the user experience can be confusing and frustrating.
For example, the main title of a page should always be tagged as H1, with subtopics following logically under H2, and further details listed under H3. This clear, structured order allows users to move through your content in a logical, user-friendly way.
Interestingly, this is also a crucial SEO practice, as search engines like Google use these headings to understand the structure of your content. Well-structured headings improve your site's chances of ranking better in search results. Despite this, we often see websites we re-vamp or visit lacking a proper heading structure, missing out on both accessibility and SEO benefits.
By implementing a clear heading hierarchy, you’re not only enhancing accessibility for users with disabilities but also giving your site an SEO advantage. It’s a simple, effective way to make your website easier to navigate for both people and search engines!
Provide descriptive links
When creating an accessible website, providing descriptive links is essential. Instead of using generic phrases like "Click here" or "Read more," the link text should clearly describe where it leads. For example, instead of writing “Click here for our blog,” a descriptive link would be “Read our blog post on accessibility best practices.” This helps all users, especially those using screen readers, who may navigate a page by jumping between links. If every link says “Click here,” it’s nearly impossible for them to know where each link will take them.
Descriptive links also help users with cognitive impairments by providing more context, making the browsing experience clearer and less frustrating. Additionally, they benefit SEO—search engines use link text as a clue to understand the content of the linked page. Well-crafted descriptive links can improve your site’s relevance and ranking for specific keywords.
Ensure colour contrast
One of the key components of accessibility is ensuring your website has proper colour contrast. This means the text and other elements on your page must stand out against their background, making them easy to read, especially for users with visual impairments like colour blindness or low vision. If the contrast is too low, your content might be difficult or even impossible to read for some users.
To ensure adequate contrast, we follow the WCAG guidelines, which recommend a minimum contrast ratio of 4.5:1 for normal text and 3:1 for larger text. Tools like contrast checkers can help you determine if your design meets these standards. It’s important not only for accessibility but also for overall usability—high contrast benefits everyone, especially in low-light environments or on mobile devices.
Surprisingly, many websites we review or revamp often have poor contrast, particularly when using light text on a light background or placing text over images. Beyond accessibility, improving colour contrast can also help keep users engaged and reduce bounce rates, contributing to a better overall experience. So, ensuring good contrast isn’t just a compliance measure—it’s a key factor in creating a user-friendly, inclusive website.
Allow adjustable text size
Not everyone has the same vision capabilities, and some people may struggle with small text, especially on mobile devices or high-resolution screens. By enabling users to easily increase or decrease the size of the text, you cater to a wider audience, particularly those with visual impairments or age-related sight loss.
Most modern browsers allow users to zoom in and out, but you should ensure your website doesn’t restrict this functionality. Avoid using fixed text sizes in your CSS, as this can prevent browsers from adjusting the text. Instead, use relative units like percentages, em, or rem to allow the text to scale according to user preferences. This ensures your content remains flexible and easy to read, no matter the user’s needs.
Allowing adjustable text size isn’t just an accessibility feature—it also improves user experience across the board, making your website more comfortable to use for everyone. Websites that ignore this functionality can frustrate users, leading to higher bounce rates and poor engagement. Ensuring text size adjustability is a simple, effective way to keep users happy and included.
Label form fields clearly
When users fill out forms on your website—whether it's a contact form, sign-up form, or checkout process—each field needs a clear and visible label. This ensures that all users, including those with visual impairments or cognitive disabilities, understand what information is required.
For users relying on screen readers, a missing or unclear label can make the form virtually impossible to complete. Screen readers rely on properly coded labels to announce what each field represents, so it’s essential to have labels that are descriptive and directly linked to their corresponding fields.
For example, instead of just “Name,” a more helpful label could be “Full Name (as it appears on your ID),” which gives clearer guidance. This not only improves accessibility but also reduces confusion for all users.
Well-labelled form fields also improve SEO and overall user experience, reducing frustration and increasing form completion rates. Surprisingly, many forms we come across during website audits either lack labels entirely or have vague instructions. By clearly labelling form fields, you're creating a smoother, more inclusive experience for everyone who interacts with your website.
Avoid flashing content
Flashing content on a website can be a serious problem for users with photosensitive epilepsy, potentially triggering seizures. But beyond that, it’s also an unpleasant experience for many other visitors who find sudden, flashing elements overwhelming and distracting.
To create a safe and user-friendly environment, avoid any content that flickers or flashes rapidly. WCAG guidelines recommend steering clear of anything that flashes more than three times per second, as this can create accessibility issues. If animations or transitions are necessary, they should be smooth and gradual, ensuring that they don’t cause discomfort or harm to any of your users.
By focusing on creating a stable, welcoming visual experience, you not only make your site safer but also more enjoyable to browse. Users will appreciate the calm, consistent design, and you can be confident that your content isn’t inadvertently excluding or endangering anyone.
Use error suggestions
Imagine filling out a form online and making a mistake, only to be greeted with a vague message like, “Error.” Frustrating, right? This is where error suggestions come into play. Instead of simply telling users they’ve made an error, the website should provide helpful guidance on how to fix it. For example, if someone enters an invalid email, the suggestion could be, “Please enter a valid email address, such as name@example.com.” This small touch can make a huge difference in user experience.
For users with cognitive disabilities or those who might be unfamiliar with the form process, clear error suggestions are essential. They reduce confusion and frustration, turning a potentially negative experience into a simple and helpful one. It’s like having a friendly guide beside you, pointing out exactly what went wrong and how to correct it.
Error suggestions also improve accessibility because they ensure that users don’t get stuck or overwhelmed. By offering specific feedback, you're making the process smoother and more intuitive, whether it’s for a checkout form or a contact page. In the end, it’s about being proactive and helpful, guiding users through any bumps along the way.
Test regularly
Out of all the steps in making your website accessible, testing regularly is by far the most critical. Web technologies, user devices, and accessibility standards are constantly evolving. What works today might not be effective next year—or even next month. New content or features can unintentionally introduce barriers, so regular testing ensures that your website remains compliant and user-friendly.
To stay ahead, it’s essential to perform both manual testing (where a human checks how well the website functions with assistive technologies) and automated testing (using tools to scan for accessibility issues). Testing should include different devices, browsers, and screen readers to make sure the site works well for everyone. User feedback is also invaluable—nothing beats real-world insights from people who use your site every day.
By making testing a regular habit, you’re not just maintaining compliance; you’re actively improving the experience for your users. It’s the best way to catch potential issues early and adapt to any changes in the WCAG guidelines or new technologies. Accessibility is never a one-time job—it’s an ongoing commitment to providing a site that everyone can use.
Inclusive online experience
From ensuring keyboard navigation to using clear heading hierarchies, we’ve explored practical ways to enhance user experience for everyone, including those with disabilities. We also looked at the importance of descriptive links, proper colour contrast, and making form fields user-friendly. Additionally, we emphasised the importance of regular testing, ensuring your site stays up-to-date as technologies and standards evolve.
Accessibility isn’t just about ticking boxes—it’s about creating a web environment that welcomes all users, improves SEO, and protects your brand from legal risks. Whether you’re building a new site or revamping an existing one, accessibility should be a core focus.
If you’re ready to level up your website’s accessibility, let’s talk! We’d love to help you create a site that’s inclusive, future-proof, and ready for everyone to use. Reach out to us today!
