Fermer

avril 4, 2022

Balisage sémantique pour l'accessibilité Web


Dans le monde, plus de 285 millions de personnes vivent avec une sorte de déficience visuelle.

C'est selon le département américain de la santé et des services sociaux.Introduction à la section 508 Conformité et accessibilité (hhs.gov)

Ils ont besoin de lecteurs d'écran pour les aider à naviguer sur le Web.

Le problème est que tous les sites Web ne sont pas structurés avec un balisage sémantique approprié pour l'accessibilité.

Pour plus d'informations surpourquoi l'accessibilité du Web est importanteen général, vous pouvez consulter mon article de blog précédentici.

Mais aujourd'hui, je vais discuter de cette erreur d'accessibilité courante commise par les développeurs Web lors de la conception de la structure de leurs sites Web.

Pourquoi le HTML sémantique est-il important pour l'accessibilité ?

Vous pouvez considérer le balisage HTML de votre page comme une feuille de route, chaque balise agissant comme un point de repère pour vous permettre de savoir où vous en êtes. Pour de nombreux développeurs, il peut être facile d'utiliser simplement

balises pour tout.

Mais non seulement c'est paresseux, mais cela peut aussi être nocif.

Pour les malvoyants, les lecteurs d'écran aident les utilisateurs à naviguer dans une page et fournissent un contexte. L'utilisation des balises sémantiques appropriées et des conventions de dénomination appropriées pour les étiquettes rend la navigation beaucoup plus accessible à tous les utilisateurs.

Avec la sortie de HTML5, il est également très facile d'ajouter des balises plus descriptives, notamment :

Pour une personne utilisant uniquement le clavier pour parcourir une page, le fait d'avoir une structure HTML appropriée avec des balises clairement étiquetées permet à l'utilisateur de parcourir plus facilement une page.

Et encore une fois, l'accessibilité aide tout le monde. Les futurs développeurs qui parcourent votre travail (ou peut-être simplement votre futur moi) auront également plus de facilité à naviguer sur votre page.

Quels sont d'autres exemples de balisage sémantique médiocre ?

Utilisation abusive des étiquettes ARIA.

Les étiquettes ARIA ont été conçues pour ajouter de l'accessibilité aux éléments qui n'avaient pas de description textuelle. Mais de nombreux développeurs ont commencé à utiliser les labels ARIA pour compenser leur

soupe, à la place.

Les modifications répertoriées ci-dessus dans HTML5 offrent un meilleur moyen d'ajouter une description à votre balisage et de rendre plus clair pour les lecteurs d'écran l'objectif du contenu. Une bonne règle est de n'utiliser ARIA qu'en dernier recours.

Le texte d'espace réservé ne suffit pas.

Une personne malvoyante ne peut pas voir le texte de l'espace réservé et tous les lecteurs d'écran non plus. Ils s'appuient sur l'étiquette attachée à l'entrée.

Mais soyons francs, même si vous n'aviez pas de déficience visuelle et que vous vous éloigniez juste pour la seconde, vous pourriez oublier de quelles entrées vous aviez besoin et pourquoi s'il n'y avait pas d'étiquettes à vous dire.

Que devriez-vous faire à la place ?

  • Rendez-le scannable.Ajoutez des balises html claires et descriptives sur toute la page afin que les utilisateurs puissent accéder rapidement à la section la plus pertinente pour eux, quel que soit l'appareil qu'ils utilisent.
  • N'utilisez les étiquettes ARIA que si nécessaire.Utilisez les étiquettes sémantiques ARIA uniquement lorsqu'il n'y a pas d'étiquette alternative qui clarifierait mieux la section.
  • Ajoutez toujours des étiquettes aux champs de saisie.Étiquetez vos champs de formulaire afin que tous les utilisateurs puissent voir et comprendre la raison de votre champ de saisie.

L'ajout du balisage sémantique approprié à la structure de votre site Web peut grandement améliorer l'accessibilité de votre site pour ceux qui utilisent des lecteurs d'écran. Pour plus d'informations sur l'accessibilité du Web, consultez leDirectives pour l'accessibilité du contenu Web (WCAG) 2.0.

Mais bien sûr, l'ajout de fonctionnalités d'accessibilité améliore l'expérience utilisateur de tous les utilisateurs. Un mauvais balisage sémantique estjuste unde quelques erreurs d'accessibilité courantes qui créent un obstacle à une utilisation juste et équitable du World Wide Web.

Dans mon prochain article, je discuterai d'une autre erreur courante : utiliser un texte alternatif incorrect ou inexistant.

Si vous avez aimé lire sur ce sujet et que vous voulez en savoir plus, laissez un commentaire ci-dessous.

A propos de l'auteur

Tamara Chance est un développeur Web complet, un administrateur certifié Salesforce et une ancienne élève du programme Bright Paths de Perficient. Elle est engagée dans l'apprentissage des nouvelles technologies et des blogs sur les trucs et astuces, les meilleures pratiques et le développement personnel dans l'espace high-tech.

Plus de cet auteur






Source link