Utiliser des éléments de section HTML5 équivalents (préférable).
Utiliser des attributs de rôle de point de repère ARIA s’il est impossible d’utiliser des éléments de section HTML5.
S’assurer que tout le contenu de la page se trouve dans une région de point de repère.
S’assurer de la présence d’un seul cas de:
role="banner" ou <header> (lorsque <header> est un enfant de <body>). Un <header> n’est pas considéré comme une bannière lorsqu’il s’agit de l’enfant de <article>, <aside>, <main>, <nav> ou <section>.
<footer>
<main>
S’assurer que <header> (quand il s’agit de la bannière), <footer>, <main> sont des enfants directs de <body>.
Limiter l’utilisation de <nav> aux navigations primaires et secondaires.
Utiliser l’attribut aria-label pour différencier plusieurs éléments <nav> (différents).
Utiliser l’attribut aria-labelledby pour étiqueter une région <nav> qui commence par un élément d’en-tête.
Fournir des étiquettes courtes et descriptives.
Le rôle du point de repère est énoncé par un lecteur d’écran avec le nom, le cas échéant. Ne pas utiliser le rôle de point de repère (p. ex., « navigation ») dans le nom; par exemple, l’étiquette est « site » et non « navigation du site » pour un point de repère de navigation.
Utiliser role="search" plutôt que role="form" lorsque le formulaire est utilisé pour la fonction de recherche.
En-têtes
Fournir des en-têtes pour chaque page.
Utiliser les éléments <h1> - <h6> pour tous les en-têtes.
Ne pas utiliser d’éléments d’en-tête pour du texte qui n’est pas un en-tête. Utilisez plutôt CSS pour modifier la taille ou les styles de police de caractère.
S’assurer que les en-têtes sont concis et significatifs (ils décrivent le sujet ou le but).
S’assurer que les en-têtes suivent une séquence hiérarchique sans sauter aucun niveau.
Fournir un en-tête& h1 qui décrit le contenu de la page.
Structure du contenu
S’assurer qu’un élément <article> est utilisé dans une page Web pour la composition autonome.
Pour le regroupement thématique du contenu, s’assurer que l’élément <section> est utilisé.
Uutiliser l’élément paragraphe (<p>) pour les paragraphes.
Utilisation de citations :
Pour les citations plus longues et plus complexes, utiliser l’élément <blockquote>.
Pour les citations courtes, qui sont habituellement intégrées à une autre phrase, utiliser l’élément de citation incluse par référence <q>.
Pour indiquer que le contenu a une grande importance ou urgence, utiliser l’élément <strong>.
Pour les mots pour lesquels il faut souligner l’importance par rapport au texte environnant, utiliser l’élément <em>.
Quand vous utilisez une abréviation pour la première fois sur une page, indiquez ce que signifie le terme complet entre parenthèses, ou alors inscrivez le terme complet suivi de l’abréviation entre parenthèses.
Assurez-vous que chaque page Web définit son sujet ou son objectif dans un titre descriptif. Définir le titre dans un <title> élément dans le HTML <head> élément. Vous pouvez également indiquer le plus grand recueil de pages Web après la description de la page.
Lorsque vous formulez des instructions sur l’endroit où trouver ou sur la manière d’utiliser du contenu, évitez les descriptions qui reposent exclusivement sur la capacité de voir ou d’entendre. Inclure une étiquette textuelle dans les instructions et au niveau de l’élément présentant un intérêt.
Langue
Ajouter un attribut lang à l’élément <html> pour définir la langue par défaut pour toute la page.
Pour l’anglais : <html lang="en">.
Pour le français : <html lang="fr">.
Pour les autres langues, choisir le code de langue approprié à partir de la norme ISO-639. Utiliser le code de langue le plus court.
Vous pouvez ajouter une étiquette secondaire de région si vous avez besoin d'indiquer qu'il s'agit de la langue telle qu'elle est parlée quelque part dans une région particulière ; par exemple, lang="fr-CA" indique le français tel qu'il est parlé au Canada.
Insérez un attribut lang partout où la langue par défaut change.
En XHTML, utiliser l’attribut lang et l’attribut xml:lang.
Listes
HTML fournit trois structures de liste, chacune comportant une sémantique spécifique :
Utiliser des listes non ordonnées (<ul>) lorsque l’ordre des éléments n’est pas pertinent. Chaque élément de liste (<li>) dans une liste non ordonnée est marqué d’une puce.
Utiliser les listes ordonnées (<ol>) pour des renseignements séquentiels, lorsque l’ordre des éléments est pertinent. Chaque élément de liste (<li>) est numéroté par le navigateur.
Utiliser les listes de descriptions (<dl>) pour regrouper les termes associés (<dt>) et leurs descriptions (<dd>).
iFrames
Si l’iFrame est composé d’images décoratives ou de JavaScript, masquez-le des lecteurs d’écran en réglant l’attribut aria-hidden="true" sur l’élément iframe.
Si l’iFrame contient du contenu destiné à l’utilisateur :
Attribuer à l’élément iframe une valeur d’attribut de title descriptif.
S’assurer que la valeur de l’attribut de titleiFrame est unique dans tous les iFrames de la page.
Analyse syntaxique et validité
Les éléments ont des balises de début et de fin complètes.
Les éléments sont imbriqués selon leurs spécifications.
Les éléments ne contiennent pas d’attributs en double.