WCAG 2.2 AA Has Become the Global Standard to Comply With
Whether you only sell inside North America or run a company that serves customers globally, accessibility is no longer a nice-to-have.
WCAG stands for Web Content Accessibility Guidelines, which is a framework developed by the W3C Web Accessibility Initiative to make web content more accessible to people with disabilities across the globe.
WCAG version 2.2 AA is now the benchmark upheld by the following laws and policies:
- The European Accessibility Act (EAA)
- The Americans with Disabilities Act (ADA)
- The Accessible Canada Act (ACA)
- The Accessibility for Ontarians with Disabilities Act (AODA)
- And more!
At Azuro Digital, our web design services treat accessibility compliance as a top priority on all client sites, as well as our own.
Follow our comprehensive guide below to ensure that your WordPress website complies with WCAG 2.2 AA:
1. Grasp the POUR Framework Before Touching Your Code
WCAG is built on 4 core principles often shortened to POUR:
-
Perceivable – content must be presented in ways people can sense (ie. alt text, captions).
-
Operable – users must be able to navigate and interact with a keyboard or other assistive tech.
-
Understandable – information and UI behaviours must be predictable and easy to follow.
-
Robust – code should work with current and future browsers, screen readers and plugins.
Keeping POUR in mind turns the spec from an intimidating checklist into a set of UX guardrails.
2. WordPress-Specific WCAG 2.2 AA Quick-Fire Checklist
Use this list as a smoke test before you dive into a full audit:
-
Keyboard-only navigation works everywhere, including mega-menus and sliders.
-
Logical heading hierarchy (
<h1>→<h2>→<h3>), descriptive title tags, readable fonts, accessible forms, and proper use of ARIA attributes and HTML semantic elements. -
Correct
langattribute on<html>and on any inline language switches. -
Meaningful images carry concise alt text, while decorative images use empty alt.
-
4.5:1 colour contrast for body text and 3:1 for large or bold text.
-
Captions for prerecorded and live video, plus transcripts for audio-only files.
-
Text reflows with zero loss of function when zoomed to 200%.
-
“Skip to content” link appears on first keyboard tab stop.
-
No autoplaying audio without a visible pause/stop control.
-
Interactive targets are at least 24×24px and have a 2px visible focus outline with 3:1 contrast.
-
Login and checkout flows let users paste credentials, use password managers and bypass CAPTCHAs.
-
Drag-and-drop tasks offer click-to-select alternatives.
-
Time-outs warn users and let them extend sessions without data loss.
If any of these fail, you have Level A/AA blockers to fix.
3. Build an Accessible Foundation
If you’re not going to build from scratch, choose a truly “accessibility-ready” template
Using WordPress is the right starting point, but there’s more work to be done. Templates like Icelander are lightweight and ship with skip links, semantic landmarks, contrast-safe palettes, etc. Put your chosen template on a staging URL, run it through an accessibility scanner and swap it out if it fails.
If you’re building a WordPress website that’s more custom, here’s the guidance you need:
Keep your WordPress core, theme and plugins current
WordPress core updates have made many accessibility improvements over the years, such as tightened keyboard focus, list-view navigation and block pattern semantics. Keeping your WordPress core version up to date means inheriting fixes instead of reinventing them. The same applies for your theme and plugins – keep everything updated to benefit from automated accessibility upgrades.
Don’t add an accessibility toggle widget
Adding an accessibility toggle widget sounds great in theory, but in reality they cause more harm than good. Most people with disabilities dislike them so much that they actively block them. Instead of taking the lazy path, you should manually optimize your website code so that screen readers and people with disabilities can intuitively navigate and understand your site.
If you visit the websites of major corporations (like Apple, Walmart, etc) almost none of them display an accessibility toggle widget for this reason. Read this article to learn more about why accessibility toggle widgets are harmful and disrupt the experience for people with disabilities.
4. Fix the Usual Suspects
-
Image alt text – use the AltTextAI plugin if you have tons of images.
-
Focus indicators – these are visual cues that highlight interactive elements on a webpage when they have keyboard focus (like form fields). Many “clean” themes hide outlines. Add the following CSS to meet WCAG 2.2 3:1 contrast standards: :focus-visible {outline:2px solid #2271b1; outline-offset:2px;}
-
Forms – pick an accessible form plugin like Gravity Forms or Fluent Forms, enable accessible error messages and test with only a keyboard.
-
ARIA attributes – tag various elements for assistive technology, such as dropdown menus, external links and more
-
Authentication – enable “show password”, passkeys or social login to satisfy WCAG 2.2 AA.
5. You Might Need to Change Your Brand Colours or Fonts… Sorry!
We don’t like being the bearer of bad news, but sometimes it’s essential to make changes to your brand’s colour palette or font families in order to have a fully accessible site.
Let’s start with colours. In order for us to make your website look aesthetically pleasing, we will likely want to use one of your brand colours as the background of certain sections or buttons on your website.
In order to be compliant, your text colour and background colour need to have a 3:1 contrast ratio. Since we can choose between black and white for the text colour, we’ll always be able to make your colour contrast accessible – but it might be at the expense of the design quality.
Forcing our hand on the text colour might make the design look bad, to the point where we might even opt to not use your brand colour as a background at all – which could make the site look boring.
So… when you partner with us for your website design project, we might ask if you’re willing to slightly change your brand colours – likely just making certain colours a bit darker or a bit brighter (not changing the colour altogether).
Fonts are a different story. If any of your brand’s fonts are inaccessible / difficult to read, we’ll need to change them in order to be compliant. There’s nothing we can do to “make it work” unless you’re okay with risking accessibility lawsuits. However, it’s very rare for a brand’s font to be an issue – it’s usually just the colours.
WCAG also requires all fonts to be at least 11px in size.
Note: even if your website has an accessibility widget that allows the user to customize the colours and fonts, your website still needs to use compliant fonts and colour contrast before the user clicks on the accessibility widget in order to be fully compliant. The purpose of an accessibility widget is to make the user’s experience even better, but you still need to meet the basic requirements from the beginning of the user journey.
6. Don’t Forget Documents and Media
WCAG applies to every PDF, Word file and slide deck you share. Tag elements accurately, set document language and run Acrobat’s accessibility checker before you hit publish.
7. Post a Transparent Accessibility Statement
Create a page on your website that outlines:
-
Your conformance target – “WCAG 2.2 AA”
-
Date and scope of your last audit
-
Known limitations with a timeline to fix
-
Contact information
Link it in the global footer beside your privacy policy.
8. Keep Compliance Baked into Your Workflow
-
Create rigid templates for website editors and authors – make it impossible for them to publish something unless all accessibility-related tasks are complete.
-
Manual pre-publish verification – have an accessibility expert do a manual review to catch anything that the template can’t enforce.
-
Quarterly scans & annual manual audits – WCAG drift is real. Schedule it like security patching.
-
Staff training – it pays dividends to do 30-minute lunch-and-learns on plain language, image alt text, readable fonts, etc.
Final Thoughts
Building an inclusive WordPress site is the empathetic thing to do, but it’s also the right business decision.
Follow the WCAG-driven checklist above and you’ll not only dodge lawsuits, but you’ll also attract a whole new audience to your website.
Need a partner? Azuro Digital’s accessibility team audits, designs and develops WordPress experiences that hit WCAG 2.2 AA on launch day.
Let’s create a web everyone can use. Talk to us about your 2025 compliance roadmap!
