Bedienungshilfen für Webentwickler

Wenn Sie die Barrierefreiheit verbessern, wird Ihre Website für alle besser nutzbar.

Es ist wichtig, Websites zu erstellen, die inklusiv und für alle zugänglich sind. Es gibt mindestens sechs Hauptbereiche für Beeinträchtigungen, die Sie optimieren können: Sehschwäche, Hörvermögen, Mobilität, Wahrnehmung, Sprachqualität und neuronale Nerven. Viele Tools und Ressourcen können Ihnen dabei helfen, auch wenn Sie mit Barrierefreiheit im Internet noch nicht vertraut sind.

Mehr als eine Milliarde Menschen leben mit einer Form von Behinderung.

Um barrierefrei zu sein, müssen Websites auf verschiedenen Geräten mit unterschiedlichen Bildschirmgrößen und unterschiedlichen Eingabemöglichkeiten, z. B. Screenreadern, funktionieren. Darüber hinaus sollten Websites von einer möglichst breiten Gruppe von Nutzern verwendet werden können, auch von Nutzern mit Beeinträchtigungen.

Hier sind einige mögliche Beeinträchtigungen der Nutzenden:

Visuelle Probleme reichen von der Unfähigkeit, Farben zu unterscheiden, bis hin zu mangelndem Sehvermögen.

• Achten Sie darauf, dass der Textinhalt einen minimalen Schwellenwert für das Kontrastverhältnis erreicht.
• Verwenden Sie ausschließlich Farben und achten Sie darauf, dass der gesamte Text resizable werden kann.
• Alle Komponenten der Benutzeroberfläche müssen mit Hilfstechnologien wie Screenreadern, Lupen und Braillezeilen verwendet werden können. Dazu müssen UI-Komponenten so ausgezeichnet sein, dass Bedienungshilfen-APIs die Rolle, den Status, den Wert und den Titel jedes Elements programmatisch ermitteln können.

Ich selbst habe ein eingeschränktes Sehvermögen und sehe mir häufig Websites, die Entwicklertools und das Terminal an. Zwar steht die Unterstützung des Zooms fast nie ganz oben auf den To-do-Listen von Entwicklern, aber für Nutzer wie mich kann sie einen enormen Unterschied machen.

Hörprobleme bedeuten, dass ein Nutzer möglicherweise Probleme hat, den Ton von einer Seite zu hören.

• Stellen Sie Textalternativen für alle Inhalte bereit, in denen es sich nicht ausschließlich um Text handelt.
• Testen Sie, ob Ihre UI-Komponenten auch ohne Ton funktionieren.

Mobilitätsprobleme sind beispielsweise die Unfähigkeit, eine Maus, eine Tastatur oder einen Touchscreen zu bedienen.

• Machen Sie den Inhalt Ihrer UI-Komponenten für alle Aktionen, für die Sie normalerweise eine Maus verwenden würden, funktional über eine Tastatur zugänglich.
• Achte darauf, dass die Seiten für Hilfstechnologien wie Screenreader, Sprachsteuerungssoftware und physische Schalter korrekt gekennzeichnet sind, da diese normalerweise dieselben APIs verwenden.

Kognitive Probleme bedeuten, dass ein Nutzer möglicherweise Hilfstechnologien benötigt, die ihm beim Lesen von Text helfen. Daher ist es wichtig, Textalternativen anzubieten.

• Verwenden Sie Animationen mit Bedacht. Vermeiden Sie Videos und Animationen, die sich wiederholen oder blinken, da dies bei einigen Nutzern Probleme verursachen kann.

  Mit der CSS-Medienabfrage prefers-reduced-motion können Sie Animationen und die automatische Wiedergabe von Videos für Nutzer einschränken, die weniger Bewegung bevorzugen:

  /*
  If the user expresses a preference for reduced motion, don't use animations on buttons.
  */
  @media (prefers-reduced-motion: reduce) {
    button {
      animation: none;
    }
  }
  

• Vermeiden Sie zeitbasierte Interaktionen.

Das mag wie eine Menge Grundlagen erscheinen, aber wir werden Schritt für Schritt durch den Prozess zum Bewerten und Verbessern der Barrierefreiheit Ihrer UI-Komponenten gehen.

