Comment améliorer l'accessibilité de la table HTML avec balisage

L'accessibilité Web fait référence à la conception d'applications Web de manière à pouvoir être utilisée facilement par les personnes ayant une déficience visuelle. Certains de ces utilisateurs comptent sur les lecteurs d'écran pour lire le contenu des pages Web. Les lecteurs d'écran interprètent le code présent sur la page et lisent son contenu à l'utilisateur .

est un élément HTML largement utilisé pour afficher les données de manière structurée dans les pages Web. Sa conception va des plus simples aux plus complexes, avec des en-têtes de lignes, des en-têtes fusionnés, etc.

Si une table n'est pas conçue en tenant compte de l'accessibilité, il sera difficile pour les lecteurs d'écran de traduire les données dans des tableaux complexes de manière significative pour les utilisateurs. Par conséquent, pour rendre les tables HTML complexes plus faciles à comprendre, nous devons nous assurer que les en-têtes, les groupes de colonnes, les groupes de lignes, etc. sont clairement définis . Nous verrons ci-dessous comment cela est réalisé dans le balisage .

L'attribut Scope

Même pour une simple table avec

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

scope="colgroup" aide les utilisateurs à identifier que les données dans les cellules qui suivent dans le groupe de colonnes sur lequel il est étendu sont associées à ce sujet particulier.

Ensuite, il y a le

balisage avec scope="row" qui définit que les cellules le suivent dans la même rangée, contenant l'information "grade" concernant ce nom d'étudiant particulier.

Groupes de lignes

Maintenant passons à un autre exemple, cet exemple aura presque la même table que celle ci-dessus, sauf que nous échangerons les en-têtes de lignes et de colonnes, donc nous serons capables de travailler avec des groupes de lignes.

tag qui définit clairement les en-têtes, vous pouvez améliorer son accessibilité avec l'attribut scope et ne pas céder à la confusion qui pourrait résulter de types de données similaires dans les cellules. Nom de l'employé Code de l'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 W3C: En d'autres termes, cela nous aide à associer les cellules de données à leurs cellules d'en-tête correspondantes. S'il vous plaît noter que dans l'exemple ci-dessus, vous pouvez passer	pour	. Tant que sa scope a la valeur col, elle sera interprétée comme l'en-tête de la colonne correspondante. L'attribut scope peut avoir l'une de ces quatre valeurs; col, row, rowgroup, colgroup pour désigner 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 respectivement. Tables complexes Passons maintenant à une table plus complexe. Ci-dessus est un tableau qui répertorie les élèves dans une classe et leurs notes en pratique et en théorie pour trois sujets. Voici le code HTML pour cela. La table a utilisé rowspan et colspan pour 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 A + 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 affichant la note, est associée à trois éléments d'information: À quel étudiant appartient cette note? À quel sujet appartient cette note? Cette note est-elle pour la section Pratique ou 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éorique 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 A + B UNE UNE UNE- Miriam Luther UNE UNE C C + UNE UNE- Dans le balisage ci-dessus, nous avons ajouté une scope aux cellules qui contiennent 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). colspan="2" simplement colspan="2" ne crée pas les groupes de colonnes, cela indique seulement que la cellule en question doit occuper deux cases d'espace. Pour créer un groupe de colonnes, vous devez utiliser colgroup, puis ajouter l'attribut span qui indique le nombre de colonnes colgroup ce groupe. le	Student Name	Biology		John Doe

Assujettir		John Doe	Miriam Luther
La biologie	Pratique	UNE	UNE
	Théorie	A +	UNE
Chimie	Pratique	B	C
	Théorie	UNE	C +
La physique	Pratique	UNE	UNE
	Théorie	UNE-	UNE-

Maintenant que nous avons notre exemple à utiliser, commençons par créer des groupes de lignes comme nous l'avons fait pour les groupes de colonnes dans l'exemple précédent.

Cependant, les groupes de lignes ne peuvent pas être créés à l'aide d'une balise comme colgroup car il n'y a pas d'élément rowgroup .

Les lignes HTML sont généralement regroupées en utilisant , et éléments. Un seul HTML

é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	A +	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éant des groupes de lignes avec deux lignes dans chaque. Nous avons également ajouté scope="rowgroup" aux cellules contenant les informations d'en-tête sur ces deux lignes (qui est le nom de sujet auquel les notes appartiennent dans ce cas).

Maintenant lu: hauteur égale de la colonne avec CSS