hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


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 Doe32456456789Réalisateur
Miriam Luther78902456789Directeur 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
PratiqueThéoriePratiqueThéoriePratiqueThéorie
John DoeUNEA +BUNEUNEUNE-
Miriam LutherUNEUNECC +UNEUNE-

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 DoeUNEA +BUNEUNEUNE-
Miriam LutherUNEUNECC +UNEUNE-

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
AssujettirJohn DoeMiriam Luther
La biologiePratiqueUNEUNE
ThéorieA +UNE
ChimiePratiqueBC
ThéorieUNEC +
La physiquePratiqueUNEUNE
ThéorieUNE-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 biologiePratiqueUNEUNE
ThéorieA +UNE
ChimiePratiqueBC
ThéorieUNEC +
La physiquePratiqueUNEUNE
ThéorieUNE-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

9 plugins utiles pour votre site WordPress

9 plugins utiles pour votre site WordPress

En soi, WordPress n'est peut-être pas la plate-forme la plus efficace et la plus excitante pour travailler avec. Pourtant, étant donné la possibilité de le personnaliser avec des plugins et des thèmes, il est possible de créer un site web. Et faites-le avec une facilité relative.Les plugins WordPress offrent d'excellents moyens d' intégrer des fonctionnalités utiles et importantes dans un site Web. De nomb

(Conseils techniques et de conception)

30 Cool Street Art

30 Cool Street Art

L'art a changé son appel à l'homme de la rue. Vous n'avez plus à visiter les musées et les galeries d'art pour goûter à l'art contemporain. Vous pouvez facilement trouver des peintures murales, des graffitis et des peintures murales qui résonnent avec vos sentiments, vos cultures, vos croyances, ainsi qu'avec les temps qui changent.Ils po

(Conseils techniques et de conception)