Für zusätzliche visuelle Unterstützung hat das GOV.UK-Team für Barrierefreiheit eine Reihe von Tipps für Barrierefreiheit im Internet erstellt, über die Sie Best Practices mit Ihrem Team teilen können.

Barrierefreiheit der UI-Komponente messen

Wenn Sie die UI-Komponenten Ihrer Seite auf Zugänglichkeit prüfen, stellen Sie sich folgende Fragen:

• Kann ich die UI-Komponente nur mit der Tastatur verwenden?

  Verwaltet die Komponente den Fokus und vermeidet sie Fokusfallen? Kann er auf die entsprechenden Tastaturereignisse reagieren?

• Können Sie Ihre UI-Komponente mit einem Screenreader verwenden?

  Haben Sie Textalternativen für visuell dargestellte Informationen bereitgestellt? Haben Sie mithilfe von ARIA semantische Informationen hinzugefügt?

• Funktioniert Ihre UI-Komponente ohne Ton?

  Schalte deine Lautsprecher aus und gehe deine Anwendungsfälle durch.

• Kann Ihre UI-Komponente ohne Farbe funktionieren?

  Achten Sie darauf, dass Ihre UI-Komponente von Personen verwendet werden kann, die keine Farben sehen können. Ein hilfreiches Tool zur Simulation von Farbenblindheit ist die Chrome-Erweiterung Colorblindly. (Probieren Sie alle vier Formen der Farbenblindheitssimulation aus.) Die ähnlich nützliche Erweiterung Daltonize könnte auch für Sie von Interesse sein.

• Funktioniert die UI-Komponente im Modus mit hohem Kontrast?

  Alle modernen Betriebssysteme unterstützen einen Modus mit hohem Kontrast. Die Chrome-Erweiterung Hoher Kontrast kann hier Abhilfe schaffen.

Bei standardisierten Steuerelementen (z. B. <button> und <select>) ist die Barrierefreiheit in den Browser integriert. Sie können über die Taste Tab fokussiert werden. Sie reagieren auf Tastaturereignisse wie Enter, Space und Pfeiltasten. Sie haben semantische Rollen, Status und Eigenschaften, die von Bedienungshilfen verwendet werden. Ihr Standardstil sollte außerdem die aufgeführten Anforderungen an die Barrierefreiheit erfüllen.

Benutzerdefinierte UI-Komponenten (mit Ausnahme von Komponenten, die Standardelemente wie <button> erweitern) haben keine integrierten Funktionen oder Bedienungshilfen. Daher müssen Sie sie angeben. Ein guter Ausgangspunkt für die Implementierung von Bedienungshilfen besteht darin, Ihre Komponente mit einem analogen Standardelement oder einer Kombination aus mehreren Standardelementen zu vergleichen, je nachdem, wie komplex die Komponente ist.

Die meisten Browser-Entwicklertools unterstützen die Untersuchung des Baums für Barrierefreiheit einer Seite. In den Chrome-Entwicklertools ist sie im Bereich Elemente auf dem Tab Bedienungshilfen verfügbar.

Firefox bietet auch einen Bereich für Bedienungshilfen.

In Safari sind Informationen zur Barrierefreiheit im Bereich Elemente auf dem Tab Knoten verfügbar.

Nachfolgend finden Sie eine Liste mit Fragen, die Sie sich stellen können, wenn Sie versuchen, die Barrierefreiheit Ihrer UI-Komponenten zu verbessern.

Tastaturfokus verbessern

Idealerweise sollten Sie dafür sorgen, dass alle Funktionen Ihrer UI-Komponente über eine Tastatur zugänglich sind. Überlegen Sie beim Entwerfen Ihrer User Experience, wie Sie das Element allein mit der Tastatur verwenden würden, und überlegen Sie, wie Sie die Tastaturinteraktionen einheitlich gestalten würden.

Stellen Sie zunächst sicher, dass Sie für jede Komponente ein vernünftiges Ziel für die Ausrichtung festgelegt haben. Eine komplexe Komponente wie ein Menü kann beispielsweise ein Ziel auf einer Seite sein, sollte dann jedoch den Fokus selbst verwalten, sodass der aktive Menüpunkt immer im Fokus ist.

Tabindex verwenden

