Key Takeaways
- WCAG 2.1 Level AA is the accessibility standard required by AODA (Canada), referenced by the European Accessibility Act (EU), and applied through ADA litigation (US).
- The four WCAG principles: Perceivable, Operable, Understandable, Robust — each addresses a different disability category and corresponding design requirement.
- The most common failures are fixable through configuration rather than redesign: alt text, contrast ratios, focus indicators, form labels.
- Automated tools (WAVE, Axe) catch approximately 40% of WCAG issues; manual testing with keyboard navigation and a screen reader is required for full compliance.
- Accessibility improvements also improve SEO — semantic HTML, proper heading structure, descriptive links, and alt text are all positive SEO signals.
Web accessibility — designing websites so that people with disabilities can use them — has been a legal requirement in Ontario under the Accessibility for Ontarians with Disabilities Act (AODA) since 2014, with compliance deadlines extending through 2021. It's required by the European Accessibility Act for many commercial digital products from June 2025. And it's increasingly applied through ADA litigation in the United States, where courts have consistently treated websites as 'places of public accommodation' under disability law. Beyond legal compliance, accessibility is a business opportunity. Approximately 15–20% of the global population lives with some form of disability — visual, auditory, motor, or cognitive. Accessible websites serve this population better; they also produce cleaner, more semantic HTML that performs better in search engines and on assistive devices.
Definition: Screen Reader and Assistive Technology
A Screen Reader is software that reads digital content aloud to users who are blind or have severe visual impairments. Screen readers interpret the HTML structure of web pages — heading levels, landmark roles, link text, button labels, form field labels — and present this information as synthesised speech or braille output. The most widely used screen readers: JAWS (Windows, most used by business and government users), NVDA (Windows, free), VoiceOver (built into all Apple devices), and TalkBack (Android). Screen readers depend on semantic HTML to make sense of page content — a visually styled button that is actually a `<div>` with a click handler is invisible to a screen reader. Proper HTML semantics (using `<button>`, `<a>`, `<h1>`–`<h6>`, `<label>`, `<nav>`, `<main>`, `<form>`) are the foundation of screen reader accessibility.
WCAG 2.1 Level AA: The Key Requirements
WCAG 2.1 Level AA has 50 success criteria across four principles. The most impactful for business websites are in the Perceivable and Operable categories.
Perceivable requirements: all images must have alt text that describes the image's purpose for screen reader users (an image of a product should describe the product; a decorative image should have empty alt='' so screen readers skip it). Videos must have captions for audio content and audio descriptions for visual-only content. Text must have a contrast ratio of at least 4.5:1 against its background for normal text (18px and below) and 3:1 for large text (24px and above). Content cannot rely solely on colour to convey information — an error state indicated only by red text is not accessible to colour-blind users; add an icon or text label.
Operable requirements: all functionality must be available via keyboard without requiring a mouse or touch input. This means every interactive element — links, buttons, form fields, dropdown menus, modal dialogues — must be reachable via Tab key and activatable via Enter or Space. The current focus position must be clearly visible — removing the default browser focus outline (the blue ring that appears when tabbing) without replacing it with an equally visible custom indicator fails this requirement. Pages must not contain content that flashes more than three times per second (seizure risk). Users must have enough time to complete forms and interactions without automatic timeouts.
Understandable requirements: page language must be declared in the HTML `lang` attribute (`<html lang='en'>`) so screen readers use the correct pronunciation. Form error messages must identify the specific field with the error and describe how to fix it — 'Please enter a valid email address in the Email field' rather than 'Error in field 2'. Navigation must be consistent across pages — if the main navigation appears in the same location on every page, keyboard users and screen reader users can learn its location and skip to it efficiently.
- Alt text on all informational images; empty alt='' on decorative images
- 4.5:1 minimum contrast ratio for body text; 3:1 for large text and UI components
- Keyboard navigation for all interactive elements — no mouse-only functionality
- Visible focus indicators on all focusable elements
- Form labels (not just placeholders), error messages that identify the field and describe the fix
- Page language declared in HTML lang attribute
Auditing Your Website for Accessibility
A complete accessibility audit combines automated testing tools (which catch objective failures) with manual keyboard and screen reader testing (which catches contextual and experiential failures).
Start with the WAVE accessibility evaluation tool (wave.webaim.org) — enter your URL and WAVE crawls the page, highlighting accessibility issues with visual icons and providing detailed guidance for each. WAVE identifies: missing alt text, contrast failures, missing form labels, missing document language, heading structure problems, and ARIA implementation errors. The WebAIM Contrast Checker is useful for testing specific colour combinations against the WCAG contrast requirements. Google Lighthouse (built into Chrome DevTools) includes an Accessibility audit that scores your page and lists specific failures.
Manual keyboard testing is required for issues automated tools can't detect. Navigate your website using only the Tab key (forward), Shift+Tab (backward), Enter (activate link or button), and Space (toggle buttons, scroll). Check: can you reach every interactive element? Is the focus order logical (following the visual reading order)? Is the current focus position always clearly visible? Can you activate all interactive elements? Are modal dialogues focus-trapped (Tab doesn't leave the modal while it's open)? Does focus return to the triggering element when a modal is closed?
Screen reader testing reveals issues with the semantic structure that visual testing misses. Test with VoiceOver on Mac (Command+F5) or NVDA on Windows (free download) on your homepage, a key service page, a contact form, and any modal or interactive component. Listen for: are images described meaningfully? Do form fields announce their label when focused? Do error messages announce when validation fails? Are buttons described by their action (not just 'button')? Is the page structure — headings, landmarks (header, main, nav, footer) — providing a navigable outline of the content?
Fixing the Most Common Accessibility Issues
Most WCAG failures on business websites are fixable through CMS configuration, CSS corrections, and HTML attribute additions — without redesigning the site.
Alt text: In WordPress, add alt text in the image block or media library. In Shopify, add alt text in the product image alt field. For existing images without alt text, audit using WAVE's alt text report and add descriptions through the CMS. Guidelines: describe what the image shows and why it's there — 'Accountant reviewing financial documents with client' not 'image' or 'photo'. For infographics with significant data, provide the data in text form (in an adjacent caption or expandable section) rather than trying to compress it all into alt text.
Colour contrast: test your current colour palette combinations at webaim.org/resources/contrastchecker. The most common failures are light grey text on white backgrounds and white text on medium-saturation colour backgrounds. Solutions: darken the text colour, darken or saturate the background, or increase the font size to qualify for the lower large-text threshold. In most cases, a contrast ratio fix doesn't require a visual redesign — adjusting the hex value of text or background colours slightly often achieves compliance without noticeably changing the design.
Focus indicators: never use `outline: none` or `outline: 0` in CSS without providing a custom focus indicator. If the default browser focus outline doesn't match your visual design, replace it with a custom indicator that is at minimum as visible as the browser default. A common accessible solution: `*:focus { outline: 3px solid #0047AB; outline-offset: 2px; }` — this provides a clear, brand-colour focus ring that is visible in keyboard navigation without conflicting with mouse-based visual design when combined with `:focus-visible` to hide it for mouse users.
Experience Signal
The accessibility audit pattern that produces the most efficient remediation is prioritising failures by user impact: fix the issues that make the site completely unusable for assistive technology users first (missing form labels that make forms inaccessible, keyboard traps that prevent navigation, missing alt text on key informational images), then fix contrast and focus indicator issues that make the site difficult to use. WAVE's error count provides a ranking — errors are more critical than alerts, and high-volume errors (a missing alt text on every page's logo image) are fixed once through the template rather than individually.
Frequently Asked Questions
In Canada, the Accessibility for Ontarians with Disabilities Act (AODA) requires public-facing websites for organisations with 50+ employees to meet WCAG 2.0 Level AA, with compliance deadlines that have been in effect since 2016 (large organisations) and 2021 (small organisations). The ADA (Americans with Disabilities Act) has been increasingly applied to business websites in the US through litigation — courts have consistently ruled that websites are 'places of public accommodation' under the ADA, making WCAG 2.1 AA compliance a practical legal requirement for US businesses. The European Accessibility Act (EAA) requires accessibility for many commercial digital products and services in the EU by June 2025. For businesses serving government or enterprise clients, accessibility compliance is increasingly specified in procurement requirements.
WCAG (Web Content Accessibility Guidelines) version 2.1 is the current W3C standard for web accessibility, organised into four principles: Perceivable (content must be presentable in ways users can perceive — alt text for images, captions for video), Operable (interface must be operable — keyboard navigable, no seizure-inducing content, sufficient time to interact), Understandable (content and UI must be understandable — readable text, predictable behaviour, clear error messages), and Robust (content must be robust enough for assistive technologies to interpret reliably). Level A is the minimum; Level AA is the standard required by most legislation and considered the practical target for business websites; Level AAA is the highest and not required for most business purposes. Meeting Level AA means passing all Level A and Level AA success criteria.
The most common WCAG failures on business websites: (1) Missing or inadequate image alt text — images without descriptive alternative text are invisible to screen readers; (2) Insufficient colour contrast — text over light backgrounds that fails the 4.5:1 contrast ratio minimum; (3) Missing keyboard focus indicators — the visible focus outline removed in CSS 'because it looks bad', making keyboard navigation impossible for sighted keyboard users; (4) Form fields without labels — using placeholder text instead of visible labels makes forms unusable for screen readers; (5) Videos without captions; (6) Missing skip navigation link — allowing keyboard users to skip repeated navigation blocks; (7) PDF documents not tagged for screen reader accessibility.
Sources
Need to Make Your Website Accessible?
Webnixon conducts WCAG 2.1 accessibility audits and implements the fixes — alt text, contrast corrections, keyboard navigation, ARIA labels, and form accessibility — to bring your website to Level AA compliance.
Book an Accessibility AuditAbout the author
Jai Paek
Creative Director
Jai leads brand identity and UX design at Webnixon, bringing 20+ years of experience building digital design systems for agencies and enterprise teams. He has shipped design systems and visual identities for over 200 brands across Canada and the US, with deep expertise in conversion-focused UI, WCAG 2.1 accessibility compliance, and responsive web design for service businesses and ecommerce brands.
Related Articles
Web Design
Web Design Trends in 2026: What's Shaping Business Websites This Year
Each year brings new web design patterns that separate websites that feel current from those that feel dated. In 2026, the shifts are about measurable performance standards, AI-assisted design production, and accessibility compliance. Here's what's gaining traction and why — and what's worth adopting for your business website.
Web Design
GDPR for Website Owners: What the EU Privacy Law Means for Your Business
GDPR takes effect on May 25, 2018 and carries fines of up to €20 million or 4% of global annual turnover. It applies to any organisation that collects or processes personal data of EU residents — regardless of where the organisation is based. Here's what your website needs to do to comply.
Web Design
HTTPS and SSL: Why Every Business Website Needs to Make the Switch
Google began marking HTTP websites as 'Not Secure' in Chrome in 2017. For businesses, this is no longer a back-burner technical task — a browser security warning directly undermines visitor trust and conversion rates. Here is what HTTPS means, what it costs, and how to switch without breaking your site.