M

MLOG

Deutsch

Ein umfassender Leitfaden zur Implementierung barrierefreier Tooltips mit Hover- und Fokus-Zuständen, um die Benutzerfreundlichkeit für alle Nutzer, einschließlich Menschen mit Behinderungen, sicherzustellen.

Tooltip-Implementierung: Barrierefreie Informationen bei Hover und Fokus

Tooltips sind kleine, kontextbezogene Hilfenachrichten, die erscheinen, wenn ein Benutzer mit dem Mauszeiger über ein Element fährt oder es fokussiert. Sie können zusätzliche Informationen bereitstellen, den Zweck eines Elements verdeutlichen oder Hinweise zur Verwendung einer Funktion geben. Allerdings können Tooltips leicht zu Barrierefreiheits-Alpträumen werden, wenn sie nicht korrekt implementiert sind. Dieser Leitfaden beschreibt bewährte Methoden zur Erstellung von Tooltips, die für alle, einschließlich Nutzer mit Behinderungen, verwendbar sind.

Warum Barrierefreiheit bei Tooltips wichtig ist

Barrierefreiheit geht nicht nur um die Einhaltung von Vorschriften; es geht darum, eine bessere Benutzererfahrung für alle zu schaffen. Wenn Tooltips nicht barrierefrei sind, können sie Nutzer ausschließen, die auf assistierende Technologien wie Screenreader, Tastaturnavigation oder Spracheingabe angewiesen sind. Betrachten Sie diese Szenarien:

Indem wir bewährte Praktiken der Barrierefreiheit befolgen, können wir sicherstellen, dass Tooltips die Benutzererfahrung für alle verbessern anstatt sie zu beeinträchtigen.

Schlüsselprinzipien für barrierefreie Tooltips

Die folgenden Prinzipien sind entscheidend für die Erstellung barrierefreier Tooltips:

  1. Alternativen Zugang bieten: Stellen Sie sicher, dass Tooltips sowohl über Hover als auch über Tastaturfokus zugänglich sind.
  2. ARIA-Attribute verwenden: Verwenden Sie ARIA-Attribute (Accessible Rich Internet Applications), um Tooltips für assistierende Technologien korrekt zu identifizieren und zu beschreiben.
  3. Fokus verwalten: Kontrollieren Sie, wohin der Fokus geht, wenn ein Tooltip angezeigt und ausgeblendet wird.
  4. Ausreichenden Kontrast sicherstellen: Sorgen Sie für ausreichend Farbkontrast zwischen dem Tooltip-Text und dem Hintergrund.
  5. Genügend Zeit lassen: Geben Sie den Nutzern genug Zeit, den Inhalt des Tooltips zu lesen.
  6. Sie ausblendbar machen: Bieten Sie eine klare Möglichkeit, den Tooltip zu schließen.
  7. Übermäßigen Gebrauch vermeiden: Verwenden Sie Tooltips sparsam und nur, wenn es notwendig ist.

Implementierungstechniken

1. Verwendung von Hover und Fokus

Der kritischste Aspekt barrierefreier Tooltips ist die Sicherstellung, dass sie sowohl für Maus- als auch für Tastaturnutzer zugänglich sind. Das bedeutet, der Tooltip sollte sowohl bei Hover als auch bei Fokussierung des Elements erscheinen.

HTML:

<a href="#" aria-describedby="tooltip-example">Beispiel-Link</a>
<div id="tooltip-example" role="tooltip" style="display: none;">Dies ist ein Beispiel-Tooltip.</div>

CSS:

a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Sicherstellen, dass der Tooltip im Vordergrund ist */
}

Erklärung:

JavaScript (Erweiterte Steuerung - Optional):

Während CSS einfache Ein-/Ausblendungen bewältigen kann, ermöglicht JavaScript eine robustere Steuerung, insbesondere wenn Tooltips dynamisch generiert werden oder komplexeres Verhalten erfordern.

const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});

2. Verwendung von ARIA-Attributen

ARIA-Attribute sind unerlässlich, um assistierenden Technologien semantische Informationen bereitzustellen. Hier ist eine Aufschlüsselung der wichtigsten Attribute:

Beispiel:

<button aria-describedby="help-tooltip">Senden</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Klicken Sie hier, um das Formular abzusenden.</div>

JavaScript (für aria-hidden):

const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

3. Fokusmanagement

Wenn ein Tooltip erscheint, sollte er im Allgemeinen *nicht* den Fokus vom auslösenden Element stehlen. Der Fokus sollte auf dem Element bleiben, das den Tooltip ausgelöst hat. Dies stellt sicher, dass Tastaturnutzer die Seite ohne unerwartete Unterbrechungen weiter navigieren können.

Es kann jedoch Situationen geben, in denen Sie den Fokus *absichtlich* auf den Tooltip verschieben möchten, insbesondere wenn der Tooltip interaktive Elemente (z. B. Links, Schaltflächen) enthält. In diesem Fall stellen Sie sicher, dass:

In den meisten Fällen ist es für die Einfachheit und Benutzerfreundlichkeit vorzuziehen, auf ein Fokusmanagement innerhalb des Tooltips selbst zu verzichten.

