Module 4 : Accessibilité Web - Rendre son site accessible au plus grand nombre

Introduction

L'accessibilité web consiste à rendre vos sites web utilisables par le plus grand nombre de personnes possible. Bien qu'on pense souvent que cela concerne uniquement les personnes ayant un handicap, l'accessibilité bénéficie également à d'autres groupes, comme les utilisateurs d'appareils mobiles ou ceux ayant des connexions internet de faible débit.

Plusieurs types de handicaps peuvent être concernés par l'accessibilité d'une application :

Les personnes ayant des troubles de la vue
Les personnes ayant des troubles de l'audition
Les personnes ayant des troubles de la mobilité
Les personnes ayant des déficiences cognitives

Objectifs du cours

Comprendre les principes fondamentaux de l'accessibilité web
Connaître la norme WCAG 2.1 et ses niveaux de conformité
Appliquer les critères de programmation HTML/CSS pour l'accessibilité
Créer des liens de navigation cachés pour les lecteurs d'écran
Utiliser les attributs ARIA pour améliorer l'accessibilité
Utiliser un outil de vérification de l'accessibilité comme Silktide (chrome extension)

Démo utilisée dans ce cours

Télécharger la démo utilisée pour la présentation des théories et des erreurs d'accessibilité dans ce cours :

📦 Démo 1 : validation HTML et tests d'accessibilité

Théorie

Les standards d'accessibilité - Norme WCAG 2.1

Définition

La norme WCAG 2.1 (Web Content Accessibility Guidelines) est un guide établi par le W3C (World Wide Web Consortium) qui vise à améliorer l'accessibilité des sites web, des applications mobiles et des autres contenus numériques.

WCAG 2.1 : Documentation officielle

Niveaux de conformité

Cette norme comporte 3 niveaux de conformité :

Niveau	Description
A	Critères essentiels qui doivent être respectés pour garantir l'accessibilité minimale.
AA	Critères qui corrigent les problèmes d'accessibilité courants. Souvent exigés dans des contextes officiels (sites gouvernementaux).
AAA	Critères les plus stricts, recommandés pour une accessibilité optimale, mais non obligatoires pour tous les types de contenu.

Voici quelques exemples de critères pour le niveau WCAG 2.1 AA (mais il y en a beaucoup d'autres) :

Critère	Description
Texte alternatif pour les images	Fournir un texte alternatif descriptif pour toutes les images.
Contraste des couleurs	Assurer un contraste suffisant entre le texte et l'arrière-plan (ratio minimum de 4.5:1 pour le texte normal).
Navigation au clavier	Garantir que toutes les fonctionnalités sont accessibles via le clavier.
Focus visible	Assurer qu'un indicateur de focus visible est présent lors de la navigation au clavier.
Lien caché pour le contenu principal	Fournir un lien permettant de sauter directement au contenu principal.

Note

Dans le cadre de ce cours, nous visons en général le niveau AA de conformité et nous nous concentrons sur certains critères spécifiques pour garantir une accessibilité de base.

Outils de Validation HTML et de l'accessibilité

Afin de s'assurer que votre site web respecte les normes d'accessibilité, il est crucial de valider votre code HTML et de tester l'accessibilité de vos pages web.

Nous allons utiliser deux outils complémentaires pour cela.

1) Extension W3C Web Validator dans Vs Code

Extention W3C validator dans Vs Code

Il installer (si ce n'es pas déjà fait) l'extension W3C Web Validator dans Vs Code pour valider votre code HTML et CSS. Cela vous aidera à identifier et corriger les erreurs de syntaxe, ce que Silktide ne fait pas aussi bien.

Extention W3C Web Validator

2) Extension Silktide pour Chrome

Outil d'aide à valider l'accessibilité d'un site

À partir d'ici, nous allons utilisez l'extension pour Chrome Silktide pour analyser l'accessibilité de votre site web. Elle fournit des rapports détaillés et des recommandations pour améliorer l'accessibilité selon les normes WCAG.