Mit dem Attribut tabindex können Sie den Tastaturfokus für Elemente und UI-Komponenten festlegen. Nutzer von Nur-Tastatur- und Hilfstechnologien müssen den Tastaturfokus auf Elemente legen können, um mit ihnen zu interagieren.

Integrierte interaktive Elemente (wie <button>) sind implizit fokussierbar, sodass sie kein tabindex-Attribut benötigen, es sei denn, Sie müssen ihre Position in der TAB-Reihenfolge ändern.

Es gibt drei Arten von tabindex-Werten:

• tabindex="0" ist am häufigsten und platziert das Element in der natürlichen TAB-Reihenfolge (definiert durch die DOM-Reihenfolge).
• Ein tabindex-Wert größer als 0 platziert das Element in einer manuellen TAB-Reihenfolge. Alle Elemente auf der Seite mit einem positiven tabindex-Wert werden in numerischer Reihenfolge vor den Elementen in der natürlichen TAB-Reihenfolge besucht.
• Ein tabindex-Wert gleich -1 führt dazu, dass das Element programmatisch fokussiert werden kann, aber nicht in der TAB-Reihenfolge.

Verwenden Sie für benutzerdefinierte UI-Komponenten immer die tabindex-Werte 0 oder -1, da Sie die Reihenfolge der Elemente auf einer bestimmten Seite nicht im Voraus bestimmen können. Ein tabindex-Wert von -1 ist besonders nützlich, um den Fokus innerhalb komplexer Komponenten zu verwalten.

Achten Sie darauf, dass der Fokus immer sichtbar ist – entweder durch Verwendung des Standardfokusrings oder durch Anwenden eines erkennbaren benutzerdefinierten Fokusstils. Tastaturnutzer sollten nicht gefangen werden. Sie sollten nur mit der Tastatur den Fokus von einem Element wegbewegen können.

Autofokus verwenden

Mit dem HTML-Autofokus-Attribut kann ein Autor angeben, dass ein bestimmtes Element beim Laden der Seite automatisch den Fokus legen soll. autofocus wird bereits für alle Webformularsteuerelemente, einschließlich Schaltflächen, unterstützt. Wenn Sie Elemente in Ihren eigenen benutzerdefinierten UI-Komponenten automatisch fokussieren möchten, rufen Sie die Methode focus() auf, die für alle HTML-Elemente unterstützt wird, die fokussiert werden können (z. B. document.querySelector('myButton').focus()).

Tastaturinteraktion hinzufügen

Sobald Ihre UI-Komponente fokussierbar ist, können Sie geeignete Tastaturereignisse für eine gute Tastaturinteraktionsstory bereitstellen, wenn eine Komponente im Fokus ist. Erlaube dem Nutzer beispielsweise, Menüoptionen mit den Pfeiltasten auszuwählen und mit Space oder Enter Schaltflächen zu aktivieren. Eine Orientierungshilfe finden Sie im ARIA-Leitfaden zu Designmustern.

Prüfen Sie abschließend, ob Ihre Tastenkombinationen sichtbar sind. Häufig wird eine Legende für Tastenkombinationen (Bildschirmtext) verwendet, um den Nutzer über die vorhandenen Tastenkombinationen zu informieren. Beispiel: "Drücken Sie die Taste ? für Tastenkombinationen“. Alternativ kann ein Hinweis wie eine Kurzinfo verwendet werden, um den Nutzer über eine Verknüpfung zu informieren.

Die Bedeutung des Fokusmanagements kann nicht genug betont werden. Ein wichtiges Beispiel ist eine Navigationsleiste. Wenn du der Seite eine UI-Komponente hinzufügst, musst du den Fokus auf ein darin enthaltenes Element richten. Andernfalls müssen Nutzer möglicherweise die gesamte Seite mit der Tabulatortaste aufrufen, um dorthin zu gelangen. Das kann frustrierend sein. Testen Sie daher unbedingt den Fokus auf alle über die Tastatur navigierbaren Komponenten auf Ihrer Seite.

// Example for expanding and collapsing a category with the Space key
const category = await page.$(`.category`);

