Tooltip, Erreichbarkeit

Question

Der Aufbau einer gut zugänglichen Webseite ist schwer. Derzeit versuche ich, ein Tooltip-Web zugänglich zu machen, und ich brauche Hilfe. Habt ihr irgendwelche Ratschläge dafür? Wie was Arie Attribute sollte ich verwenden. Oder eine andere wichtige Sache, die Sie hinzufügen möchten!

Außerdem, wie verhindere ich, dass der Screenreader den Tooltip liest, wenn er nicht angezeigt wurde? Mein Ansatz hier ist es, es mit Javascript, Hinzufügen und Löschen aria-hidden Attribut, aber ich möchte JS so viel wie möglich zu vermeiden.

Answer 1

Sie werden den Tooltip auf einem fokussierbaren Element zeigen müssen (wenn dieses Element nicht fokussierbar ist, sollten Sie das tabindex Attribut gesetzt) ​​

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

Die aria-describedby wird die Beziehung zwischen Ihrem fokussierbare Element gesetzt und die Tooltip. Die tooltip Rollenunterstützung ist nicht sehr wichtig, aber Sie sollten sie so verwenden, wie sie für dieses Thema entworfen wurde.

Sobald dies erledigt ist, müssen Sie nur den Anfangszustand in der CSS einstellen:

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

und definieren das aria-hidden Attribut auf true auf focus oder mouseover Ereignisse Ihre Lieblings JavaScript-Code verwenden und zu falsch auf blur und mouseout Ereignisse.