Silktide Chrome Extension

Méthode de travail :

Lors de vos développements, utilisez la méthode suivante pour vérifier la validité de votre code HTML et l'accessibilité de vos pages web :

Valide le code HTML/CSS avec l'extension W3C Web Validator
Ensuite, teste l'accessibilité en général, ainsi que les critères spécifiques avec l'extension Silktide

1) Structure sémantique du HTML

L'utilisation de balises HTML sémantiques permet d'organiser correctement le contenu d'une page web. Cette structure aide les lecteurs d'écran à mieux comprendre la page et facilite la navigation pour tous les utilisateurs.

Balises sémantiques essentielles :

Balise	Rôle
`<header>`	En-tête de la page ou d'une section
`<nav>`	Zone de navigation
`<main>`	Contenu principal de la page
`<section>`	Section thématique du contenu
`<article>`	Contenu autonome et réutilisable
`<aside>`	Contenu secondaire ou complémentaire
`<footer>`	Pied de page ou d'une section

Texte alternatif pour les images

L'attribut alt permet de décrire le contenu d'une image. Ce texte alternatif est lu par les lecteurs d'écran pour aider les utilisateurs malvoyants à comprendre le contenu visuel.

Syntaxe :

html

<img src="photo-equipe.jpg" alt="L'équipe de développement réunie dans la salle de conférence">

Formulaires accessibles

Un formulaire accessible utilise l'élément <label> pour associer chaque champ à son intitulé. Cette association permet aux lecteurs d'écran d'identifier clairement les champs et leur objectif.

Syntaxe correcte :

html

<form>
    <label for="email">Adresse email</label>
    <input type="email" id="email" name="email">
    
    <label for="password">Mot de passe</label>
    <input type="password" id="password" name="password">
    
    <button type="submit">Se connecter</button>
</form>

Important : L'attribut for du <label> doit correspondre exactement à l'attribut id du champ associé.

Exemple complet avec fieldset, legend et radio buttons :

html

<form action="#" method="POST">
    <fieldset>
        <legend>Informations personnelles</legend>
        
        <label for="nom">Nom complet</label>
        <input type="text" id="nom" name="nom" required>
        
        <label for="courriel">Courriel</label>
        <input type="email" id="courriel" name="courriel" required>
        
        <label for="telephone">Téléphone</label>
        <input type="tel" id="telephone" name="telephone">

        <radio-group>
            <label for="genre-homme">
                <input type="radio" id="genre-homme" name="genre" value="homme"> Homme
            </label>
            <label for="genre-femme">
                <input type="radio" id="genre-femme" name="genre" value="femme"> Femme
            </label>
            <label for="genre-autre">
                <input type="radio" id="genre-autre" name="genre" value="autre"> Autre
            </label>
    </fieldset>
    
    <button type="submit">Envoyer</button>
</form>

Points importants

Structure sémantique : Utilisez toujours des balises sémantiques plutôt que des <div> génériques
Images : Toutes les images doivent avoir un attribut alt ; les images décoratives utilisent alt=""
Formulaires : Chaque champ doit avoir un <label> associé avec for et id correspondants, même pour les boutons radio et cases à cocher
Utilisez <fieldset> et <legend> pour regrouper les champs connexes
L'attribut required indique les champs obligatoires
Utilisez les types de champs appropriés (email, tel, number, etc.)

Voir démo1

Utiliser le plugin W3C Web Validator pour valider le code HTML de la démo1 fournie. Constater et corriger les erreurs de structure sémantique, syntaxes, ou autres.

2) Contraste de couleur suffisant

Définition

Un contraste suffisant entre le texte et l'arrière-plan permet aux utilisateurs malvoyants de lire le contenu plus facilement. La norme WCAG définit des ratios de contraste minimaux à respecter.

Ratios de contraste minimaux (niveau AA)

Type de texte	Ratio minimum
Texte normal (< 18pt ou < 14pt gras)	4.5:1
Texte grand (≥ 18pt ou ≥ 14pt gras)	3:1
Éléments d'interface (boutons, icônes)	3:1

