web-dev-qa-db-fra.com

Comment annoncer qu'un site Web n'a pas de support de lecteur d'écran?

Nous pouvons utiliser <noscript> pour dire Désolé, ce site Web nécessite JavaScript pour fonctionner .

Quelle est la manière analogue d'annoncer que le site ne prend pas en charge les lecteurs d'écran ? Quelque chose comme <noscreenreader>Sorry, ...</noscreenreader>.

(Bref historique: c'est une application qui repose sur l'idée de jamais utiliser des mots. Elle s'appuie fortement sur des images pour transmettre des informations. Il ne serait pas logique d'annoncer rien en langue parlée. )

htmlhtml5accessibilityscreen-readers
16
Lazar Ljubenović

Les lecteurs d’écran fonctionnent en haut du navigateur, il n’existe donc aucun moyen simple (juste quelques techniques alambiquées techniques Flash ) de détecter le moment où quelqu'un en utilise un. 

Votre meilleur choix est de placer l'avertissement au début du contenu et de le masquer pour les utilisateurs malvoyants. Cet article mentionne plusieurs techniques. 

.hidden {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

<div class="hidden">Sorry, this website requires JavaScript to run.</div>
10
David

WAI ARIA comporte un attribut "alert" role qui agira de la même manière qu’une boîte d’alerte JS visible pour les technologies d’aide/lecteurs d’écran, c’est-à-dire que son texte sera lu par défaut immédiatement après le chargement de la page.

(WAI ARIA signifie "Initiative d'accessibilité Web - Applications Internet riches accessibles") par le W3C, qui étend les possibilités des applications Web pour les technologies d'assistance telles que les lecteurs d'écran.

Vous pouvez donc créer un élément invisible contenant cet attribut directement au début de votre <body>, comme dans l'exemple ci-dessous.

(Remarque: n'utilisez pas display: none sur un message comme celui-ci - la plupart des lecteurs d'écran prendront cela comme ordre de ne PAS lire son texte!)

#screenreader_alert {
  position: fixed;
  left: -50px;
  width: 1px;
  height: 1px;
  color: transparent;
  overflow: hidden;
}
<div id="screenreader_alert" role="alert">Please note: This web page contains no text at all and therefore does not support screenreaders.</div>
<div>There is a DIV element <em>before</em> this one which is invisible due to its CSS settings, but whose text will be read by screenreaders immediately after the page is loaded, due to its ARIA attribute <em>role="alert"</em>. Check the HTML code to see it.</div>

Pour en savoir plus: https://w3c.github.io/aria-practices/#alert

6
Johannes
<h1 style="text-indent: -9999px;"> Sorry, this site does not support screen readers </h1>

FWIW, concernant les utilisateurs qui n'utilisent pas de lecteurs d'écran, je pense qu'il est avantageux d'utiliser l'indentation du texte pour masquer le texte plutôt que d'autres options. 

Si vous vérifiez le test ci-dessous avec le lecteur d'écran intégré sous OSX, les 2 premiers paragraphes sont lus, mais pas le troisième. 

<p>hello world</p>
<p style="text-indent: -9999px;"> Sorry, this site does not support screen readers </p>
<p style="display:none;">display hidden paragraph</p>

https://s.codepen.io/panchroma/debug/yReWOa/PBrNWNdjpnWAhttps://codepen.io/panchroma/pen/yReWOa

4
David Taiaroa

Mettez-vous l'accent sur un élément initial? Si tel est le cas, vous pouvez ajouter un texte de lecteur d'écran supplémentaire, non visible, qui sera lu avec l'élément ayant le focus. Comme d'autres l'ont mentionné, effectuez une recherche google pour la classe "sr-only" ou consultez ceci: Qu'est-ce que sr-only dans Bootstrap 3? . Peut-être quelque chose comme ça:

<button>
  I'm the first focusable element
  <span class="sr-only"> Sorry, this page is not accessible to screen readers</span>
</button>

Si vous n'avez pas de cible initiale, vous pouvez attribuer au premier élément du DOM un tabindex="0" qui contient le texte masqué. Ainsi, lorsque l'utilisateur du lecteur d'écran commence à taper sur l'interface, il entendra le texte en tant que premier. chose, mais c’est une solution moins souhaitable, car vous ne voulez pas normalement qu'un élément non interactif ait tabindex="0". Quelque chose comme ça:

<html>
  <body>
    <span tabindex="0" class="sr-only">Sorry, this page is not accessible to screen readers</span>
    <!-- the rest of your real code -->
  </body>
</html>

Une troisième solution possible, similaire à la première, consiste à associer du texte supplémentaire à votre premier en-tête ou élément principal et à vous concentrer sur cet élément à l'aide de tabindex="-1". Le "-1" signifie qu'un utilisateur ne peut pas utiliser le Tab clé pour y arriver. Quelque chose comme:

<html>
  <script>
    function myload() {
      document.getElementById("myid").focus();
    }
  </script>
  <body onload="myload()">
    <h1 id="myid" tabindex="-1">
      Welcome to my site
      <span class="sr-only"> Sorry, this page is not accessible to screen readers</span>
    </h1>
  </body>
</html>
0
slugolicious