4. Sicherstellung eines ausreichenden Kontrasts

Farbkontrast ist entscheidend für die Lesbarkeit. Stellen Sie sicher, dass die Textfarbe in Ihren Tooltips einen ausreichenden Kontrast zum Hintergrund aufweist. Die Web Content Accessibility Guidelines (WCAG) empfehlen ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text (18pt oder 14pt fett).

Verwenden Sie Online-Kontrastprüfer, um sicherzustellen, dass Ihre Farbauswahl den Barrierefreiheitsstandards entspricht. Beispiele für Kontrastprüfer sind:

Beispiel (Guter Kontrast):

.tooltip {
  background-color: #000;
  color: #fff;
}

Beispiel (Schlechter Kontrast):

.tooltip {
  background-color: #fff;
  color: #eee;
}

5. Ausreichend Zeit gewähren

Benutzer benötigen ausreichend Zeit, um den Inhalt des Tooltips zu lesen. Vermeiden Sie Tooltips, die zu schnell verschwinden. Obwohl es keine magische Zahl gibt, streben Sie eine minimale Anzeigezeit von einigen Sekunden an. Der Tooltip sollte auch so lange sichtbar bleiben, wie der Benutzer über das auslösende Element hovert oder es fokussiert hat. Wenn Sie den Tooltip aufgrund anderer Ereignisse schließen müssen, geben Sie einen Hinweis, dass der Tooltip geschlossen wird.

Wenn der Inhalt des Tooltips lang ist, sollten Sie eine Möglichkeit für den Benutzer in Betracht ziehen, den Tooltip manuell zu schließen (z. B. eine Schließen-Schaltfläche oder das Drücken der Escape-Taste).

6. Sie ausblendbar machen

Obwohl Tooltips oft automatisch verschwinden, wenn der Benutzer die Maus wegbewegt oder den Fokus entfernt, ist es eine gute Praxis, eine klare Möglichkeit zum manuellen Schließen bereitzustellen, insbesondere bei langen Tooltips oder solchen, die interaktive Elemente enthalten.

Methoden zum Schließen von Tooltips:

Beispiel (Schließen-Button):

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  Dies ist mein Tooltip-Inhalt.
  <button onclick="hideTooltip()">Schließen</button>
</div>

Beispiel (Escape-Taste):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Ersetzen Sie dies durch Ihre tatsächliche Funktion zum Ausblenden des Tooltips
  }
});

7. Übermäßigen Gebrauch vermeiden

Tooltips sollten sparsam und nur dann verwendet werden, wenn sie wirklich hilfreiche Informationen liefern. Eine übermäßige Nutzung von Tooltips kann die Benutzeroberfläche überladen, Benutzer ablenken und zu einer frustrierenden Erfahrung führen.

Alternativen zu Tooltips:

Erweiterte Überlegungen

Dynamischer Inhalt

Wenn der Inhalt Ihres Tooltips dynamisch generiert wird (z. B. aus einer API geladen oder basierend auf Benutzereingaben aktualisiert), stellen Sie sicher, dass das aria-describedby-Attribut und die Sichtbarkeit des Tooltips entsprechend aktualisiert werden. Verwenden Sie JavaScript, um diese Aktualisierungen zu verwalten.

Positionierung

Überlegen Sie sorgfältig die Positionierung Ihrer Tooltips. Vermeiden Sie es, sie so zu platzieren, dass sie wichtige Inhalte verdecken oder Layoutverschiebungen verursachen. Achten Sie auf unterschiedliche Bildschirmgrößen und Auflösungen und verwenden Sie CSS, um sicherzustellen, dass Tooltips immer innerhalb des sichtbaren Bereichs (Viewport) bleiben.

Mobile Geräte

Tooltips basieren traditionell auf Hover-Interaktionen, die auf Touch-Geräten nicht verfügbar sind. Für mobile Geräte sollten alternative Interaktionsmethoden in Betracht gezogen werden, wie zum Beispiel:

Testen Ihrer Tooltips

Testen Sie Ihre Tooltips gründlich, um sicherzustellen, dass sie für alle Benutzer zugänglich sind. Verwenden Sie eine Kombination aus manuellen Tests und automatisierten Barrierefreiheitstools.

Testmethoden:

Internationalisierung (i18n) und Lokalisierung (l10n)

Bei der Entwicklung von Tooltips für ein globales Publikum sollten Sie Internationalisierung und Lokalisierung berücksichtigen:

Fazit

Die Implementierung barrierefreier Tooltips erfordert sorgfältige Planung und Liebe zum Detail. Indem Sie die in diesem Leitfaden beschriebenen Prinzipien und Techniken befolgen, können Sie Tooltips erstellen, die für jeden, unabhängig von seinen Fähigkeiten, nutzbar sind. Denken Sie daran, dass Barrierefreiheit ein fortlaufender Prozess ist, also testen und verfeinern Sie Ihre Tooltips weiterhin, um sicherzustellen, dass sie den Bedürfnissen all Ihrer Benutzer entsprechen.

Ressourcen

Tooltip-Implementierung: Barrierefreie Informationen bei Hover und Fokus | MLOG