Outils de vérification

Utilisez des outils comme le WCAG Contrast Checker pour tester vos combinaisons de couleurs :

Exemples de contrastes

css

/* ✅ Bon contraste */
body {
    background-color: #ffffff;
    color: #333333; /* Ratio environ 12:1 */
}

/* ❌ Contraste insuffisant */
.texte-faible {
    background-color: #f0f0f0;
    color: #a0a0a0; /* Ratio environ 2:1 - INSUFFISANT */
}

Points importants

Testez toujours vos combinaisons de couleurs avec un outil de vérification
Le ratio 4.5:1 est le minimum pour le texte normal
Pensez aux modes sombre et clair si votre site les propose

Voir démo1

Utiliser Silktide pour analyser la démo1 fournie. Identifier les problèmes de contraste de couleur et ajuster les styles CSS pour respecter les ratios minimaux.

3) Focus visible

Définition

Lorsqu'un utilisateur navigue avec le clavier (touche Tab), l'élément actuellement sélectionné doit être visiblement mis en surbrillance. Cela permet une navigation claire pour les utilisateurs qui n'utilisent pas la souris. Généralement, le navigateur applique un style de focus par défaut (souvent un contour autour de l'élément), mais il faut quand même le tester au cas où.

Exemple pratique

css

/* Style par défaut pour le focus */
input:focus,
button:focus,
a:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

/* Style personnalisé pour les champs de formulaire */
input:focus {
    background-color: #f0f8ff;
    border-color: #0066cc;
}

/* Style pour les liens */
a:focus {
    background-color: #ffffcc;
    color: #000000;
}

Bonnes pratiques

css

/* ✅ Bonne pratique : Focus visible personnalisé */
button:focus {
    outline: 3px solid #ff6600;
    outline-offset: 2px;
}

/* ❌ À éviter : Supprimer le focus sans alternative */
button:focus {
    outline: none; /* MAUVAIS : rend la navigation au clavier impossible */
}

Points importants

Ne jamais supprimer le style de focus sans fournir une alternative visible
Le focus doit avoir un contraste suffisant avec l'arrière-plan
Testez la navigation au clavier pour vérifier la visibilité du focus

4) Lien caché pour accéder au contenu principal

Définition

Un lien caché (ou "skip link") permet aux utilisateurs de lecteurs d'écran de sauter directement au contenu principal, évitant ainsi de parcourir la navigation à chaque page. Ce lien est invisible visuellement mais accessible par les technologies d'assistance.

Mise en place en 3 étapes

Étape 1 : Créer le lien HTML

Le lien doit être le premier élément rencontré dans le code, placé avant l'en-tête du site :

html

<body>
    <a href="#contenu">
        <span class="texte-pour-lecteur">Aller au contenu principal</span>
    </a>
    
    <header>
        <h1>Mon Site</h1>
        <nav>
            <!-- Navigation... -->
        </nav>
    </header>
    
    <main id="contenu">
        <h2>Titre de la page</h2>
        <!-- Contenu principal... -->
    </main>
</body>

Étape 2 : Créer la classe CSS pour cacher le lien

css

