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

    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.

    le

    Nom d'étudiant La biologie John Doe
    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).

    Maintenant lu: hauteur de colonne égale avec CSS