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

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

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

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..

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.

Nom d'étudiant

La biologie

John Doe

Assujettir		John Doe	Miriam Luther
La biologie	Pratique	UNE	UNE
La biologie	Théorie	UNE+	UNE
Chimie	Pratique	B	C
Chimie	Théorie	UNE	C+
La physique	Pratique	UNE	UNE
La physique	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
La biologie	Théorie	UNE+	UNE
Chimie	Pratique	B	C
Chimie	Théorie	UNE	C+
La physique	Pratique	UNE	UNE
La physique	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).

Maintenant lu: hauteur de colonne égale avec CSS