Designing Websites to Meet WCAG 2.2 AA

There are several essential reasons for making your website accessible to everyone, including people with disabilities.
In the UK, 1 in 5 people have a disability.
A person is considered to have a disability if they have a physical or mental impairment that has ‘substantial’ and ‘long-term’ negative effects on their ability to do normal daily activities. This is the core definition of disability in the Equality Act 2010.
In this document, we’ll look at why accessible websites are important, how an accessible website benefits everyone, and the core principles behind Web Content Accessibility Guidelines.
WCAG 2.2 – A Brief Introduction
The Web Content Accessibility Guidelines (WCAG) 2.2 are an internationally recognised set of guidelines developed to ensure web content is accessible to everyone. These guidelines provide a framework for making web content more usable for individuals with a wide range of disabilities, including visual, auditory, physical, speech, cognitive, and neurological impairments.
WCAG is organised around four core principles: Perceivable, Operable, Understandable, and Robust (often abbreviated as POUR). This means that web content must be presented in ways that users can perceive, provide controls that users can operate, ensure that content is understandable, and create content that can work with various technologies and platforms.
The WCAG 2.2 standards build upon previous versions, introducing new success criteria that aim to further improve accessibility, particularly for individuals with cognitive and learning disabilities, low vision, and mobile device users. These updates focus on enhancing keyboard accessibility, improving focus visibility, and supporting better navigation on mobile devices.
Why Is Accessibility Important?
There are numerous reasons for making your website accessible to everyone, and not just people with disabilities. These reasons are rooted in principles of equality, inclusion, and fairness. Here are the key ethical considerations:
Equal Access to Information
Everyone has the right to access information, services, and opportunities available online. Creating an accessible website ensures that people can participate equally in today’s digital world.
No one should be excluded from digital platforms because of their abilities. An accessible website promotes inclusivity and removes barriers that could marginalise certain groups.
Fairness and Equity
Treating all individuals fairly requires ensuring that digital platforms are usable by everyone, regardless of their physical, sensory, or cognitive abilities. An accessible website helps ensure that people do not face unnecessary disadvantages online. Inaccessible websites can be seen as a form of indirect discrimination, as they systematically exclude certain groups. Making your site accessible ensures that you uphold the ethical principle of non-discrimination.
Social Responsibility
Ethical businesses and organisations recognise their responsibility to society, which includes ensuring products and services are accessible to all. Designing an accessible website can help you to align with your business’ ethical duty to respect and support all customers, employees, and stakeholders. Beyond any legal obligations, creating an accessible website fosters a culture of inclusion, where all people are welcomed and valued.
Empowerment and Independence
By making websites accessible, you empower people with disabilities to be independent in accessing information, making decisions, and engaging in online activities. An accessible website enables people with disabilities to fully participate in all aspects of life.
Ethical Business Practice
Ethical businesses should prioritise the needs of their customers, and that includes ensuring their products and services work for everyone. Making a website accessible is an important part of creating a positive and inclusive user experience.
Reducing Social Isolation
The internet is a primary mode of social connection, and inaccessible websites can exacerbate feelings of isolation and exclusion for people with disabilities. By ensuring accessibility, you reduce the risk of social isolation and foster a sense of belonging.
In summary, the ethical reasons for making a website accessible are rooted in promoting equality, fairness, inclusion, and respect for all individuals, regardless of their abilities. It is an essential aspect of building an inclusive digital world where everyone can participate and thrive.
How Accessibility Benefits Everyone
Web accessibility benefits everyone, not just individuals with disabilities, by creating a more inclusive, usable, and efficient online experience. Here are the key ways that accessible design enhances the web for all users:
Improved Usability
Accessible websites are often easier to navigate due to clear structure, well-labelled links, and intuitive design. This benefits all users, especially those who are new to the web, less tech-savvy, or using mobile devices.
Designing for accessibility leads to a cleaner, more structured website, whilst consistent layouts and navigation will improve the overall user experience and reduce frustration.
Better Mobile Compatibility
Many accessibility practices, like using flexible layouts, larger buttons, and high-contrast text, also improve how a website functions on mobile devices. Making websites accessible to people with motor impairments (e.g., larger touch targets) directly benefits users interacting with small touch-screen devices, such as smartphones or tablets.
Improved Search Rankings
Many accessibility practices, such as using descriptive alt text for images, semantic HTML structure, and clear heading levels, align with SEO best practices. This helps search engines better understand the content, leading to improved visibility in search results. Optimising for accessibility also involves reducing website clutter and streamlining code, which can result in faster page loading times. Faster websites benefit all users, particularly those on slower internet connections.
Easier Multi-Modal Interaction
Accessible websites are designed to work well with screen readers and other assistive technologies. This also benefits users who rely on voice-activated technologies like Siri, Alexa, or Google Assistant to navigate the web or access content hands-free.
Improved Readability
Accessibility guidelines often recommend using high-contrast colour schemes, larger fonts, and clear typography, which improve readability for everyone, particularly in low-light conditions or users with low vision or colour blindness. Simplifying language and avoiding overly complex sentence structures benefit users with cognitive disabilities. However, these practices also improve readability for people with limited literacy, non-native speakers, or users who are in a hurry.
Inclusive Design for Ageing Populations
As people age, they may experience declines in vision, hearing, and motor skills. Accessible websites help meet the needs of older users who may not identify as disabled but experience age-related difficulties.
Legal Compliance and Risk Reduction
Making websites accessible helps businesses comply with legal requirements in many countries, such as the European Accessibility Act and similar regulations. This reduces the risk of lawsuits and enhances corporate responsibility.
Enhanced User Satisfaction
Accessible websites are typically more user-friendly, offering a smooth and frustration-free experience for everyone. Happy users are more likely to engage longer, return to the site, and recommend it to others. Clear, concise, and well-organised content makes it easier for users to find the information they need quickly, reducing cognitive load and making the web experience more pleasant for all.
The Four Core Principles of WCAG 2.2 – Perceivable, Operable, Understandable & Robust (POUR)
Perceivable
To make your website perceivable according to the Web Content Accessibility Guidelines (WCAG), content must be presented in ways that users can perceive, regardless of their disabilities. This means ensuring that all users, including those with visual, auditory, and cognitive impairments, can access and understand the information provided on the site.
A perceivable website adheres to the following:
- Provide text alternatives for non-text content.
- Use a flexible layout that adapts to different screen sizes.
- Use sufficient colour contrast.
- Provide alternatives for time-based media such as video.
- Make content accessible to screen readers.
- Ensure that interactive elements (like links and buttons) have a visible focus state.
- Use clear and simple layouts.
- Provide user-controlled options for video, audio and interactive elements.
- Ensure consistent layout and design.
- Support for magnification and zooming tools.
Operable
An operable website means that users can easily interact with and navigate through the site using various input methods. By following these guidelines, you create a more inclusive experience that works for everyone, including individuals with disabilities and those using assistive technologies. This not only improves accessibility but also enhances usability for all users.
Here’s how to ensure your website is operable under WCAG:
- Ensure full keyboard accessibility.
- Allow enough time to read and interact.
- Make content navigable.
- Avoid keyboard traps.
- Provide input assistance.
- Keep navigation and UI consistent.
- Ensure the site is fully operable with different input devices, including keyboards, mice, touch-screens, and other assistive technologies.
- Avoid on-screen flashing elements.
- Provide clear instructions for complex interactions.
- Make focus indicators visible.
- Ensure that all dropdown menus, hamburger menus, and sub-menus can be opened, navigated, and closed using only the keyboard.
Understandable
To make your website understandable, it must present content and interactive elements in a clear, predictable, and user-friendly manner. By following these WCAG guidelines, you ensure that users of all abilities, including those with cognitive and learning disabilities, can navigate, comprehend, and interact with your website confidently.
To make an understandable website, remember the following:
- Make text content readable and clear.
- Ensure predictable navigation and interactions.
- Provide instructions and feedback for user interactions.
- Support for different languages.
- Design using visual cues such as icons and symbols.
- Provide help for completing tasks.
- Help users avoid and correct mistakes.
- Ensure interactive components are easy to understand.
- Use clear visual design and structure.
Robust
A robust website must work reliably across a wide range of devices, browsers, and assistive technologies, both now and in the future. By adhering to web standards, providing backward compatibility, and ensuring that dynamic content is accessible, you ensure that your site remains usable for all users, including those with disabilities who rely on assistive technologies. This forward-thinking approach enhances accessibility, usability, and sustainability in the ever-evolving digital landscape.
Here are some tips to make your website robust:
- Use valid, standard code.
- Ensure compatibility with assistive technologies.
- Ensure cross-browser and cross-device compatibility.
- Provide accessible dynamic content.
- Make forms accessible and usable.
- Ensure content and code are future-proof.
- Ensure meaningful mark-up for all elements.
- Test with assistive technologies.
Additional Resources
Whilst a strong, design-focused approach is the best way to create an accessible website, there are some useful tools which can help you to achieve full 2.2 AA standards.
Userway.org
Userway is a premium plug-in that provides digital accessibility compliance on any website. It can help your website consistently align with accessibility standards alongside useful accessibility checking and monitoring tools.
WCAG Colour Contrast Checker
accessibleweb.com/color-contrast-checker
WCAG Colour Contrast Checker is a Chrome extension that lets you compare foreground and background colours to see if their contrast ratio meets WCAG standards.
AA 2.2 WordPress Themes
wordpress.org/themes/zakra
Some WordPress themes come with accessibility options built-in. Themes such as Zakra implement well with popular site builders, and offer accessibility options such as a properly tagged navigation menu that is keyboard operable, and numerous options to change its design, such as font and button size.
AccessiBe.com
accessibe.com/accessscan
A useful accessibility auditing tool.
Conclusion
Whilst designing an accessible website can appear daunting at first, by remembering to stick to the four key POUR principles and to keeping design elements simple and understandable, you can easily make your website accessible to all, whilst also improving the overall experience for all users.
If you require further help in creating an accessible website, contact us today.
If you require advice with creating an accessible website, or need help with design, digital or web, within your business, contact us today.