web-dev-qa-db-fra.com

Infobulles d'aide et lecteurs d'écran

J'ai un formulaire de saisie qui contient des info-bulles d'aide pour de nombreuses étiquettes de champ (généralement plus significatives que l'exemple).

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

Quelle est la manière appropriée/standard de rendre ces info-bulles d'écran accessibles?

Est-il suffisant d'intégrer simplement l'info-bulle dans le (?) élément? Le texte d'aide doit-il être copié dans un attribut alt ou quelque chose?

formsinput-fieldstooltipsscreen-reader
13
DanielST

Gardez à l'esprit que l'accessibilité ne se limite pas aux lecteurs d'écran.

Les info-bulles peuvent être gênantes dans de nombreuses situations:

  • lecteurs d'écran (comme mentionné)
  • accès sans souris (clavier, appareils tactiles, etc.)
  • défis de dextérité (les icônes (?) sont souvent très petites)

En général, vous voudrez:

  • rendre la cible aussi grande que possible
  • intégrez le texte de l'infobulle dans le champ label ou utilisez les attributs aria pour établir les connexions logiques appropriées
  • assurez-vous qu'ils peuvent être déclenchés via des événements onfocus et tactiles.

Personnellement, je plaide toujours contre les infobulles pour une utilisation sous des formes générales. Si les informations de l'info-bulle sont utiles, affichez-les directement à l'écran. C'est la façon la plus accessible de le gérer. Si les informations ne sont pas suffisamment utiles pour être affichées directement à l'écran, elles ne sont probablement pas utiles pour commencer, vous pouvez donc simplement les supprimer.

8
DA01

L'inclusion d'un attribut alt est la première étape pour prendre en charge l'accessibilité sur le Web.

WebAIM (Web Accessibility in Mind) a un article avec plusieurs conseils, Designing for Screen Reader Compatibility . Parmi les nombreux conseils, citons:

Les lecteurs d'écran liront le texte alternatif des images, si un texte alternatif est présent. JAWS précède le texte alternatif avec le mot "graphique". Si l'image est un lien, JAWS précède le texte alternatif avec "lien graphique".

Le W3C a défini une norme appelée WAI-ARIA , qui améliore encore l'accessibilité sur le Web:

WAI-ARIA, la suite d'applications Internet riches accessibles, définit un moyen de rendre le contenu Web et les applications Web plus accessibles aux personnes handicapées.

Vous pouvez trouver la spécification 1.0 ici: http://www.w3.org/TR/wai-aria/

Il explique plus en détail comment améliorer votre balisage pour définir les rôles pour différentes régions de votre site. Extrait du résumé de la spécification:

L'accessibilité du contenu Web nécessite des informations sémantiques sur les widgets, les structures et les comportements, afin de permettre aux technologies d'assistance de transmettre des informations appropriées aux personnes handicapées. Cette spécification fournit une ontologie des rôles, des états et des propriétés qui définissent les éléments d'interface utilisateur accessibles et peut être utilisée pour améliorer l'accessibilité et l'interopérabilité du contenu et des applications Web. Ces sémantiques sont conçues pour permettre à un auteur de transmettre correctement les comportements d'interface utilisateur et les informations structurelles aux technologies d'assistance dans le balisage au niveau du document.

Par exemple - vous pouvez associer un label avec un textbox , et placer les deux à l'intérieur d'une région form . Cela fournit aux logiciels d'accessibilité une bien meilleure idée de la structure de votre site et peut mieux communiquer cela à l'utilisateur.

2
Evil Closet Monkey

L'exemple d'infobulle donné par W3C dans cette page va:

<div class="text">
    <label id="tp1-label" for="first">First Name:</label> 
    <input type="text" id="first" name="first" size="20" aria-labelledby="tp1-label" aria-describedby="tp1" aria-required="false" />
    <div id="tp1" class="tooltip" role="tooltip" aria-hidden="true">Your first name is a optional</div>
</div>

Cette page du plug-in d'accessibilité Bootstrap détaille davantage:

  1. Ajoutez le rôle de Tooltip à tooltip div.
  2. Générez un identifiant aléatoire, affectez-le à la div de l'info-bulle et référencez-le à partir de l'élément de l'info-bulle avec l'attribut ARIA "aria-descriptionsby".
  3. Supprimez aria-décrit par lorsque l'infobulle est masquée.
2
Izhaki

Les info-bulles peuvent être visibles lorsque les styles sont désactivés, donc la première chose à faire est de désactiver CSS dans votre navigateur et de voir si les info-bulles sont visibles. Pour ce faire, vous pouvez utiliser l'extension de navigateur Web Developer. Voici pour Chrome et Firefox . Vous pouvez les tabuler et voir s'ils apparaissent. S'ils ne sont pas visibles lorsque les styles sont désactivés, assurez-vous que votre info-bulle est accessible uniquement à l'aide du clavier. Alors tabulez dessus avec votre clavier. S'active-t-il? En plus de cela, ajoutez une barre d'outils WAVE à votre navigateur et exécutez WAVE sur votre page. Cela vous montrera les erreurs d'accessibilité que vous avez peut-être manquées. Voici les liens pour Wave pour Firefox et Wave pour Chrome .

1
PixelGraph