.texte-pour-lecteur {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

Étape 3 : Ajouter l'ID au contenu principal

html

<main id="contenu">
    <h2>Bienvenue sur notre site</h2>
    <!-- Contenu de la page... -->
</main>

Important : L'ID du <main> doit correspondre exactement à l'ancre du lien (#contenu).

Pourquoi cette classe CSS spécifique ?

Méthode	Effet sur les lecteurs d'écran
`display: none`	L'élément est complètement ignoré par les lecteurs d'écran
`.texte-pour-lecteur`	L'élément reste accessible aux lecteurs d'écran tout en étant invisible

La classe .texte-pour-lecteur utilise clip, clip-path et position: absolute pour cacher visuellement l'élément tout en le gardant dans le flux du document, permettant ainsi aux lecteurs d'écran d'y accéder. Vous n'avez pas à apprendre cette technique par cœur, mais il est important de comprendre son utilité. Vous pouvez réutiliser cette classe telle quelle dans vos projets.

Points importants

Le lien doit être le premier élément interactif de la page
Ne pas utiliser display: none pour cacher le lien
L'ancre doit pointer vers le <main> ou le contenu principal

Démo1

Utiliser Silktide pour analyser la démo1 fournie. Vérifier la présence du lien caché et son bon fonctionnement avec un lecteur d'écran. Si il est absent, l'ajouter selon les étapes décrites ci-dessus.

5) Attributs ARIA pour les éléments d'interface

Définition

Les attributs ARIA (Accessible Rich Internet Applications) fournissent des informations supplémentaires aux lecteurs d'écran. Ils sont particulièrement importants pour les éléments d'interface qui permettent à l'utilisateur d'interagir avec le site.

Dans notre cours, c'est particulièrement important pour les éléments suivants : <nav>, <main>, et <form> car on désire que les liseurs d'écran comprennent bien le rôle de ces sections et puissent correctement les identifier.

Les 3 éléments essentiels à cibler

1. La navigation <nav>

html

<nav aria-label="Navigation principale">
    <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Comment ça se traduit avec le liseur d'écran :

Lorsque le lecteur d'écran arrive sur la page, l'attribut aria-label="Navigation principale" informe le lecteur d'écran que cette section conserne la "Navigation principale" du site. Cela permet à l'utilisateur (par exemple aveugle) d'entendre la structure de la page et surtout de savoir qu'il est actuellement positionné dans la section de navigation principale, ce qui lui permet d'accéder aux autres pages du site.

Si vous avez plusieurs navigations sur la page :

html

<nav aria-label="Navigation principale">
    <!-- Menu principal -->
</nav>

<nav aria-label="Navigation secondaire">
    <!-- Menu secondaire ou pied de page -->
</nav>

2. Le contenu principal <main>

html

<main id="contenu" aria-label="Contenu principal">
    <section>
        <h2>Titre de la section</h2>
        <p>Contenu de la section...</p>
    </section>
</main>

Comment ça se traduit avec le liseur d'écran : Lorsque le lecteur d'écran arrive sur la page, l'attribut aria-label="Contenu principal" informe le lecteur d'écran que cette section est le "Contenu principal" de la page. Cela permet à l'utilisateur de savoir qu'il est maintenant dans la partie principale du site où se trouve l'information principale qu'il recherche.

3. Les formulaires <form>

html

<form action="#" method="POST" aria-label="Formulaire de contact">
    <fieldset>
        <legend>Formulaire de contact</legend>
        
        <label for="nom">Nom</label>
        <input type="text" id="nom" name="nom" required>
        
        <label for="message">Message</label>
        <textarea id="message" name="message" required></textarea>
        
        <button type="submit">Envoyer</button>
    </fieldset>
</form>

Comment ça se traduit avec le liseur d'écran : Lorsque le lecteur d'écran arrive sur la page, l'attribut aria-label="Formulaire de contact" informe le lecteur d'écran que cette section est un "Formulaire de contact". Cela permet à l'utilisateur de savoir qu'il est rendu au formulaire où il pourra alors saisir des champs.

Points importants

aria-label fournit une description textuelle pour les lecteurs d'écran
Utilisez des descriptions claires et concises
Les attributs ARIA ne remplacent pas une structure HTML sémantique correcte

Démo1

Utiliser Silktide pour analyser la démo1 fournie. Vérifier la présence des attributs aria-label sur les éléments <nav>, <main>, et <form>. Si ils sont absents, les ajouter selon les exemples décrits ci-dessus.

Résumé

Bien que les normes WCAG 2.1 AA comportent de nombreux critères d'accessibilité à respecter, dans le cadre de la correction des travaux de ce cours, nous nous concentrerons principalement sur quatre aspects essentiels :

Code HTML/CSS valide : Le code doit passer la validation d'un outil standard comme le validateur W3C, assurant une structure sémantique correcte et l'absence d'erreurs de syntaxe.
Contraste des couleurs : Respecter un ratio de contraste d'au moins 4.5:1 pour le texte normal, garantissant une lisibilité suffisante pour tous les utilisateurs.
Lien caché (skip link) : Présence d'un lien caché au début de la page permettant aux utilisateurs de lecteurs d'écran d'accéder directement au contenu principal (<main>).
Attributs ARIA descriptifs : Utilisation d'aria-label sur les éléments clés comme la navigation (<nav>) et les formulaires (<form>) pour améliorer la compréhension par les technologies d'assistance.

Ces quatre points représentent les critères prioritaires pour l'évaluation de l'accessibilité dans vos projets, tout en encourageant une prise de conscience des autres aspects de l'accessibilité web.

Exercices pratiques

Exercice 1 : Rendre une page accessible

Énoncé

Vous devez corriger une page HTML existante pour la rendre conforme aux normes d'accessibilité WCAG 2.1 niveau AA. La page contient plusieurs erreurs d'accessibilité que vous devez identifier et corriger.

Fichiers à télécharger

📦 Télécharger les fichiers de départ

Critères d'évaluation

Code HTML valide selon W3C
Contraste suffisant (vérifiez avec un outil comme WebAIM)
Présence du skip link
Attributs ARIA corrects sur les balises nav, main et form
Formulaires accessibles avec labels
Navigation au clavier fonctionnelle

Finalement

Autre l'aspect de l'accessibilité, cette page mériterait d'être plus visuellement attrayante. Proposez des changements afin de la rendre plus vivante, peut-être même avec quelques animations ? 😃

Vérifications des connaissances

Testez vos connaissances acquises dans ce cours en répondant aux questions suivantes. Cliquez sur chaque question pour révéler la réponse.

Question 1

Quels sont les trois niveaux de conformité de la norme WCAG 2.1 ?

Réponse

Les trois niveaux sont :

A : Critères essentiels pour l'accessibilité minimale
AA : Critères corrigeant les problèmes courants (niveau recommandé)
AAA : Critères les plus stricts pour une accessibilité optimale

Question 2

Quel est le ratio de contraste minimum recommandé pour le texte normal selon la norme WCAG niveau AA ?

Réponse

Le ratio de contraste minimum pour le texte normal est de 4.5:1. Pour le texte grand (18pt ou plus), le ratio minimum est de 3:1.

Question 3

Pourquoi ne doit-on pas utiliser display: none pour cacher un lien destiné aux lecteurs d'écran ?

Réponse

L'utilisation de display: none retire complètement l'élément du flux du document, ce qui le rend invisible pour les lecteurs d'écran. Pour cacher visuellement un élément tout en le gardant accessible, il faut utiliser une technique comme clip, clip-path et position: absolute.

Question 4

Quelle est la syntaxe correcte pour associer un label à un champ de formulaire ?

Réponse

L'attribut for du <label> doit correspondre à l'attribut id du champ :

html

<label for="email">Adresse email</label>
<input type="email" id="email" name="email">

Question 5

À quoi sert l'attribut aria-label ?

Réponse

L'attribut aria-label fournit une description textuelle d'un élément aux technologies d'assistance comme les lecteurs d'écran. Il est particulièrement utile pour les éléments d'interface comme <nav>, <main> et <form>.

html

<nav aria-label="Navigation principale">

Question 6

Pourquoi est-il important de conserver un style de focus visible sur les éléments interactifs ?

Réponse

Le style de focus permet aux utilisateurs qui naviguent au clavier (touche Tab) de savoir quel élément est actuellement sélectionné. Supprimer ce style sans alternative rend la navigation impossible pour ces utilisateurs.

Question 7

Quelle doit être la position du lien "Aller au contenu principal" dans le code HTML ?

Réponse

Le lien doit être le premier élément interactif de la page, placé avant l'en-tête (<header>). Cela permet aux utilisateurs de lecteurs d'écran de le trouver immédiatement.

html

<body>
    <a href="#contenu">
        <span class="texte-pour-lecteur">Aller au contenu principal</span>
    </a>
    <header>...</header>
</body>

Question 8

Quelles sont les balises HTML sémantiques principales pour structurer une page web ?

Réponse

Les balises sémantiques principales sont :

<header> : En-tête de la page
<nav> : Zone de navigation
<main> : Contenu principal
<section> : Section thématique
<article> : Contenu autonome
<aside> : Contenu secondaire
<footer> : Pied de page

Question 9

Quels sont les trois éléments HTML sur lesquels il est essentiel d'ajouter un aria-label ?

Réponse

Les trois éléments essentiels sont :

<nav> : pour identifier le type de navigation
<main> : pour identifier le contenu principal
<form> : pour décrire l'objectif du formulaire

html

<nav aria-label="Navigation principale">
<main aria-label="Contenu principal">
<form aria-label="Formulaire de contact">

Module 4 : Accessibilité Web - Rendre son site accessible au plus grand nombre ​

Introduction ​

Objectifs du cours ​

Démo utilisée dans ce cours ​

Théorie ​

Les standards d'accessibilité - Norme WCAG 2.1 ​

Définition ​

Niveaux de conformité ​

Outils de Validation HTML et de l'accessibilité ​

1) Extension W3C Web Validator dans Vs Code ​

