Tooltip Best Practices

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".

auf

<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!