fabrication d'éléments invisibles à screenreaders / focus clavier - mais visible aux clics de souris

Question

Je suis au courant de la façon de rendre le clavier des éléments invisibles focalisable et lu par les lecteurs d'écran, mais dans le but d'une enquête menée par des étudiants - je voudrais certains éléments invisibles à screenreaders / focus clavier pour être moins distrayant, mais ont les rendre visibles pour les tuteurs à utiliser à l'aide d'une souris.

Je l'ai essayé d'utiliser les iframes, mais le clavier peut encore « onglet » en eux. Je considérais une fenêtre pop-up qui peut contrôler la fenêtre parent? - mais pourrait avoir des problèmes avec les bloqueurs, etc.

Un grand merci! Mike

Answer 1

L'une des façons les plus simples pour obtenir du contenu ignoré par un lecteur d'écran est de le placer dans une image, puis définissez le texte alt sur l'image pour être « » dans votre code HTML. Cela entraînera le lecteur d'écran pour sauter ce contenu car il ne peut pas l'interpréter. Cela permettra également d'éliminer tout ou mise au point clavier tabbing depuis le navigateur Web traitera comme toute autre image dans votre page.

Une autre façon de faire, et un peu plus compliqué, est de détecter si votre page est tiré dans un navigateur de lecture d'écran et définissez les propriétés CSS du contenu que vous ne voulez pas lu par le lecteur d'être ont la suivant:

 visibility: hidden; display:none;

Les lecteurs d'écran ignorent tout ce qui est invisible et / ou non l'affichage, donc il ne sera pas lu à l'utilisateur. Ceci est également un peu plus propre, puisque vous n'êtes pas détruire le classement SEO de la page, mais sont tout simplement modifier le contenu affiché aux utilisateurs qui ne ont pas besoin de voir / entendre.

Answer 2

une bonne façon d'empêcher les lecteurs d'écran d'affichage d'un élément est d'appliquer l'aria caché = « true »; cela est assez bien supporté par les navigateurs, et demandera JAWS et d'autres lecteurs d'écran pour sauter le contenu. Vous pouvez également utiliser le rôle = « présentation » - il y a un bon article sur ce ici: http: // john. foliot.ca/aria-hidden/

L'application tabindex = -1 ne fera que permettre à l'élément à se concentrer par des scripts, et non entrée du clavier, donc cela fonctionnera aussi. En outre, bien que je ne le recommande pas, j'ai trouvé en déchirant mes cheveux sur le script de quelqu'un d'autre, que si vous ne disposez pas d'un « href » attribut défini pour un élément de liaison, (rendant invalide) cela aussi empêche le focus.