# Créer des pages web accessibles
> Sketchnote par [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
journey
title Votre aventure d'apprentissage de l'accessibilité
section Fondations
Compréhension des utilisateurs: 5: Vous
Outils de test: 4: Vous
Principes POUR: 5: Vous
section Développer les compétences
HTML sémantique: 4: Vous
Design visuel: 5: Vous
Techniques ARIA: 4: Vous
section Maîtriser la pratique
Navigation au clavier: 5: Vous
Accessibilité des formulaires: 4: Vous
Tests en conditions réelles: 5: Vous
```
## Quiz avant la conférence
[Quiz avant la conférence](https://ff-quizzes.netlify.app/web/)
> Le pouvoir du Web réside dans son universalité. L'accès pour tous, indépendamment du handicap, est un aspect essentiel.
>
> \- Sir Timothy Berners-Lee, Directeur du W3C et inventeur du World Wide Web
Voici quelque chose qui pourrait vous surprendre : lorsque vous créez des sites web accessibles, vous n'aidez pas seulement les personnes en situation de handicap — vous améliorez en fait le Web pour tout le monde !
Avez-vous déjà remarqué ces découpes sur les trottoirs aux coins des rues ? Elles ont été conçues à l'origine pour les fauteuils roulants, mais elles aident maintenant les personnes avec des poussettes, les livreurs avec des chariots, les voyageurs avec des bagages à roulettes, et aussi les cyclistes. C'est exactement ainsi que fonctionne la conception web accessible — des solutions qui aident un groupe bénéficient souvent à tous. Plutôt cool, non ?
Dans cette leçon, nous allons explorer comment créer des sites web qui fonctionnent vraiment pour tout le monde, peu importe leur manière de naviguer sur le web. Vous découvrirez des techniques pratiques déjà intégrées aux normes web, vous pratiquerez avec des outils de test, et vous verrez comment l'accessibilité rend vos sites plus utilisables pour tous les utilisateurs.
À la fin de cette leçon, vous aurez la confiance nécessaire pour faire de l'accessibilité une partie naturelle de votre flux de développement. Prêt à découvrir comment des choix de conception réfléchis peuvent ouvrir le web à des milliards d'utilisateurs ? Allons-y !
```mermaid
mindmap
root((Accessibilité Web))
Users
Lecteurs d'écran
Navigation au clavier
Contrôle vocal
Agrandissement
Technologies
Sémantique HTML
Attributs ARIA
Indicateurs de focus CSS
Événements clavier
Benefits
Public plus large
Meilleur SEO
Conformité légale
Design universel
Testing
Outils automatisés
Tests manuels
Retour des utilisateurs
Technologies d'assistance réelles
```
> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon) !
## Comprendre les technologies d’assistance
Avant de commencer à coder, prenons un moment pour comprendre comment les personnes avec différentes capacités expérimentent réellement le web. Ce n’est pas juste de la théorie — comprendre ces modes de navigation réels fera de vous un bien meilleur développeur !
Les technologies d’assistance sont des outils assez étonnants qui aident les personnes en situation de handicap à interagir avec les sites web d’une manière qui pourrait vous surprendre. Une fois que vous aurez compris comment ces technologies fonctionnent, créer des expériences web accessibles deviendra beaucoup plus intuitif. C’est comme apprendre à voir votre code à travers les yeux de quelqu’un d’autre.
### Lecteurs d’écran
[Les lecteurs d’écran](https://en.wikipedia.org/wiki/Screen_reader) sont des technologies assez sophistiquées qui convertissent le texte numérique en sortie vocale ou en braille. Bien qu’ils soient principalement utilisés par les personnes malvoyantes, ils sont aussi très utiles pour les utilisateurs ayant des troubles d’apprentissage comme la dyslexie.
Je aime penser à un lecteur d’écran comme à un narrateur très intelligent qui vous lit un livre. Il lit le contenu à voix haute dans un ordre logique, annonce les éléments interactifs tels que « bouton » ou « lien », et fournit des raccourcis clavier pour naviguer rapidement dans une page. Mais voici le truc — les lecteurs d’écran ne peuvent faire leur magie que si nous construisons des sites web avec une structure correcte et un contenu significatif. C’est là que vous intervenez en tant que développeur !
**Lecteurs d’écran populaires sur différentes plateformes :**
- **Windows** : [NVDA](https://www.nvaccess.org/about-nvda/) (gratuit et le plus populaire), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (intégré)
- **macOS/iOS** : [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (intégré et très performant)
- **Android** : [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (intégré)
- **Linux** : [Orca](https://wiki.gnome.org/Projects/Orca) (gratuit et open-source)
**Comment les lecteurs d’écran naviguent dans le contenu web :**
Les lecteurs d’écran offrent plusieurs méthodes de navigation qui rendent la navigation efficace pour les utilisateurs expérimentés :
- **Lecture séquentielle** : Lit le contenu du haut vers le bas, comme un livre
- **Navigation par repères** : Permet de sauter entre les sections de la page (en-tête, navigation, contenu principal, pied de page)
- **Navigation par titres** : Permet de passer d’un titre à l’autre pour comprendre la structure de la page
- **Listes de liens** : Génère une liste de tous les liens pour un accès rapide
- **Contrôles de formulaire** : Navigue directement entre les champs de saisie et les boutons
> 💡 **Voici quelque chose qui m’a bluffé** : 68 % des utilisateurs de lecteurs d’écran naviguent principalement par les titres ([Enquête WebAIM](https://webaim.org/projects/screenreadersurvey9/#finding)). Cela signifie que votre structure de titres est comme une carte routière pour les utilisateurs — quand vous la réussissez, vous aidez littéralement les gens à trouver plus rapidement leur chemin dans votre contenu !
### Construire votre flux de travail de test
Voici une bonne nouvelle — les tests d’accessibilité efficaces ne doivent pas être écrasants ! Vous voudrez combiner des outils automatisés (ils sont fantastiques pour détecter les problèmes évidents) avec des tests manuels. Voici une approche systématique que j’ai trouvée efficace pour détecter le plus de problèmes sans vous prendre toute une journée :
**Flux de travail essentiel pour les tests manuels :**
```mermaid
flowchart TD
A[🚀 Démarrer les tests] --> B{⌨️ Navigation au clavier}
B --> C[Parcourir tous les éléments interactifs avec Tab]
C --> D{🎧 Test avec lecteur d’écran}
D --> E[Tester avec NVDA/VoiceOver]
E --> F{🔍 Test du zoom}
F --> G[Zoom à 200 % et tester la fonctionnalité]
G --> H{🎨 Vérification des couleurs/contraste}
H --> I[Vérifier que tout le texte respecte les ratios de contraste]
I --> J{👁️ Gestion du focus}
J --> K[S’assurer que les indicateurs de focus sont visibles]
K --> L[✅ Tests terminés]
style A fill:#e3f2fd
style L fill:#e8f5e8
style B fill:#fff3e0
style D fill:#f3e5f5
style F fill:#e0f2f1
style H fill:#fce4ec
style J fill:#e8eaf6
```
**Liste de vérification étape par étape :**
1. **Navigation au clavier** : Utilisez uniquement Tab, Shift+Tab, Entrée, Espace, et les touches fléchées
2. **Tests avec lecteur d’écran** : Activez NVDA, VoiceOver ou Narrator et naviguez les yeux fermés
3. **Tests de zoom** : Testez aux niveaux de zoom 200 % et 400 %
4. **Vérification du contraste des couleurs** : Contrôlez tout le texte et les composants UI
5. **Tests des indicateurs de focus** : Assurez-vous que tous les éléments interactifs aient des états de focus visibles
✅ **Commencez avec Lighthouse** : Ouvrez les DevTools de votre navigateur, lancez un audit d’accessibilité Lighthouse, puis utilisez les résultats pour guider vos axes de tests manuels.
### Outils de zoom et de grossissement
Vous savez comment parfois vous pincez pour zoomer sur votre téléphone quand le texte est trop petit, ou que vous plissez les yeux devant l’écran de votre portable en plein soleil ? Beaucoup d’utilisateurs comptent sur des outils de grossissement pour rendre le contenu lisible chaque jour. Cela inclut les personnes malvoyantes, les personnes âgées, et toute personne ayant déjà essayé de lire un site web en extérieur.
Les technologies modernes de zoom ont évolué au-delà du simple agrandissement. Comprendre comment ces outils fonctionnent vous aidera à créer des designs responsives qui restent fonctionnels et attrayants à tout niveau de grossissement.
**Fonctionnalités modernes de zoom des navigateurs :**
- **Zoom de page** : Échelle tout le contenu proportionnellement (texte, images, mise en page) - méthode préférée
- **Zoom texte uniquement** : Augmente la taille de la police tout en conservant la mise en page originale
- **Pince pour zoomer** : Support du geste mobile pour un grossissement temporaire
- **Support des navigateurs** : Tous les navigateurs modernes supportent le zoom jusqu’à 500 % sans casser la fonctionnalité
**Logiciels spécialisés de grossissement :**
- **Windows** : [Loupe](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (intégré), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/)
- **macOS/iOS** : [Zoom](https://www.apple.com/accessibility/mac/vision/) (intégré avec fonctionnalités avancées)
> ⚠️ **Considération de conception** : WCAG requiert que le contenu reste fonctionnel lors d’un zoom à 200 %. À ce niveau, le défilement horizontal doit être minimal, et tous les éléments interactifs doivent rester accessibles.
✅ **Testez votre design responsive** : Zoomez votre navigateur à 200 % et 400 %. Votre mise en page s’adapte-t-elle avec grâce ? Accédez-vous toujours à toutes les fonctionnalités sans défilement excessif ?
## Outils modernes de test d’accessibilité
Maintenant que vous comprenez comment les gens naviguent sur le web avec des technologies d’assistance, découvrons les outils qui vous aident à construire et tester des sites accessibles.
Pensez-y ainsi : les outils automatisés sont excellents pour détecter les problèmes évidents (comme un texte alternatif manquant), tandis que les tests pratiques vous aident à garantir que votre site est agréable à utiliser dans le monde réel. Ensemble, ils vous donnent la confiance que vos sites fonctionnent pour tout le monde.
### Test du contraste des couleurs
Voici une bonne nouvelle : le contraste des couleurs est l’un des problèmes d’accessibilité les plus courants, mais c’est aussi un des plus faciles à corriger. Un bon contraste bénéficie à tout le monde — des utilisateurs malvoyants aux personnes qui essaient de lire leur téléphone à la plage.
**Exigences WCAG pour le contraste :**
| Type de texte | WCAG AA (Minimum) | WCAG AAA (Amélioré) |
|--------------|-------------------|---------------------|
| **Texte normal** (moins de 18pt) | Ratio de contraste 4.5:1 | Ratio de contraste 7:1 |
| **Texte large** (18pt+ ou 14pt+ gras) | Ratio de contraste 3:1 | Ratio de contraste 4.5:1 |
| **Composants UI** (boutons, bordures de formulaire) | Ratio de contraste 3:1 | Ratio de contraste 3:1 |
**Outils essentiels de test :**
- [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - Application de bureau avec pipette
- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - Web avec retour instantané
- [Stark](https://www.getstark.co/) - Plugin design pour Figma, Sketch, Adobe XD
- [Accessible Colors](https://accessible-colors.com/) - Trouver des palettes de couleurs accessibles
✅ **Créez de meilleures palettes de couleurs** : Commencez avec vos couleurs de marque et utilisez les vérificateurs de contraste pour créer des variations accessibles. Documentez-les comme les tokens couleurs accessibles de votre système de design.
### Audit complet d’accessibilité
Les tests d’accessibilité les plus efficaces combinent plusieurs approches. Aucun outil seul ne détecte tout, donc bâtir une routine de tests avec diverses méthodes assure une couverture complète.
**Tests intégrés au navigateur (DevTools) :**
- **Chrome/Edge** : Audit d’accessibilité Lighthouse + panneau Accessibilité
- **Firefox** : Inspecteur d’accessibilité avec vue détaillée de l’arborescence
- **Safari** : Onglet audit dans l’inspecteur web avec simulation VoiceOver
**Extensions professionnelles de test :**
- [axe DevTools](https://www.deque.com/axe/devtools/) - Test automatisé standard de l’industrie
- [WAVE](https://wave.webaim.org/extension/) - Retour visuel avec surlignage des erreurs
- [Accessibility Insights](https://accessibilityinsights.io/) - Suite complète de test de Microsoft
**Ligne de commande et intégration CI/CD :**
- [axe-core](https://github.com/dequelabs/axe-core) - Bibliothèque JavaScript pour tests automatisés
- [Pa11y](https://pa11y.org/) - Outil CLI de tests d’accessibilité
- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - Scoring automatisé de l’accessibilité
> 🎯 **Objectif de test** : Visez un score Lighthouse accessibilité à 95+ comme base. Rappelez-vous, les outils automatisés détectent seulement environ 30-40 % des problèmes d’accessibilité — les tests manuels restent essentiels !
### 🧠 **Bilan de compétences en test : Prêt à trouver des problèmes ?**
**Voyons comment vous vous sentez au sujet des tests d’accessibilité :**
- Quelle méthode de test vous semble la plus abordable pour l’instant ?
- Pouvez-vous imaginer naviguer uniquement au clavier toute une journée ?
- Quel est un obstacle d’accessibilité que vous avez personnellement rencontré en ligne ?
```mermaid
pie title "Problèmes d’accessibilité détectés par différentes méthodes"
"Outils automatisés" : 35
"Tests manuels" : 40
"Retour des utilisateurs" : 25
```
> **Booster de confiance** : Les testeurs professionnels d’accessibilité utilisent exactement cette combinaison de méthodes. Vous apprenez des pratiques standard de l’industrie !
## Construire l’accessibilité dès le départ
La clé du succès en accessibilité est de l’intégrer à votre fondation dès le premier jour. Je sais qu’il est tentant de penser « Je vais ajouter l’accessibilité plus tard », mais c’est un peu comme essayer d’ajouter une rampe à une maison après qu’elle est déjà construite. Possible ? Oui. Facile ? Pas vraiment.
Pensez à l’accessibilité comme à la planification d’une maison — il est bien plus simple d’inclure l’accessibilité aux fauteuils roulants dans vos plans architecturaux initiaux que de tout réaménager plus tard.
### Les principes POUR : Votre fondation d’accessibilité
Les Web Content Accessibility Guidelines (WCAG) sont construites autour de quatre principes fondamentaux qui forment l’acronyme POUR. Pas d’inquiétude — ce ne sont pas des concepts académiques poussiéreux ! Ce sont des directives pratiques pour créer un contenu qui fonctionne pour tout le monde.
Une fois que vous aurez saisi les principes POUR, prendre des décisions d’accessibilité deviendra beaucoup plus intuitif. C’est comme avoir une liste mentale de contrôle qui guide vos choix de conception. Décortiquons-les :
```mermaid
flowchart LR
A[🔍 PERCEPTIBLE Les utilisateurs peuvent-ils le percevoir ?] --> B[🎮 UTILISABLE Les utilisateurs peuvent-ils l’utiliser ?]
B --> C[📖 COMPRÉHENSIBLE Les utilisateurs peuvent-ils le comprendre ?]
C --> D[💪 ROBUSTE Fonctionne-t-il partout ?]
A1[Texte alternatif Légendes Contraste] --> A
B1[Accès clavier Pas de crises Limites de temps] --> B
C1[Langage clair Prévisible Aide en cas d’erreur] --> C
D1[Code valide Compatible À l’épreuve du futur] --> D
style A fill:#e1f5fe
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
```
**🔍 Perceptible** : L’information doit être présentable d’une manière que les utilisateurs peuvent percevoir avec leurs sens disponibles
- Fournir des alternatives textuelles pour les contenus non textuels (images, vidéos, audio)
- Assurer un contraste colorimétrique suffisant pour tout le texte et composants UI
- Proposer des sous-titres et transcriptions pour les contenus multimédias
- Concevoir du contenu qui reste fonctionnel lorsqu’il est agrandi jusqu’à 200 %
- Utiliser plusieurs caractéristiques sensorielles (pas seulement la couleur) pour transmettre l’information
**🎮 Opérable** : Tous les composants de l'interface doivent être utilisables via les méthodes d’entrée disponibles
- Rendre toutes les fonctionnalités accessibles via la navigation au clavier
- Fournir aux utilisateurs suffisamment de temps pour lire et interagir avec le contenu
- Éviter le contenu qui provoque des crises ou des troubles vestibulaires
- Aider les utilisateurs à naviguer efficacement avec une structure claire et des repères
- Assurer que les éléments interactifs ont des tailles cibles adéquates (minimum 44px)
**📖 Compréhensible** : L’information et le fonctionnement de l’interface doivent être clairs et compréhensibles
- Utiliser un langage clair et simple adapté à votre public
- S’assurer que le contenu apparaît et fonctionne de manière prévisible et cohérente
- Fournir des instructions claires et messages d’erreur pour les saisies utilisateur
- Aider les utilisateurs à comprendre et corriger les erreurs dans les formulaires
- Organiser le contenu avec un ordre de lecture logique et une hiérarchie d’information
**💪 Robuste** : Le contenu doit fonctionner de manière fiable à travers différentes technologies et dispositifs d'assistance
- **Utiliser un HTML valide et sémantique comme fondation**
- **Assurer la compatibilité avec les technologies d’assistance actuelles et futures**
- **Suivre les standards web et les bonnes pratiques de balisage**
- **Testez sur différents navigateurs, appareils et outils d’assistance**
- **Structurez le contenu pour qu’il se dégrade élégamment lorsque les fonctionnalités avancées ne sont pas prises en charge**
### 🎯 **Vérification des principes POUR : Pour bien les assimiler**
**Réflexion rapide sur les bases :**
- Pouvez-vous penser à une fonctionnalité de site web qui viole chaque principe POUR ?
- Quel principe vous semble le plus naturel en tant que développeur ?
- Comment ces principes pourraient-ils améliorer le design pour tous, pas seulement pour les personnes en situation de handicap ?
```mermaid
quadrantChart
title Matrice d'Impact des Principes POUR
x-axis Effort Faible --> Effort Élevé
y-axis Impact Faible --> Impact Élevé
quadrant-1 Gains Rapides
quadrant-2 Projets Majeurs
quadrant-3 À Considérer Plus Tard
quadrant-4 Focus Stratégique
Alt Text: [0.2, 0.9]
Color Contrast: [0.3, 0.8]
Semantic HTML: [0.4, 0.9]
Keyboard Nav: [0.6, 0.8]
ARIA Complex: [0.8, 0.7]
Screen Reader Testing: [0.7, 0.6]
```
> **Souvenez-vous** : Commencez par des améliorations à fort impact et peu coûteuses. Le HTML sémantique et les textes alternatifs offrent le plus grand gain d’accessibilité pour le moindre effort !
## Créer un design visuel accessible
Un bon design visuel et l’accessibilité vont de pair. Lorsque vous concevez avec l’accessibilité en tête, vous découvrez souvent que ces contraintes mènent à des solutions plus claires et élégantes qui profitent à tous les utilisateurs.
Explorons comment créer des designs visuellement attrayants qui fonctionnent pour tout le monde, quel que soit leur niveau de perception visuelle ou les conditions dans lesquelles ils consultent votre contenu.
### Couleur et stratégies d’accessibilité visuelle
La couleur est un puissant moyen de communication, mais elle ne devrait jamais être le seul moyen de transmettre une information importante. Concevoir au-delà de la couleur crée des expériences plus robustes et inclusives qui fonctionnent dans davantage de situations.
**Concevoir pour les différences de perception des couleurs :**
Environ 8 % des hommes et 0,5 % des femmes présentent une forme de différence de perception des couleurs (souvent appelée « daltonisme »). Les types les plus courants sont :
- **Déuteranopie** : difficulté à distinguer le rouge et le vert
- **Protanopie** : le rouge apparaît plus sombre
- **Tritanopie** : difficulté avec le bleu et le jaune (rare)
**Stratégies de couleur inclusives :**
```css
/* ❌ Bad: Using only color to indicate status */
.error { color: red; }
.success { color: green; }
/* ✅ Good: Color plus icons and context */
.error {
color: #d32f2f;
border-left: 4px solid #d32f2f;
}
.error::before {
content: "⚠️";
margin-right: 8px;
}
.success {
color: #2e7d32;
border-left: 4px solid #2e7d32;
}
.success::before {
content: "✅";
margin-right: 8px;
}
```
**Au-delà des exigences de contraste de base :**
- Testez vos choix de couleur avec des simulateurs pour daltoniens
- Utilisez des motifs, textures ou formes en plus du code couleur
- Assurez-vous que les états interactifs restent distincts sans couleur
- Considérez l’apparence de votre design en mode contraste élevé
✅ **Testez l’accessibilité de vos couleurs** : Utilisez des outils comme [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) pour voir comment votre site apparaît aux utilisateurs avec différents types de perception des couleurs.
### Indicateurs de focus et design d’interaction
Les indicateurs de focus sont l’équivalent numérique d’un curseur — ils montrent aux utilisateurs clavier où ils se trouvent sur la page. Des indicateurs de focus bien conçus améliorent l’expérience pour tous en rendant les interactions claires et prévisibles.
**Bonnes pratiques modernes pour les indicateurs de focus :**
```css
/* Enhanced focus styles that work across browsers */
button:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.25);
}
/* Remove focus outline for mouse users, preserve for keyboard users */
button:focus:not(:focus-visible) {
outline: none;
}
/* Focus-within for complex components */
.card:focus-within {
box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.5);
border-color: #4A90A4;
}
/* Ensure focus indicators meet contrast requirements */
.custom-focus:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 2px;
box-shadow: 0 0 0 6px #000000;
}
```
**Exigences pour l’indicateur de focus :**
- **Visibilité** : doit avoir un rapport de contraste d’au moins 3:1 avec les éléments environnants
- **Largeur** : épaisseur minimale de 2 px autour de l’élément entier
- **Persistance** : doit rester visible jusqu’à ce que le focus se déplace ailleurs
- **Distinction** : doit être visuellement différent des autres états de l’interface utilisateur
> 💡 **Astuce design** : Les excellents indicateurs de focus utilisent souvent une combinaison de contour, ombre portée et changements de couleur pour assurer la visibilité sur différents fonds et contextes.
✅ **Vérifiez vos indicateurs de focus** : Naviguez au clavier sur votre site et notez quels éléments disposent d’indicateurs de focus clairs. Certains sont-ils difficiles à voir ou totalement absents ?
### HTML sémantique : la base de l’accessibilité
Le HTML sémantique, c’est un GPS pour les technologies d’assistance sur votre site web. Lorsque vous utilisez les bons éléments HTML pour leur usage prévu, vous fournissez aux lecteurs d’écran, claviers et autres outils une carte détaillée pour aider les utilisateurs à naviguer efficacement.
Voici une analogie qui m’a beaucoup parlé : le HTML sémantique est la différence entre une bibliothèque bien organisée avec des catégories claires et des panneaux utiles, et un entrepôt où les livres sont dispersés au hasard. Les deux lieux ont les mêmes livres, mais lequel préféreriez-vous pour trouver quelque chose ? Exactement !
```mermaid
flowchart TD
A[🏠 Document HTML] --> B[📰 en-tête]
A --> C[🧭 nav]
A --> D[📄 principal]
A --> E[📋 pied de page]
B --> B1[h1 : Nom du site Logo & image de marque]
C --> C1[ul : Navigation Liens principaux]
D --> D1[article : Contenu section : Sous-sections]
D --> D2[aside : Barre latérale Contenu connexe]
E --> E1[nav : Liens du pied de page Infos copyright]
D1 --> D1a[h1 : Titre de la page h2 : Sections majeures h3 : Sous-sections]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
```
**Blocs fondamentaux de la structure accessible d’une page :**
```html
Your Site Name
Article Title
Published on
First Section
Content that relates to this section...
Second Section
More related content...
```
**Pourquoi le HTML sémantique transforme l’accessibilité :**
| Élément sémantique | But | Avantage pour lecteur d’écran |
|--------------------|-----|-------------------------------|
| `` | En-tête de page ou de section | « Point de repère bannière » – navigation rapide vers le haut |
| `