2) Extension Silktide pour Chrome ​

Méthode de travail : ​

1) Structure sémantique du HTML ​

Texte alternatif pour les images ​

Formulaires accessibles ​

Points importants ​

2) Contraste de couleur suffisant ​

Définition ​

Ratios de contraste minimaux (niveau AA) ​

Outils de vérification ​

Exemples de contrastes ​

Points importants ​

3) Focus visible ​

Définition ​

Exemple pratique ​

Bonnes pratiques ​

Points importants ​

4) Lien caché pour accéder au contenu principal ​

Définition ​

Mise en place en 3 étapes ​

Pourquoi cette classe CSS spécifique ? ​

Points importants ​

5) Attributs ARIA pour les éléments d'interface ​

Définition ​

Les 3 éléments essentiels à cibler ​

Points importants ​

Résumé ​

Exercices pratiques ​

Exercice 1 : Rendre une page accessible ​

Énoncé ​

Fichiers à télécharger ​

Critères d'évaluation ​

Finalement ​

Vérifications des connaissances ​

Question 1 ​

Question 2 ​

Question 3 ​

Question 4 ​

Question 5 ​

Question 6 ​

Question 7 ​

Question 8 ​

Question 9 ​

Module 4 : Accessibilité Web - Rendre son site accessible au plus grand nombre

Introduction

Objectifs du cours

Démo utilisée dans ce cours

Théorie

Les standards d'accessibilité - Norme WCAG 2.1

Définition

Niveaux de conformité

Outils de Validation HTML et de l'accessibilité

1) Extension W3C Web Validator dans Vs Code

2) Extension Silktide pour Chrome

Méthode de travail :

1) Structure sémantique du HTML

Texte alternatif pour les images

Formulaires accessibles

Points importants

2) Contraste de couleur suffisant

Définition

Ratios de contraste minimaux (niveau AA)

Outils de vérification

Exemples de contrastes

Points importants

3) Focus visible

Définition

Exemple pratique

Bonnes pratiques

Points importants

4) Lien caché pour accéder au contenu principal

Définition

Mise en place en 3 étapes

Pourquoi cette classe CSS spécifique ?

Points importants

5) Attributs ARIA pour les éléments d'interface

Définition

Les 3 éléments essentiels à cibler

Points importants

Résumé

Exercices pratiques

Exercice 1 : Rendre une page accessible

Énoncé

Fichiers à télécharger

Critères d'évaluation

Finalement

Vérifications des connaissances

Question 1

Question 2

Question 3

Question 4

Question 5

Question 6

Question 7

Question 8

Question 9