Page d'accueil » Codage » Comment améliorer l'accessibilité aux tables HTML avec le balisage
Comment améliorer l'accessibilité aux tables HTML avec le balisage
L'accessibilité Web consiste à concevoir des applications Web de manière à ce qu'elles puissent être facilement utilisées par des personnes malvoyantes. Certains de ces utilisateurs comptent sur lecteurs d'écran pour lire le contenu des pages Web. Les lecteurs d'écran interpréter le code présent sur la page et lire son contenu à l'utilisateur.
est un élément HTML largement utilisé pour afficher des données de manière structurée dans des pages Web. Sa conception va des plus simples aux plus complexes, avec en-têtes de lignes, en-têtes fusionnés, etc..
Si un tableau n'est pas conçu dans un souci d'accessibilité, il sera difficile pour les lecteurs d'écran de traduire les données sous forme de tableaux complexes de manière significative pour les utilisateurs. Par conséquent, pour rendre les tableaux HTML complexes plus faciles à comprendre, nous devons s'assurer que les en-têtes, groupes de colonnes, groupes de lignes, etc. sont clairement définis. Nous verrons ci-dessous comment c'est réalisé en balisage.
L'attribut de portée
Même pour une simple table avec
balise qui définit clairement les en-têtes, vous pouvez améliorer son accessibilité avec le portée attribuer et ne pas laisser place à une confusion pouvant résulter de types de données similaires dans les cellules.
Nom de l'employé
Code d'employé
Code de projet
Désignation d'employé
John Doe
32456
456789
Réalisateur
Miriam Luther
78902
456789
Directeur adjoint
Que fait l'attribut scope? Selon le W3C:
En d'autres termes, cela nous aide à associer les cellules de données à leurs cellules d'en-tête correspondantes.
Veuillez noter que dans l'exemple ci-dessus, vous pouvez changer
pour
. Tant que ses portée a la valeur col, il sera interprété comme l'en-tête de la colonne correspondante.
le portée attribut peut avoir n'importe laquelle de ces quatre valeurs; col, rangée, groupe de rangée, colgroup faire référence à l'en-tête d'une colonne, à l'en-tête d'une ligne, à un en-tête de groupe de colonnes et à un en-tête de groupe de lignes.
Tables complexes
Passons maintenant à un tableau plus complexe.
Ci-dessus, un tableau qui répertorie les étudiants d’une classe et leurs notes en pratique et en théorie pour trois matières..
Voici le code HTML pour cela. La table a utilisé rangée et colspan créer des en-têtes fusionnés pour les cellules de données.
Nom d'étudiant
La biologie
Chimie
La physique
Pratique
Théorie
Pratique
Théorie
Pratique
Théorie
John Doe
UNE
UNE+
B
UNE
UNE
UNE-
Miriam Luther
UNE
UNE
C
C+
UNE
UNE-
Dans le tableau ci-dessus, chaque cellule de données, c’est-à-dire chacune des cellules du tableau afficher la note, est associé à trois informations:
À quel étudiant appartient cette note??
À quelle matière appartient ce grade??
Est-ce que cette note appartient à la section pratique ou à la théorie?
Ces trois informations sont définies dans trois types différents de cellules d'en-tête structurellement et visuellement:
Nom d'étudiant
Nom du sujet
Pratique ou théorie
Définissons la même chose pour l'accessibilité.
Nom d'étudiant
La biologie
Chimie
La physique
Pratique
Théorie
Pratique
Théorie
Pratique
Théorie
John Doe
UNE
UNE+
B
UNE
UNE
UNE-
Miriam Luther
UNE
UNE
C
C+
UNE
UNE-
Dans le balisage ci-dessus, nous avons ajouté portée aux cellules contenant des informations d'en-tête sur les cellules de données.
Groupe de colonnes
Les cellules de biologie, de chimie et de physique doivent être associées à un groupe de deux colonnes chacune (théorie et pratique). Il suffit d'ajouter colspan = "2" ne crée pas les groupes de colonnes, il indique simplement que la cellule en question doit occuper deux cellules.
Pour créer un groupe de colonnes, vous devez utiliser colgroup puis ajoutez le envergure attribuer à celui-ci en indiquant combien de colonnes ce groupe de colonnes comprend.
le
Nom d'étudiant
balisage avec scope = "col" aide la technologie d'assistance à identifier que les cellules qui suivent dans la même colonne sont des noms d'étudiants.
De même, des cellules comme
La biologie
contenant scope = "colgroup" aide les utilisateurs à identifier que les données des cellules qui suivent du groupe de colonnes qu'elles recouvrent sont associées à ce sujet particulier.
Puis il y a le
John Doe
balisage avec scope = "row" qui définit que les cellules qui le suivent dans la même ligne, contenant le “qualité” informations concernant ce nom d'étudiant particulier.
Groupes de lignes
Passons maintenant à un autre exemple, cet exemple aura presque le même tableau que celui ci-dessus, sauf que nous allons échanger les en-têtes de lignes et de colonnes afin que nous puissions travailler avec des groupes de lignes..
Assujettir
John Doe
Miriam Luther
La biologie
Pratique
UNE
UNE
Théorie
UNE+
UNE
Chimie
Pratique
B
C
Théorie
UNE
C+
La physique
Pratique
UNE
UNE
Théorie
UNE-
UNE-
Maintenant que nous avons notre échantillon avec lequel travailler, commençons par créer des groupes de lignes comme nous l'avons fait pour les groupes de colonnes de l'exemple précédent..
Cependant, les groupes de lignes ne peuvent pas être créés avec une balise telle que colgroup Parce qu'il n'y a pas groupe de rangée élément.
Les lignes HTML sont généralement regroupées à l'aide de , et éléments. Un seul HTML
l'élément peut en avoir un , un et multiple . Nous allons utiliser plusieurs tbody dans notre table pour créer les groupes de lignes et ajouter la portée respective aux cellules d'en-tête.
Assujettir
John Doe
Miriam Luther
La biologie
Pratique
UNE
UNE
Théorie
UNE+
UNE
Chimie
Pratique
B
C
Théorie
UNE
C+
La physique
Pratique
UNE
UNE
Théorie
UNE-
UNE-
Nous avons ajouté les lignes “Pratique” et “Théorie” dans chaque tbody créer des groupes de rangées de deux rangées chacune. Nous avons également ajouté le scope = "rowgroup" aux cellules contenant les informations de titre sur ces deux lignes (qui est le nom du sujet auquel les grades appartiennent dans ce cas).