Dieser Leitfaden fasst Best Practices für zug?ngliche Tooltips zusammen und zeichnet von führenden Barrierefreiheitsexperten.

Tooltips verstehen

Tooltips bieten kurze Texthinweise für UI -Elemente an, die auf Schwebepl?tzen oder Fokus angezeigt werden. Eine pr?gnante Definition: Eine nicht modale überlagerung, die zus?tzlichen, beschreibenden Text über eine UI-Steuerung liefert. Entscheidend ist, dass zug?ngliche Tooltips nur beschreibenden Text und keine interaktiven Elemente enthalten. Wenn Interaktivit?t erforderlich ist, verwenden Sie stattdessen einen Dialog.

Zwei Tooltip -Typen

Tooltips dienen zwei Hauptzwecken:

1. Symbol Beschriftung: Für kurze Beschriftungen (ein oder zwei W?rter) verwenden Sie das Attribut aria-labelledby. Für zus?tzlichen Kontext (z. B. eine Benachrichtigungszahl) geben Sie eine platz getrennte Liste von IDs.

   <button aria-labelledby="notification-count notification-label">
       <span id="notification-count">3</span>
       <span id="notification-label">Notifications</span>
   </button>
   <div role="tooltip" id="tooltip-label">Notifications</div>

2. Kontextbeschreibung: Verwenden Sie für l?ngere Beschreibungen aria-describedby. Das Symbol selbst ben?tigt einen zug?nglichen Namen, der idealerweise als versteckter Text im Element enthalten ist.

   <button aria-describedby="tooltip-description">
       <span style="display:none;">Notifications</span>
       <span aria-hidden="true">?</span>
   </button>
   <div role="tooltip" id="tooltip-description">View and manage notification settings</div>

Essentielles DO und Don's

tun:

• Verwenden Sie aria-labelledby oder aria-describedby entsprechend.
• Verwenden Sie den role="tooltip" auch dann, wenn der aktuelle Bildschirmleser -Unterstützung begrenzt ist. Zukünftige Unterstützung kann sich verbessern.
• ?ffnen Sie Mausover/Focus, schlie?en Sie Mausout/Blur.
• Verhindern Sie die Entlassung von Tooltip, wenn Sie über seinen Inhalt schweben.
• Tastaturverschluss über die Escape -Taste aktivieren (WCAG 1.4.13).

Nicht:

• Verwenden Sie das Attribut title (es hat erhebliche Zug?nglichkeitsprobleme).
• Verwenden Sie aria-haspopup mit role="tooltip" (Tooltips sind nicht interaktiv).
• Platzieren Sie den wesentlichen Inhalt in Tooltips; Bildschirmleser ignorieren m?glicherweise zugeordnete Aria -Attribute.

Einschr?nkungen und Alternativen

Tooltips sind von Natur aus unzug?nglich, um Ger?te aufgrund des Mangels an Schwebepl?tzen und Fokus zu berühren. Die beste L?sung besteht h?ufig darin, das Etikett oder die Beschreibung direkt in das Design zu integrieren. Betrachten Sie für umfangreiche Inhalte (einschlie?lich interaktiver Elemente) ein Toggletip oder ein <dialog></dialog> -Element. Toggletips, die oft durch ein "I" -Symbol angegeben sind, geben Sie Informationen in einer lebenden Region mit dem role="status".

<button aria-controls="toggletip-content">
    <span aria-hidden="true">?</span>
</button>
<div id="toggletip-content" role="status" aria-live="assertive" style="display:none;">This clarifies whatever needs clarifying</div>

Weitere Informationen zu Toggletips finden Sie in den folgenden Ressourcen.

Weiteres Lesen

• Kl?rung der Beziehung zwischen Popovers und Dialogen (Zell Liew)
• Tooltips und Toggletips (inklusive Komponenten)
• Tooltips in der Zeit von WCAG 2.1 (Sarah Higley)
• kurze Notiz zu Aria-Label, Aria-Labelledby und Aria-beschrieben von (Léonie Watson)
• einige praktisch mit dem HTML-Dialogelement (Chris Coyier)

Das obige ist der detaillierte Inhalt vonTooltip Best Practices. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!