Problèmes courants d'accessibilité Web

Une fois, on m'a demandé de dresser une courte liste de problèmes d'accessibilité courants. Voici ce que j'ai trouvé !

Contraste des couleurs

Testez le contraste des couleurs pour vous assurer que le texte est lisible. Utilisez un outil comme ce calculateur de contraste de couleur pour tester. Testez également en mode Contraste élevé .

Ancre Vs. Bouton Vs. Envergure Vs. Division

Il est important de savoir quand utiliser l'élément approprié pour une action de page. Voici un aperçu de base de quand utiliser/attacher un événement à quel élément :

  • Utilisez une anchor lorsque vous créez un lien vers une autre page ou que vous accédez à une section de contenu sur la même page
  • Utilisez un button lorsqu'une interaction de page dynamique doit avoir lieu (accordéon, ouverture d'une fenêtre modale, etc.) ou lors de la soumission d'un formulaire. Utilisez une gestion appropriée du focus lorsque des actions dynamiques sont déclenchées sur la page.
  • Utilisez un span pour contenir le contenu en ligne. N'attachez pas d'événement à cet élément car il n'a aucune signification sémantique et n'est pas focalisable.
  • Utilisez un div pour contenir le contenu au niveau du bloc. N'attachez pas d'événement à cet élément car il n'a aucune signification sémantique et n'est pas focalisable.

Plus de lecture : http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/

Texte alternatif

Assurez-vous que le texte alt est appliqué le cas échéant. Des choses comme les images et les liens d'image doivent avoir un texte alt descriptif.

Plus de lecture : http://webaim.org/techniques/alttext/

Étiquettes de formulaire

Assurez-vous que toutes les input de formulaire ont une label . Ces étiquettes sont lues à haute voix par des lecteurs d'écran et aident à donner du contexte au contrôle input . Le texte d' placeholder d'entrée ne remplace pas les étiquettes.

Plus de lecture : http://www.nngroup.com/articles/form-design-placeholders/

Index des onglets

N'utilisez pas d'attributs tabindex avec des valeurs supérieures à 0 (zéro). Les navigateurs gèrent les tabindex manière organique via l'ordre des sources. L'utilisation de toute valeur positive au-dessus de 0 entraînera un saut vers cette entrée lorsque vous appuyez sur la touche de tab , ce qui peut créer de la confusion et de la frustration pour les utilisateurs de clavier.

  • tabindex=-1 peut être utilisé avec une anchor ou un événement JavaScript pour forcer le focus sur cet élément. Cela n'ajoute pas l'élément à l'ordre des sources du navigateur.
  • tabindex=0 ajoute l'élément à l'ordre source en tant qu'élément tabulable, recevant le focus lorsque l'utilisateur atteint l'élément.

Plus de lecture : http://webaim.org/techniques/keyboard/tabindex

Les liens de saut doivent être le premier élément de la page. Ceux-ci sont utilisés pour ignorer les sections de page répétées telles que les barres d'utilitaires ou la navigation principale, des choses que l'utilisateur connaît déjà. Le href du lien de saut doit être l' id du conteneur de contenu de la page principale. Le conteneur de contenu principal doit avoir un tabindex=-1 pour qu'il reçoive le focus.

Plus de lecture : http://webaim.org/techniques/skipnav/

Zoom fenêtre

Il est important de ne pas désactiver le zoom de la fenêtre d'affichage pour les utilisateurs qui ont besoin de texte de grande taille pour lire le contenu. La plupart des modèles passe-partout ne désactivent pas le zoom, cela ne devrait donc pas être un problème, mais mérite d'être mentionné.

En gros, ne fais pas ça :

 <meta name="viewport" content="user-scalable=no" />

Plus de lecture : http://www.iheni.com/mobile-accessibility-tip-dont-suppress-pinch-zoom/

Gestion des focus

La gestion de la concentration est essentielle pour une expérience utilisateur positive qui s'appuie sur la navigation au clavier. Cette technique entre vraiment en jeu lors de la manipulation d'éléments de page dynamiques tels que des onglets, des accordéons, des fenêtres modales, des choses de cette nature.

Utilisez JavaScript pour gérer la gestion des focus. Il existe des fonctions de navigateur intégrées pour vous aider. Par exemple, document.activeElement garde une trace du dernier élément de page qui a eu le focus.

Il existe de nombreux exemples de widgets de page dynamiques et de gestion de focus sur la page A11Y Project Patterns .

Retour au blog