Les tableaux HTML sont un excellent moyen d’améliorer l’accessibilité des tableaux HTML. Ils aident les gens à comprendre des informations qui seraient difficiles à lire autrement. Par exemple, les utilisateurs peuvent voir comment les informations de chaque cellule sont liées aux autres informations du tableau en les parcourant rapidement. Mais cela rend également plus difficile pour les personnes aveugles de comprendre comment ces cellules s’emboîtent.
Et s’il leur est difficile d’accéder à vos tables, vous empêcherez de nombreuses personnes d’utiliser votre produit. Nous pouvons résoudre ce problème en écrivant correctement le code HTML afin que les lecteurs d’écran puissent le comprendre. Et pour ce faire, vous devrez savoir comment rendre les tableaux HTML plus faciles à utiliser. Vous en apprendrez plus sur l’accessibilité des tableaux HTML et comment rendre les tableaux accessibles dans cet article.
Comment améliorer l’accessibilité des tableaux HTML
Utilisez les attributs alt de manière significative
La personne qui a écrit le contenu a décidé d’utiliser des images de coche verte pour indiquer quand une fonctionnalité du plan fait partie d’un certain plan, mais elle a oublié d’ajouter des attributs alt. Les utilisateurs d’AT ne peuvent pas dire quand une fonctionnalité est ajoutée car les images dans les cellules ne leur disent rien.
Pour résoudre ce problème, assurez-vous que les images ont un texte alternatif qui indique à l’utilisateur ce que l’image est à propos. Même si cela semble correct, un attribut alt de”coche”ne signifierait rien. J’ai utilisé l’expression”fonctionnalité incluse”à la place. (Bien que je pense qu’il serait préférable d’utiliser une police d’icônes plutôt qu’une image.)
Légendez ce tableau
Ce tableau semble avoir une légende qui dit”Choisissez un plan, ” mais ce texte est en fait un niveau de titre h3>. Le déplacer à l’intérieur de l’élément tableau> et le marquer comme une légende> permet aux technologies d’assistance, comme un lecteur d’écran, de savoir que le texte est lié au tableau> par programmation.
Inclure le texte d’en-tête pour chaque colonne
Dans ce cas, la première cellule du tableau est vide. La ligne 1 La colonne 1 est lue par le lecteur d’écran. Terminé. Mais qu’en est-il du reste des informations contenues dans ces cellules ? Un en-tête qui dit ce qu’ils sont est nécessaire.
L’auteur du contenu ne veut pas d’en-tête pour la première colonne d’un point de vue visuel, mais les utilisateurs AT bénéficient lorsque le nom de la colonne est prononcé avant le contenu des cellules suivantes.
Vérifiez votre (con)texte
Les lecteurs d’écran ne fonctionnent pas toujours comme vous vous y attendez avec les abréviations et la ponctuation. Ce tableau m’a montré deux exemples intéressants. Tout d’abord, le nombre d’utilisateurs pour le plan Team ressemble à”2-50″, mais il est annoncé comme”250″car le trait d’union n’est pas affiché. Pour nous assurer que cela est clair, nous pouvons ajouter le mot”à”comme texte d’aide masqué, et juste pour être sûr, nous pouvons masquer le trait d’union à AT.
Qu’est-ce que l’accessibilité des tableaux HTML ?
Certaines fonctionnalités facilitent l’utilisation des logiciels et des sites Web pour les personnes handicapées. Certaines de ces fonctionnalités sont des raccourcis pour le clavier, la synthèse vocale, l’accès pour les personnes daltoniennes, les sous-titres, l’audio mono, etc. Alors, qu’est-ce que l’accessibilité des tableaux HTML ?
Les lecteurs d’écran sont un type d’outil d’accessibilité qui aide les personnes aveugles à comprendre ce qui se trouve sur un site Web ou une application. Ces outils utiles lisent les informations à voix haute à partir des balises HTML. Mais comment les lecteurs d’écran donnent-ils un sens aux tableaux HTML ?
Les lecteurs d’écran vont de gauche à droite et de haut en bas lors de la lecture des tableaux HTML. Pour cette raison, il leur est souvent difficile de déterminer où se trouve une cellule ou comment elle se rapporte à une autre cellule ou à l’en-tête. Ainsi, les développeurs doivent écrire un code HTML correct qui peut être lu par les technologies qui aident les personnes handicapées. Dans la prochaine partie, nous verrons comment vous pouvez le faire.