Web Accessibility (a11y): How to Make Websites Inclusive

Why accessibility?

• 15% of the population lives with some form of disability (WHO statistics)
• Legal requirement in the EU (EAA – European Accessibility Act) coming into force in 2025
• SEO advantage – Google rewards accessible pages
• Better UX for everyone (not just those with disabilities)

WCAG 2.1 Levels

The EU requires AA level for public services starting from 2025.

Core Checklist

Visual - [ ] Color contrast 4.5:1 (text), 3:1 (UI) - [ ] Text can be zoomed to 200% without breaking - [ ] Information is not conveyed by color alone - [ ] Focus indicators are visible

Keyboard Navigation - [ ] Entire site navigable via Tab key - [ ] Logical tab order - [ ] Skip to content link - [ ] Modals/dropdowns close with Esc - [ ] No keyboard traps

Screen Reader - [ ] Semantic HTML (header, nav, main, footer) - [ ] Headings in correct hierarchy (H1 → H2 → H3) - [ ] Alt text on all meaningful images - [ ] aria-label on buttons without text - [ ] Form fields with labels

Content - [ ] Plain language (6th-8th grade level) - [ ] Link text is clear - [ ] No "Read more" or "Click here" - [ ] Subtitles on videos - [ ] Transcripts for audio

Common Mistakes

1. Missing or incorrect alt text ❌ `<img src="logo.png">` ❌ `<img src="logo.png" alt="image">` ✅ `<img src="logo.png" alt="Kodulehe Haldus logo">`

Decorative images: alt="" (empty).

2. Color as the only information carrier ❌ "Required fields in red" ✅ "Required fields in red and marked with *"

3. Missing label ❌ `<input type="email" placeholder="Email">` ✅ `<label for="email">Email</label><input id="email" type="email">`

4. Clickable div ❌ `<div onclick="...">Click</div>` ✅ `<button onclick="...">Click</button>`

5. Poor focus indicator ❌ `*:focus { outline: none; }` ✅ `*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }`

Tools

Automated Testing - [axe DevTools](https://www.deque.com/axe/) – browser extension - [WAVE](https://wave.webaim.org/) – online test - [Lighthouse](https://developer.chrome.com/docs/lighthouse) – built into Chrome - [Pa11y](https://pa11y.org/) – CLI

Manual Testing - Keyboard only (unplug the mouse) - Screen readers: [NVDA](https://www.nvaccess.org/) (free), VoiceOver (Mac), JAWS - Color blindness simulator

Form Accessibility

<form>
  <div>
    <label for="name">Name *</label>
    <input id="name" type="text" required aria-describedby="name-help">
    <small id="name-help">Enter your full name</small>
  </div>

<div role="alert" aria-live="polite"> <!-- Error messages appear here --> </div>

<button type="submit">Submit</button> </form> `

ARIA Attributes

ARIA provides additional information for screen readers. Golden rule: use semantic HTML first, ARIA only when necessary.

Most common: - aria-label: for buttons that are icon-only - aria-describedby: for additional info - aria-hidden: hide from screen readers (decorations) - aria-live: for dynamic notifications - role: semantics for custom components

EU Legislation

The EAA – European Accessibility Act comes into force in June 2025. It requires AA level for: - E-commerce stores - Banking services - Public services - Communication infrastructure

Fines can reach up to €5,000 per violation.

Connection to SEO

Google rewards accessibility: - Alt text → image search - Semantic HTML → better understanding of content - Mobile-friendly → ranking factor - Performance → Core Web Vitals

See also: technical SEO audit.

Summary

Accessibility is not a trend – it is a right, a necessity, and a business advantage. We offer website design compliant with WCAG 2.1 AA standards. Request an audit quote.

Sources

• WCAG 2.1 Quick Reference
• European Accessibility Act
• WebAIM Million Report