Comment faire accessibilité et éco-conception @Démo publique

Fiche: Accessibilité et HTML sémantique

Le tableau des éléments

Toujours appliquer strictement la première règle ARIA. Si vous pouvez utiliser un élément ou un attribut HTML natif avec la sémantique et le comportement dont vous avez besoin déjà intégrés, au lieu de réutiliser un élément et d'ajouter un rôle ARIA, un état ou une propriété pour le rendre accessible, alors faites-le.

Résumé des différents éléments sémantiques utilisés en HTML (et structuration de pages) avec une approche accessibilité
Élement Sémantique / Fonctionnalité Commentaires
<a> Définit un lien si un attribut href non vide est présent. Définit, de fait, un élément vers lequel on va. Assurez-vous que l'élément fonctionne comme un lien : il permet à l'utilisateur d'accéder à une autre page/fichier ou à un autre emplacement au sein de la page. Assurez-vous que le lien peut être navigué et activé au clavier et qu'il possède un indicateur de focus visible. Il doit contenir un contenu qui décrit la fonction du lien. Sa fonction et sa destination doivent être parfaitement lisibles et compréhensibles.
<abbr> Représente une abréviation ou un acronyme. La valeur de l'attribut <abbr title> est présentée aux technologies d'assistance. La meilleure pratique consiste à écrire les acronymes et les abréviations en texte lors de leur première occurrence plutôt que d'utiliser <abbr>.
<area> Définit un point d'accès dans une carte d'image (définie avec <map>). Doit avoir une valeur d'attribut alt qui décrit le contenu/la fonction du point d'accès.
<article> et <section> Éléments de structure logique et documentaire qui permettent de structurer un contenu. Chaque élément article et section devant être accompagné d'un titre (élément <hn>). Utilisez-les principalement pour le style visuel et l'analyse de contenu. Utilisez <main> à la place pour le contenu principal.
<aside> Contient un contenu de barre latérale ou un appel qui est indirectement lié à l'élément <main>. C'est une région / élément Landmark. Utilisez uniquement pour des informations périphériques ou de barre latérale, telles que des liens liés au contenu principal.
<button> Définit un élément interactif pour soumettre un formulaire ou effectuer une fonction. Assurez-vous que le bouton reste navigable au clavier et dispose d'un indicateur de focus visible. Doit contenir du contenu qui décrit la fonction du bouton. Utilisez <a href> à la place si l'élément dirige l'utilisateur vers une autre page ou un autre emplacement dans la même page.
<caption> Définit une légende ou un titre pour un <table>. FigCaption doit être utilisé pour la légende d'image (<figure>). Si une <table> posséde (ou devrait posséder) une description, associez ce texte à la table avec <caption>.
<details> Crée un widget de divulgation dans lequel l'information n'est visible que lorsque le widget est basculé dans un état "ouvert" Assurez-vous qu'un <summary> est présent et qui décrit ou résume le contenu de divulgation.
<dialog> Contient une boîte de dialogue ou un autre composant interactif. Assurez-vous que le focus est défini sur la boîte de dialogue lorsqu'elle apparaît. Si la boîte de dialogue peut être fermée, assurez-vous que les utilisateurs au clavier peuvent la fermer. La touche Échap devrait généralement fermer la boîte de dialogue. Assurez-vous que le focus clavier reste dans les boîtes de dialogue modales et que le focus est défini à un emplacement logique lorsque la boîte de dialogue est fermée.
<div> Un conteneur générique qui n'a pas de sémantique. Utilisez un autre élément sémantique si le contenu présente une sémantique. Utilisez <a href>, <button> ou un champ de formulaire pour les éléments interactifs. Ne doit pas être utilisé pour reproduire visuellement un élément HTML existant. Peut être doté de sémantique à l'aide de rôles ARIA lorsque HTML n'est pas suffisant.
<em> Marque le texte comme étant mis en évidence et affiche le texte en italique. Utilisez-le lorsque le texte nécessite une emphase (sinon des styles). À utiliser avec parcimonie – cela peut nuire à la lisibilité de longues sections de texte. Pas typiquement lu différemment par les lecteurs d'écran.
<fieldset> Groupe sémantiquement et visuellement un ensemble d'entrées liées, comme un groupe de boutons radio ou de cases à cocher. Doit généralement avoir une <legend> qui décrit l'ensemble des champs.
<figure> Contient une image, une illustration, un extrait, etc., qui est référencé dans le flux principal d'un document. Un attribut alt doit être fourni pour les images dans une figure, avec une <figcaption> qui fournit une légende ou un titre pour le contenu de la <figure>.
<footer> Contient le contenu du pied de page, tel que des données de copyright ou des liens connexes. C'est un élément de région / repère. À utiliser uniquement pour le contenu du pied de page. Typiquement un par page.
<h1>-<h6> Décrit une section de contenu et définit le niveau structurel de ce contenu. Assurez-vous que le titre décrit précisément le contenu qui suit. Les titres ne doivent jamais être vides. Une page doit généralement avoir un <h1> et ne doit pas sauter de niveaux de titres (par exemple, <h2> suivi de <h4>).
<header> Contient le contenu d'en-tête, les liens de navigation, le logo, la recherche, etc. C'est un élément de région / repère. Ne pas confondre avec les titres (<h1>, etc.). Utiliser uniquement pour le contenu d'en-tête. Typiquement une instance par page.
<iframe> Niche le contenu d'une autre page dans la page. Doit avoir une valeur d'attribut title qui décrit le contenu/la fonctionnalité du cadre en ligne, sauf si la présence de l'iframe est visuellement transparente pour l'utilisateur, le plus souvent avec un "display:none" dans le code (utiliser role="presentation" dans ce cas). Assurez-vous que le contenu dans l'iframe est accessible ou fournissez une alternative équivalente.
<input>, <select>, and <textarea> Définit un contrôle interactif pour accepter les données de l'utilisateur. Un <label> doit être utilisé pour associer un texte descriptif. Assurez-vous que l'entrée reste navigable au clavier et a un indicateur de focus visible.
<img> Intègre une image. Doit avoir une valeur d'attribut alt qui décrit le contenu et/ou la fonctionnalité de l'image. alt="" est demandé si l'image est décorative ou si le contenu est présenté près de l'image.
<label> Décrit la fonctionnalité/le but d'un <input>, <select> ou <textarea>. Doit contenir un texte qui décrit l'entrée du formulaire. Pour associer <label> avec une entrée, utilisez des valeurs d'attribut for/id correspondantes. Obligatoire.
<legend> Décrit le contenu d'un<fieldset>. Utilisez uniquement dans <fieldset> pour décrire le regroupement des entrées de formulaire. Obligatoire
<li> Définit un élément au sein d'une <ol> ou <ul>. Le nombre d'éléments dans une liste est annoncé par les lecteurs d'écran. Doit être utilisé pour toute énumération (quelle que soit la nature de l'énumération). Assurez-vous que l'élément de liste n'est jamais vide. Faites attention à la complexité de l'imbrication des listes au sein des éléments de liste.
<main> Contient le contenu principal. C'est un élément de région / repère. Utilisez uniquement pour le contenu principal. Typiquement une instance par page.
<menu> Définit une liste non ordonnée d'éléments de menu. Sémantiquement identique à <ul>. Utilisez <ul> à la place, sauf si les éléments imbriqués sont des éléments de menu. Doit contenir au moins un <li>.
<meter> Représente une valeur scalaire dans un intervalle donné ou une valeur fractionnaire. Le tag peut être utilisée lorsqu'il est nécessaire d'afficher, par exemple, le niveau de la batterie, le volume de fluide / pression, la proportion de la population ayant le droit de voter, etc.
Pour utiliser le tag <meter> la valeur maximale doit être connue, ce n'est pas une bar de progression.
Toujours utiliser uen étiquette pour une bonne utilisation de l'accessibilité.
<nav> Contient des liens de navigation. C'est un élément de région / repère. Utilisez uniquement pour des groupes/listes de liens de navigation significatifs du site ou de la page. Typiquement 1 ou 2 instances par page.
<ol> Définit une liste ordonnée/hierarchique. Utilisez pour des listes où l'ordre des éléments impacte le sens. Doit contenir au moins un <li>.
<p> Identifie un paragraphe. Ne présente aucune sémantique utile. Utilisez pour créer des blocs/paragraphes de texte.
<progressbar> Élément d'indicateur de progression. Indique l'état de complétion d'une tâche et est généralement représenté par une barre de progression avec les attributs "value" et "max".
<span> Un conteneur générique pour du texte en ligne. Utilisez un autre élément sémantique si le contenu a une sémantique ou une fonctionnalité. Peut être doté de sémantique en utilisant ARIA, mais seulement si le HTML n'est pas suffisant (première règle ARIA).
<strong> Marque le texte comme fortement souligné et affiche le texte en gras. Utilisez-le lorsque le texte nécessite une forte emphase (sinon, utilisez des styles ou des balises). À utiliser avec parcimonie – cela peut avoir un impact négatif sur la lisibilité de longues sections de texte. Pas typiquement lu différemment par les lecteurs d'écran.
<svg> Définit un graphique vectoriel évolutif. La sémantique appropriée n'est pas bien prise en charge. Si le SVG transmet du contenu ou est cliquable, attribuez le rôle="img" et aria-label ou aria-labelledby (en référence à un contenu descriptif) afin que le <svg> soit identifié comme une image avec un texte alternatif. Si le SVG est décoratif, attribuez le rôle="presentation" et aria-hidden="true".
<table> Définit un contenu tabulaire présenté sous forme de grille. Utilisez-le uniquement pour une grille de contenu/données tabulaires, pas pour la mise en page. Assurez-vous que les cellules d'en-tête de tableau sont définies avec <th>. Si approprié, décrivez le tableau avec <caption>.
<td> Définit une cellule de données dans un tableau. Ne pas utiliser de cellules de tableau fusionnées. Pour les en-têtes de colonne ou de ligne, utilisez <th> à la place.
<th> Définit une cellule d'en-tête dans un tableau. Attribuez toujours une valeur d'attribut de portée de "row" ou "col". Essayez d'éviter les en-têtes de tableau fusionnés. Si la cellule n'est pas un en-tête de ligne/colonne, utilisez <td> à la place.
<title> Définit le titre du document. Affiché dans l'onglet ou la fenêtre du navigateur. Assurez-vous que le titre décrit succinctement le contenu de la page. Devrait être de la forme "Nom / description de la page - Nom du service / de la marque"
<ul> Définit une liste non ordonnée/à puces. Utilisez-le pour des listes où l'ordre des éléments n'impacte pas le sens. Doit contenir au moins un <li>.