// verify tabIndex, role and focus
expect(await page.evaluate(elem => elem.getAttribute(`role`), category)).toEqual(`button`);
expect(await page.evaluate(elem => elem.getAttribute(`tabindex`), category)).toEqual(`0`);
expect(await page.evaluate(elem => window.document.activeElement === elem, category)).toEqual(true);

// verify aria-expanded = false
expect(await page.evaluate(elem => elem.getAttribute(`aria-expanded`), category)).toEqual(`false`);

// toggle category by pressing Space
await page.keyboard.press('Space');

// verify aria-expanded = true
expect(await page.evaluate(elem => elem.getAttribute(`aria-expanded`), category)).toEqual(`true`);

Erfolgreiche Verwendung des Screenreaders prüfen

Etwa 1% bis 2% der Nutzer verwenden einen Screenreader. Können Sie alle wichtigen Informationen verstehen und allein mit dem Screenreader und der Tastatur mit der Komponente interagieren?

Die folgenden Fragen helfen Ihnen dabei, sich mit der Barrierefreiheit von Screenreadern zu befassen.

Haben alle Komponenten und Bilder aussagekräftige Textalternativen?

Wenn Informationen über Name oder Zweck einer interaktiven Komponente visuell vermittelt werden, solltest du eine barrierefreie Textalternative bereitstellen.

Wenn für Ihre <fancy-menu>-UI-Komponente beispielsweise nur ein Zahnradsymbol angezeigt wird, um darauf hinzuweisen, dass es sich um ein Einstellungsmenü handelt, ist eine zugängliche Textalternative wie „Einstellungen“ erforderlich, die dieselben Informationen enthält. Je nach Kontext können Sie mit einem alt-Attribut, einem aria-label-Attribut, einem aria-labelledby-Attribut oder im Shadow DOM eine Textalternative verwenden. Allgemeine technische Tipps finden Sie in der WebAIM-Kurzübersicht.

Jede UI-Komponente, die ein Bild anzeigt, sollte einen Mechanismus zur Bereitstellung von alternativem Text für das Bild bieten, analog zum Attribut alt.

Liefern Ihre Komponenten semantische Informationen?

Hilfstechnologien übertragen semantische Informationen, die Sehbehinderten durch visuelle Hinweise wie Formatierung, Cursorstil oder Position ausgedrückt werden. Bei standardisierten Elementen sind diese semantischen Informationen im Browser integriert. Bei benutzerdefinierten Komponenten müssen Sie jedoch ARIA verwenden, um die Informationen hinzuzufügen.

Im Allgemeinen sollte jede Komponente, die ein Mausklick- oder Hover-Ereignis überwacht, eine Art Tastaturereignis-Listener und eine ARIA-Rolle haben, möglicherweise auch ARIA-Zustände und -Attribute.

Beispielsweise könnte eine benutzerdefinierte <fancy-slider>-UI-Komponente die ARIA-Rolle „Slider“ einnehmen, die über einige zugehörige ARIA-Attribute verfügt: aria-valuenow, aria-valuemin und aria-valuemax. Wenn Sie diese Attribute mit den relevanten Eigenschaften Ihrer benutzerdefinierten Komponente verknüpfen, können Nutzer von Hilfstechnologien mit dem Element interagieren, seinen Wert ändern und sogar dafür sorgen, dass sich die visuelle Darstellung des Elements entsprechend ändert.

<fancy-slider role="slider" aria-valuemin="1" aria-valuemax="5" aria-valuenow="2.5">
</fancy-slider>

Können Nutzende alles verstehen, ohne auf Farben angewiesen zu sein?

Farbe sollte nicht das einzige Mittel zur Vermittlung von Informationen sein, z. B. um einen Status anzuzeigen, den Nutzer zu einer Antwort aufzufordern oder Daten zu visualisieren. Wenn Sie beispielsweise ein Kreisdiagramm haben, geben Sie Labels und Werte für jedes Segment an, damit Nutzer mit Sehbeeinträchtigungen die Informationen verstehen können, auch wenn sie nicht sehen können, wo die Segmente beginnen und enden:

Ist der Kontrast ausreichend?

