Web Accessibility - Essential Guide

Simple Definition

Web accessibility means making your sites usable by everyone, regardless of:

• Disabilities (visual, auditory, motor, cognitive)
• Technologies used (screen reader, keyboard navigation)
• Context (mobile, slow connection, noisy environment)

Basic principle: If a person in a wheelchair cannot enter a building, it's unfair. If a person with visual impairments cannot use your site, it's the same.

---

Legal Obligations 2024

In France (MANDATORY)

• Public sites: 100% accessible since January 2024 (Official Source)
• Financial penalties possible for non-compliance
• RGAA (Référentiel Général d'Amélioration de l'Accessibilité) = standard to follow

In Europe

• European Accessibility Act: progressive obligation for all commercial sites
• Law of 2005: equality of rights and opportunities for people with disabilities

⚠️ Important: This is no longer optional, it's legally mandatory.

---

The 4 WCAG Principles (to remember)

1. Perceivable: Information must be perceivable
2. Operable: The interface must be operable
3. Understandable: Information and the interface must be understandable
4. Robust: Compatible with assistive technologies

---

Quick Essentials Checklist

Images

<!-- Good -->
<img src="chart.png" alt="Sales up 15% this quarter">

<!-- Bad -->
<img src="chart.png" alt="graph">

Keyboard Navigation

• Everything must be accessible via keyboard (Tab, Enter, Space)
• Logical navigation order
• Visible focus indicators

Color Contrasts

• Level AA: 4.5:1 (normal text) / 3:1 (large text)
• Level AAA: 7:1 (normal text) / 4.5:1 (large text)

Semantic HTML Structure

<!-- Good -->
<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>
<h1>, <h2>, <h3> (logical hierarchy)

<!-- Bad -->
<div>, <div>, <div> everywhere

---

Screen Readers (to know) 🔊

Free

• NVDA (Windows) - The most used
• ChromeVox (Chrome, multiplatform)
• Orca (Linux)

System Integrated

• VoiceOver (Mac/iOS)
• Narrator (Windows)
• TalkBack (Android)

Paid

• JAWS (Windows) - Professional standard
• Window Eyes (Windows)

Practical tip: Test at least with NVDA (free) or VoiceOver (if Mac).

---

Essential Testing Tools

Automatic (quick wins)

1. Lighthouse (in Chrome DevTools)

   # Accessibility score + recommendations
   F12 > Lighthouse > Accessibility
   

2. axe DevTools (Chrome Extension)

   Detects 50%+ of problems automatically
   

3. WAVE (Extension)

   Direct visualization of problems on the page
   

Manual (necessary for the remaining 50%)

• Keyboard-only navigation (unplug the mouse)
• Test with screen reader
• Contrast check with Color.review

Advanced

• IBM Accessibility Checker - More in-depth tests
• tota11y - Problem visualization
• PAC2021 - PDF verification

---

Practical Resources 📚

Official Documentation

• MDN Accessibility - Complete French guide
• ARIA Authoring Practices - Official W3C patterns
• WebAIM - Practical guides in English

Color and Contrast Tools

• Adobe Color - Accessible palette
• Color.review - Quick contrast test
• Colour Contrast Analyser - Desktop tool

Validation

• Validator W3C HTML
• Validator W3C CSS
• Can I Use - Browser support

---

Best Practices by Technology 💡

HTML

<!-- Hierarchical titles -->
<h1>Main title</h1>
<h2>Section</h2>
<h3>Subsection</h3>

<!-- Explicit labels -->
<label for="email">Email address</label>
<input type="email" id="email" required>

<!-- Landmarks -->
<main>, <nav>, <aside>, <footer>

CSS

/* Visible focus */
:focus {
  outline: 2px solid #007acc;
  outline-offset: 2px;
}

/* Readable text */
body {
  font-size: 16px; /* minimum */
  line-height: 1.5; /* minimum */
}

JavaScript

// ARIA for dynamic content
element.setAttribute('aria-live', 'polite');
element.setAttribute('aria-expanded', 'true');

// Focus management
button.addEventListener('click', () => {
  modal.focus();
});

---

Anti-Accessibility Test 😈

User Inyerface - Deliberately horrible interface to understand UX problems.

---

Golden Rules 🎯

1. Test with real users (or at least with the tools)
2. Accessibility should be considered from the design stage, not at the end
3. Semantic HTML = 80% of the work done
4. Not perfect at the beginning? Start and improve

Accessibility is not a constraint, it's a better experience for everyone.