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.


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)
  • 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

Color and Contrast Tools

Validation


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.