Pourquoi les éléments de formulaire cachés sont-ils toujours lus par JAWS ?

Question

La situation

J'ai une zone de l'écran qui peut être affichée et masquée via JavaScript (quelque chose comme "afficher/masquer les options de recherche avancée"). Dans cette zone se trouvent des éléments de formulaire (sélection, case à cocher, etc.). Pour les utilisateurs qui utilisent une technologie d'assistance comme un lecteur d'écran (dans ce cas, JAWS), nous devons lier ces éléments de formulaire à une étiquette ou utiliser l'attribut "title" pour décrire l'objectif de chaque élément. J'utilise l'attribut "title" parce qu'il n'y a pas assez d'espace pour une étiquette et que l'infobulle que vous obtenez est agréable pour les utilisateurs qui ne sont pas des lecteurs d'écran.

Le code ressemble à quelque chose comme ceci :

<div id="placeholder" style="display:none;">
  <select title="Month">
    <option>January</option>
    <option>February</option>
    ...
  </select>
</div>

Le problème

Normalement, JAWS ne lit pas les éléments cachés... parce qu'ils sont cachés et qu'il le sait. Cependant, il semble que si l'élément a un titre, JAWS le lit quoi qu'il arrive. Si je supprime le titre, JAWS ne lit rien, mais il s'agit manifestement d'un balisage inaccessible.

Solutions possibles

Ma première idée était d'utiliser une étiquette cachée à la place du titre, comme ceci :

<div id="placeholder" style="display:none;">
  <label for="month" style="display:none">Month</label>
  <select id="month">...</select>
</div>

Le résultat est exactement le même, et nous perdons maintenant les infobulles pour les utilisateurs qui n'ont pas de lecteur d'écran. De plus, nous finissons par générer deux fois plus de Html.

La deuxième option est de continuer à utiliser une étiquette, mais de la placer hors de l'écran. Ainsi, elle sera lue par le lecteur d'écran, mais ne sera pas vue par l'utilisateur visuel :

<div id="placeholder" style="display:none;">
  <label for="month" style="position:absolute;left:-5000px:width:1px;">Month</label>
  <select id="month">...</select>
</div>

Cela fonctionne, mais nous perdons à nouveau l'info-bulle et générons du Html supplémentaire.

Ma troisième solution possible consiste à parcourir récursivement le DOM en JavaScript, en supprimant le titre lorsque la zone est masquée et en le rajoutant lorsque la zone est affichée. Cette solution fonctionne également... mais elle est assez moche pour des raisons évidentes et n'est pas vraiment adaptée à un cas plus général.

Quelqu'un a-t-il d'autres idées ? Pourquoi JAWS se comporte-t-il de la sorte ?

Answer 1

Donnez aux éléments l'attribut aria-hidden="true", et ils devraient être cachés du lecteur d'écran.

Answer 2

Il s'agit bien d'un bogue dans JAWS, car la spécification indique clairement que display:none doit empêcher l'affichage d'un élément et de ses enfants dans tous les médias.

Cependant, jouer avec la propriété speak : aural pourrait être utile ? Je ne sais pas, car je n'ai pas JAWS à ma disposition.

http://www.w3.org/TR/CSS2/aural.html#speaking-props

Answer 3

Avez-vous essayé ?

<div id="placeholder" style="display:none;">
  <select title="Month" style="speak:none;">
    <option>January</option>
    <option>February</option>
    ...
  </select>
</div>

Cela a fonctionné pour moi dans le passé lorsque je voulais que JAWS lise une chose et saute une autre qui devrait normalement être lue.