Web Accessibility

Web Accessibility (a11y)

Accessibility means building websites that everyone can use — including people with disabilities. It's both an ethical responsibility and a legal requirement in many countries.

What is Web Accessibility and Why Does It Matter?

Web accessibility (abbreviated "a11y" — 11 letters between the a and y) is the practice of designing and building websites so they can be used by people with a wide range of disabilities, including visual, auditory, motor, and cognitive impairments.

Approximately 1 in 5 people has some form of disability. Many rely on assistive technology like screen readers (which read pages aloud), keyboard navigation (for those who can't use a mouse), and screen magnifiers. An inaccessible website is functionally unusable for these users.

Beyond ethics, accessibility has practical benefits: it improves SEO (many a11y practices overlap with good technical SEO), expands your potential audience, and in many jurisdictions — including the EU, UK, and US — there are legal requirements for websites to be accessible, particularly for public sector organisations and businesses.

WCAG Basics

WCAG (Web Content Accessibility Guidelines) is the international standard for web accessibility, published by the W3C. The current standard is WCAG 2.1, with WCAG 2.2 and 3.0 in development. WCAG has three compliance levels: A (minimum), AA (recommended standard for most sites), and AAA (highest, often not feasible for all content).

WCAG is built around four core principles — the site must be:

  • Perceivable — Information must be presentable to users in ways they can perceive. Images need alt text. Video needs captions. Content can't rely solely on colour to convey meaning.
  • Operable — All functionality must be accessible via keyboard. Give users enough time to read and use content. Don't cause seizures. Provide navigation help.
  • Understandable — Content must be readable and predictable. Declare the page language. Label form inputs. Provide error messages that help users fix problems.
  • Robust — Content must be interpreted reliably by assistive technologies. Use valid HTML. Use ARIA correctly. Don't rely on custom elements without proper accessibility semantics.

Practical Accessibility Checklist

Click each item to mark it complete. Progress is saved in your browser.

Images & Media

All informative images have descriptive alt text
Decorative images use empty alt="" so screen readers skip them
Videos have captions or transcripts available

Colour & Contrast

Normal text has a contrast ratio of at least 4.5:1 (WCAG AA)
Large text (18px+ or 14px+ bold) has a contrast ratio of at least 3:1
Colour is not the only way information is conveyed (e.g. error states also use icons or text)

Keyboard Navigation

All interactive elements are reachable and usable with keyboard alone (Tab, Enter, Space)
Focus states are visible — never use outline: none without a custom focus style
A "Skip to main content" link is provided at the top of each page (for keyboard users)
No keyboard traps — users can always navigate away from any element

HTML & ARIA

HTML lang attribute is set correctly (<html lang="en">)
Semantic HTML is used — header, nav, main, footer, article, section
All form inputs have associated <label> elements
Icon-only buttons have aria-label describing their action
Heading hierarchy is logical — one h1, then h2 → h3 in order
Form error messages are descriptive and linked to the field that caused them

ARIA Labels — When and How

ARIA (Accessible Rich Internet Applications) attributes add semantic meaning to elements that HTML alone can't describe. The key principle: use native HTML first. Only reach for ARIA when you can't use a native element.

HTML — ARIA Examples
<!-- Icon button needs a label --><button aria-label="Close menu"><svg>...</svg></button><!-- Navigation landmark --><nav aria-label="Main navigation">...</nav><nav aria-label="Footer navigation">...</nav><!-- Toggle state --><button aria-expanded="false"aria-controls="menu">Menu</button><div id="menu"hidden>...</div><!-- Live region — announces dynamic changes --><div aria-live="polite"id="status">Form submitted successfully.</div>

WCAG Contrast Checker

Enter foreground (text) and background colours to calculate the contrast ratio and see if they pass WCAG AA and AAA standards.

Sample Text — The quick brown fox jumps
—
Contrast Ratio
WCAG AA
—
WCAG AAA
—
WCAG AA requires: 4.5:1 for normal text, 3:1 for large text (18px+ or 14px+ bold). WCAG AAA requires: 7:1 for normal text, 4.5:1 for large text.