Info-bulle, accessibilité

Question

La création d'une page Web agréable et accessible est difficile. Actuellement, j'essaie de rendre accessible une infobulle et j'ai besoin d'aide. Avez-vous des conseils pour ça? Comme quoi aria attributs que je devrais utiliser. Ou une autre chose importante que vous voulez ajouter!

De plus, comment empêcher le lecteur d'écran de lire l'info-bulle, si elle n'a pas été affichée? Mon approche ici est de le faire en utilisant javascript, en ajoutant et en supprimant aria-hidden attribut, mais je veux éviter JS autant que possible.

Answer 1

Vous devez montrer l'info-bulle sur un élément focalisable (si cet élément n'est pas focalisable, vous devez définir l'attribut tabindex)

<input type="text" id="mytextbox" aria-describedby="mytooltip" /> 
<span id="mytooltip" role="tooltip" class="tooltip" aria-hidden="true">Tooltip for the textbox</span> 

Le aria-describedby définirez la relation entre votre élément focalisable et la info-bulle Le support de rôle tooltip n'est pas très important, mais vous devez l'utiliser comme il est conçu pour ce sujet.

Une fois cela fait, il vous suffit de définir l'état initial du CSS:

.tooltip[aria-hidden='true'] {display: none} 
    .tooltip[aria-hidden='false'] {display: block} 

et définir l'attribut aria-hidden true sur focus ou mouseover événements en utilisant votre code javascript préféré et false sur blur et mouseout événements.