Alle in Ihrer Komponente angezeigten Textinhalte sollten den Mindestkontrastgrenzwert auf WCAG-AA – AA erreichen. Du kannst ein Design mit hohem Kontrast bereitstellen, das den höheren AAA-Grenzwert erfüllt. Außerdem müssen User-Agent-Stylesheets angewendet werden, wenn Nutzer benutzerdefinierten Kontrast oder andere Farben benötigen. Sie können diesen Farbkontrastprüfer beim Entwerfen Ihrer Komponente als Hilfe verwenden.

Sind verschiebbare oder blinkende Inhalte haltbar und sicher?

Nutzer sollten Inhalte, die sich mehr als fünf Sekunden lang bewegen, scrollen oder blinken, pausieren, stoppen oder ausblenden können. Blinkende Inhalte sollten generell vermieden werden.

Wenn etwas blinken muss, darf es nicht öfter als dreimal pro Sekunde blinken.

Bedienungshilfen und Tests

Es gibt über 100 Tools, mit denen du die Zugänglichkeit deiner Website und ihrer Komponenten bewerten kannst. Einige Tools sind automatisiert, andere erfordern manuelle Tests.

Hier sind einige zur Berücksichtigung:

• Axe ermöglicht automatisierte Tests der Barrierefreiheit für das Framework oder den Browser Ihrer Wahl. Axe Puppeteer kann zum Schreiben automatisierter Bedienungshilfentests verwendet werden.

• Eine Prüfung der Barrierefreiheit in Lighthouse bietet hilfreiche Informationen zum Aufdecken häufiger Probleme bei der Barrierefreiheit. Die Bewertung der Barrierefreiheit ist ein gewichteter Durchschnitt aller Prüfungen zur Barrierefreiheit auf der Grundlage von Axe-Auswirkungen auf die Nutzer. Informationen zum Monitoring der Zugänglichkeit mit Continuous Integration finden Sie unter Lighthouse CI.

  

• Tenon.io eignet sich zum Testen häufiger Probleme bei der Barrierefreiheit. Tenon unterstützt Build-Tools, Browser (durch Erweiterungen) und sogar Texteditoren umfassend.

• Es gibt viele bibliotheks- und Framework-spezifische Tools, mit denen Sie Probleme mit der Barrierefreiheit von Komponenten hervorheben können. Verwenden Sie beispielsweise eslint-plugin-jsx-a11y, um Probleme mit der Barrierefreiheit von React-Komponenten in Ihrem Editor hervorzuheben.

  

  Wenn Sie Angular verwenden, bietet codelyzer auch Audits zur Barrierefreiheit im Editor:

  

Mit Hilfstechnologien arbeiten

• Mit dem Accessibility Inspector (Mac) oder mit den Windows Automation API-Testtools und AccProbe (Windows) können Sie untersuchen, wie Hilfstechnologien Webinhalte sehen. Sie können sich auch den vollständigen Baum für Bedienungshilfen, die von Chrome erstellt wurde, ansehen, indem Sie about://accessibility aufrufen.
• Ob Screenreader auf einem Mac unterstützt werden, lässt sich am besten mit dem Dienstprogramm VoiceOver prüfen. Verwenden Sie ⌘F5, um sie zu aktivieren oder zu deaktivieren, Ctrl+Option ←→, um auf der Seite zu blättern, und Ctrl+Shift+Option + ↑↓, um in der Struktur der Bedienungshilfen nach oben oder unten zu wechseln. Eine ausführlichere Anleitung finden Sie in der vollständigen Liste der VoiceOver-Befehle und in der Liste der VoiceOver-Webbefehle.

• Unter Windows ist NVDA ein kostenloser Open-Source-Screenreader. Für sehende Nutzer ist die Lernkurve jedoch mit einem recht hohen Aufwand verbunden.

  

• ChromeOS hat einen integrierten Screenreader.

Wir haben einen langen Weg zur Verbesserung der Barrierefreiheit im Web. Gemäß Web Almanac gilt Folgendes:

• 4 von 5 Websites haben Text, der sich in den Hintergrund einfügt, wodurch er unlesbar wird.
• 49,91% der Seiten stellen für einige Bilder immer noch keine alt-Attribute bereit.
• Nur 24% der Seiten, auf denen Schaltflächen oder Links verwendet werden, enthalten Labels.
• Nur 22,33% der Seiten enthalten Labels für alle eingegebenen Formulare.

Wir können viel tun, um eine barrierefreie Umgebung für alle zu schaffen.