Créer des ressources accessibles : Extraits/code HTML
Lorsque vous ajoutez du code HTML personnalisé ou des extraits à votre site web, l’accessibilité doit être une considération essentielle. Un code mal structuré peut créer des obstacles pour les utilisateurs utilisant des technologies d’assistance. Cet article explique comment rédiger un code HTML propre et sémantique qui favorise l’accessibilité. Il aborde des éléments tels que les rôles ARIA, l’utilisation correcte des balises et la conception adaptée au clavier afin de garantir que votre code personnalisé fonctionne pour tous les visiteurs.
Pour vous assurer que votre site web, votre page d’atterrissage, votre formulaire ou votre message répond aux exigences d’accessibilité, utilisez la liste de contrôle disponible ici.
Veuillez noter que nous n’offrons pas d’assistance supplémentaire en ce qui concerne le langage HTML. Assurez-vous d’être à l’aise avec le codage ou d’avoir un développeur à consulter.
Exigences
Iframes
- L’attribut title de l’iframe (sur la page mère) doit être précis et descriptif.
- La page source d’une iframe (la page intégrée dans l’iframe) doit avoir un
<title>valide et significatif.
Points de repère
- Les lecteurs d’écran permettent aux utilisateurs de naviguer à l’aide de points de repère. Les points de repère sont donc un moyen efficace de contourner les blocs de contenu, comme l’exigent les WCAG 2.4.1.
- Les points de repère peuvent être désignés par des balises HTML ou par leurs rôles ARIA équivalents (par exemple,
<header>ourôle="bannière",<nav>ourôle="navigation",<main>ourôle="principal",<footer>ourôle="contentinfo", etc.)
Langue
- La langue principale de la page doit être identifiée avec précision à l’aide d’un code de langue standard sur l’élément, par exemple :
<html lang="en">,<html lang="fr">.
- Les changements de langue en ligne DOIVENT être identifiés par un attribut lang valide.
Listes
- Les listes doivent être construites en utilisant le balisage sémantique approprié, c’est-à-dire :
<ul>ou<ol>avec des éléments enfants<li>,- ou
<dl>avec des éléments enfants<dt>et<dd>.
Tableaux
- Les en-têtes de tableaux doivent être désignés par
<th>. - Le texte de l’en-tête du tableau de données doit décrire avec précision la catégorie des cellules de données correspondantes.
- Les cellules de données du tableau doivent être associées aux cellules d’en-tête correspondantes.
- L’utilisation de la portée
(<th scope="col">et<th scope="row">)est fortement recommandée, bien qu’elle ne soit pas toujours nécessaire. Si toutes les cellules de la première ligne sont marquées comme<th>sans portée, la plupart des lecteurs d’écran modernes en déduiront que la portée est la colonne située sous chaque cellule d’en-tête.
- L’utilisation de la portée
- Les en-têtes des groupes de données du tableau (s’il y en a) doivent être associés à leurs groupes de cellules de données correspondants (par exemple, via
scope="rowgroup"ou scope="colgroup"). - Les associations d’en-têtes et de données qui ne peuvent pas être désignées par les attributs
<th>et scope doivent être désignées par les attributs header et id. - Les en-têtes de tables de données et les associations de données ne doivent pas être référencés dans des tables imbriquées, fusionnées ou séparées.
Exceptions
Modifications linguistiques en ligne
Des exceptions sont autorisées pour
- les noms propres,
- les termes techniques,
- les mots de langue indéterminée,
- et les mots ou expressions qui font désormais partie de la langue vernaculaire du texte immédiatement environnant.
Exemples
 | OUI: Le titre ajouté à l’iframe expliquera l’objectif du contenu. |
 | OUI: Repères correctement marqués qui permettent aux utilisateurs de naviguer par les uns et les autres. |
 | OUI: Le fragment de code suivant illustre un code typique de l’utilisation de l’entrée /Lang pour remplacer la langue par défaut du document en spécifiant une séquence de contenu marqué dans le flux de contenu d’une page. |
 | OUI: Liste d’éléments correctement marqués. |
 | NON: Dans cet exemple, des en-têtes imbriqués sont utilisés, mais les cellules de contenu sont incorrectement associées via les attributs id et headers. Toutes les cellules font référence à l’en-tête de premier niveau “Examens”(id="e") – ce qui n’est pas correct pour les trois dernières colonnes qui devraient faire référence à l’en-tête “Projets”. De même, le référencement des en-têtes de colonne de deuxième niveau a été accidentellement interverti même si, dans cet exemple, cela ne fait aucune différence puisque les contenus (1, 2, Final) sont répétés. |