Diese Seite wurde von der Cloud Translation API übersetzt.

Bedienungshilfen für Webentwickler

Wenn Sie die Barrierefreiheit verbessern, ist Ihre Website für alle Nutzer leichter zu verwenden.

Addy Osmani

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: visuell, Hörvermögen, Mobilität, Wahrnehmung, Spracherkennung und neuronale Netze. Viele Tools und Ressourcen können dabei helfen, auch wenn Sie noch keine Erfahrung mit Barrierefreiheit im Internet haben.

Mehr als eine Milliarde Menschen mit Beeinträchtigungen leben.

Websites müssen auf mehreren Geräten funktionieren, damit sie zugänglich sind mit unterschiedlichen Bildschirmgrößen und verschiedenen Eingabetypen, z. B. Screenreadern. Außerdem sollten Websites von der breitesten Nutzergruppe, auch für Menschen mit Beeinträchtigungen.

Nutzer können folgende Beeinträchtigungen haben:

Vision	Hörhilfen	Mobilität
Eingeschränktes Sehvermögen Blindheit Farbenblindheit Grauer Star Blendeffekte	Schwerhörig Gehörlosigkeit Rauschen Ohrentzündung	Rückenmarksverletzung Eingeschränkte Fingerfertigkeit Hände voll
Kognitiv	Sprachausgabe	Neural
Lernschwäche Müdigkeit oder Ablenkung Migräne Autismus Inanspruchnahme	Umgebungslärm Halsschmerzen Sprachbehinderung Sprechen nicht möglich	Depressionen PTSD Bipolare Störung Angststörungen

Visuelle Probleme reichen von der Unfähigkeit, Farben zu unterscheiden, bis hin zu einer Sehbehinderung.

Sicherstellen, dass der Textinhalt eine Mindestanforderung erfüllt Grenzwert für das Kontrastverhältnis.
Vermeiden Sie die Weitergabe von Informationen. nur mit Farben und darauf achten, dass der gesamte Text resizable.
Sicherstellen, dass alle Komponenten der Benutzeroberfläche mit Hilfstechnologien verwendet werden können etwa Screenreader, Lupen und Braillezeilen. Dadurch wird sichergestellt, dass UI-Komponenten mit Markup versehen sind. sodass Bedienungshilfen-APIs programmatisch role, state, value und title eines beliebigen Elements.

Screenshot der Kurzinfo zum Untersuchen des Elements in den Chrome-Entwicklertools.

Ich persönlich lebe mit eingeschränktem Sehvermögen und sehe mir oft Websites an, die Entwicklertools und das Terminal. Die Zoom-Unterstützung spielt in der Entwicklungsphase To-do-Listen, kann es für Nutzer wie mich einen großen Unterschied machen.

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

Bereitstellen Textalternativen für alle Inhalte, die kein reiner Text sind.
Testen, ob die UI-Komponenten noch funktionieren ohne Ton.

Screenshot des ChromeVox-Screenreaders, der eine Webseite vorliest.

Mobilitätsprobleme können sein, dass z. B. die Maus, die Tastatur oder Touchscreen verwenden.

Inhalte der UI-Komponenten erstellen Bedienung per Tastatur für alle Aktionen, für die man andernfalls mit der Maus arbeiten würde.
Achten Sie darauf, dass die Seiten korrekt für Hilfstechnologien ausgezeichnet sind, einschließlich Screenreader, Sprachsteuerungssoftware und physische Schalter, verwenden in der Regel dieselben APIs.

Kognitive Probleme bedeuten, dass ein Nutzer möglicherweise Hilfstechnologien benötigt. die ihnen beim Lesen von Text helfen. Es ist also wichtig, dass es Alternativen gibt.

Seien Sie vorsichtig, wenn Sie Animationen verwenden. Vermeiden Sie Videos und Animationen, die wiederholen oder Blitzlicht, was Probleme verursachen kann für manche Nutzende.

Die prefers-reduced-motion Mit der CSS-Medienabfrage können Sie Animationen begrenzen und automatisches Abspielen von Videos für Nutzer, 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 Interaktionen, zeitbasiert.

Das mag wie eine große Basis erscheinen, aber wir werden den Prozess zur Bewertung und anschließend die Zugänglichkeit Ihrer UI-Komponenten verbessern.

Zur zusätzlichen visuellen Unterstützung hat das GOV.UK-Team für Barrierefreiheit Digitale Poster zum Thema Barrierefreiheit mit dem Sie Best Practices mit Ihrem Team teilen können.

Digitale Plakate, auf denen Tipps und Verbote für Barrierefreiheit zu sehen sind. — Sechs Poster mit Best Practices für Barrierefreiheit. Lesen Sie die Vollständiger Text:

Barrierefreiheit der UI-Komponente messen

Achten Sie bei der Prüfung der UI-Komponenten Ihrer Seite auf Barrierefreiheit:

Können Sie Ihre UI-Komponente nur mit der Tastatur verwenden?

Verwaltet die Komponente den Fokus und vermeidet Fokusfallen? Kann sie 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 semantische Informationen mit ARIA hinzugefügt?
Funktioniert Ihre UI-Komponente auch ohne Ton?

Schalten Sie Ihre Lautsprecher aus und gehen Sie Ihre Anwendungsfälle durch.
Kann Ihre UI-Komponente auch ohne Farbe verwendet werden?

Achten Sie darauf, dass Ihre UI-Komponente auch von Personen verwendet werden kann, die keine Farben sehen können. Ein hilfreiches Tool zur Simulation von Farbenblindheit ist die Chrome-Erweiterung Farbenblind: (Probieren Sie alle vier Formen der Simulation für Farbenblindheit aus.) Das könnte Sie auch interessieren: Daltonisieren die ebenfalls sehr nützlich ist.
Funktioniert Ihre UI-Komponente im Modus mit hohem Kontrast?

Alle modernen Betriebssysteme unterstützen einen Modus mit hohem Kontrast. Hoher Kontrast ist eine Chrome-Erweiterung, die Ihnen dabei helfen kann.

Standardisierte Steuerelemente (wie <button> und <select>) bieten Bedienungshilfen im Browser integriert. Sie sind mit der Taste Tab fokussierbar. Sie reagieren auf Tastaturereignisse wie Enter, Space und die Pfeiltasten. Außerdem haben sie 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 die Elemente wie <button>) keine integrierten Funktionen, darunter also Barrierefreiheit, also müssen Sie sie zur Verfügung stellen. Ein guter Ausgangspunkt, der Implementierung der Barrierefreiheit besteht darin, Ihre Komponente mit einem entsprechenden Standard zu vergleichen. (oder eine Kombination mehrerer Standardelemente, je nachdem, wie komplex sie sind) wie Ihre Komponente ist).

Die meisten Browser-Entwicklertools unterstützen die Prüfung der Barrierefreiheitsstruktur einer Seite. In den Chrome-Entwicklertools ist diese Option im Bereich Elemente auf dem Tab Bedienungshilfen verfügbar.

Screenshot der Baumansicht der Bedienungshilfen in den Chrome-Entwicklertools

Firefox verfügt auch über einen Bereich Bedienungshilfen.

Screenshot der Baumansicht für Bedienungshilfen in den FireFox-Entwicklertools

Safari zeigt im Bereich Elemente auf dem Tab Knoten Informationen zur Barrierefreiheit an.

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

Tastaturfokus verbessern

Stellen Sie im Idealfall sicher, dass auf alle Funktionen Ihrer UI-Komponente mit der Tastatur. Bei der Gestaltung der User Experience Überlegen Sie, wie Sie Ihr Element nur mit der Tastatur nutzen würden und einheitliche Tastaturinteraktionen zu finden.

Stellen Sie zunächst sicher, dass Sie für jede Komponente ein sinnvolles Fokusziel festgelegt haben. Beispielsweise kann eine komplexe Komponente wie ein Menü ein Fokusziel innerhalb eines Seite, sollte dann aber den Fokus selbst verwalten, sodass das aktive Menüelement immer im Fokus.

Screenshot eines Menüs und Untermenüs, das Fokusverwaltung erfordert. — Fokus auf ein komplexes Element lenken

Tabindex verwenden

Mit der Funktion tabindex können Sie Elemente und UI-Komponenten mit der Tastaturfokussierung hinzufügen . Nutzer, die nur über die Tastatur oder mit Hilfstechnologien arbeiten, müssen in der Lage sein, Tastaturfokus auf Elemente, um mit ihnen zu interagieren.

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

Es gibt drei Typen von tabindex-Werten:

tabindex="0" ist das am häufigsten verwendete Element und platziert das Element auf dem natürlichen Tab (definiert durch die DOM-Reihenfolge).
Ein tabindex-Wert gleich -1 führt dazu, dass das Element programmatisch verwendet wird. fokussierbar, aber nicht in der TAB-Reihenfolge.
Bei einem tabindex-Wert größer als 0 wird für das Element eine manuelle TAB-Reihenfolge festgelegt. Alle Elemente auf der Seite mit einem positiven tabindex-Wert werden besucht in nummerischer Reihenfolge vor den Elementen in der natürlichen TAB-Reihenfolge.

Einige Anwendungsfälle für tabindex im Artikel Verwendung von „tabindex“.

Stellen Sie sicher, dass der Fokus immer sichtbar ist, z. B. durch Verwenden des Standardfokusrings. oder einen erkennbaren benutzerdefinierten Fokusstil anwenden. Vergessen Sie nicht, Tastaturnutzer: Sie sollten in der Lage sein, den Fokus von einem Element wegzubewegen. nur mit der Tastatur.

Autofokus verwenden

Mit dem HTML-Attribut „autofocus“ kann ein Autor angeben, dass eine bestimmte sollte automatisch im Fokus wenn die Seite geladen wird. autofocus wird bereits unterstützt auf alle Webformular-Steuerelemente, einschließlich Schaltflächen. Um Elemente in Ihren eigenen benutzerdefinierten UI-Komponenten automatisch zu fokussieren, rufen Sie die Methode focus() auf. werden für alle HTML-Elemente unterstützt, auf die (z. B. document.querySelector('myButton').focus()).

Tastaturinteraktion hinzufügen

Sobald Ihre UI-Komponente fokussierbar ist, präsentieren Sie eine gute Geschichte mit Tastaturinteraktionen. Eine Komponente wird durch die Verarbeitung geeigneter Tastaturereignisse fokussiert. Erlauben Sie dem Nutzer beispielsweise, Menüoptionen mit den Pfeiltasten auszuwählen. und Space oder Enter, um die Schaltflächen zu aktivieren. Der Leitfaden zu Designmustern für ARIA finden Sie hier einige Orientierungshilfen.

Vergewissern Sie sich schließlich, dass Ihre Tastenkombinationen sichtbar sind. Häufig wird eine Legende für Tastenkombinationen (Bildschirmtext) um den Nutzer über Verknüpfungen zu informieren. Beispiel: "Drücke ? für Tastatur Tastenkombinationen.“ Alternativ kann der Nutzer mit einem Hinweis wie der Kurzinfo darüber informiert werden. zu einer Tastenkombination.

Die Bedeutung des Fokusmanagements kann nicht hoch genug betont werden. Ein wichtiges Beispiel ist Navigationsleiste. Wenn Sie der Seite eine UI-Komponente hinzufügen, müssen Sie den Fokus auf ein darin enthaltenes Element richten. Andernfalls müssen die Nutzenden möglicherweise durch die gesamte Seite navigieren, um dorthin zu gelangen. Das kann frustrierend sein, Testen Sie daher den Fokus für alle über die Tastatur navigierbaren Komponenten auf Ihrer Seite.

Test der Ein/Aus-Schaltfläche für den WalkMe-Status.

// 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 Screenreader-Nutzung sicherstellen

Ungefähr 1% bis 2% der Menschen verwenden einen Screenreader. Können Sie alle wichtigen und über den Screenreader und die Tastatur mit der Komponente interagieren allein?

Die folgenden Fragen sollen Ihnen dabei helfen, die Barrierefreiheit von Screenreadern zu verbessern.

Gibt es für alle Komponenten und Bilder sinnvolle Textalternativen?

Informationen über Name oder Zweck einer interaktiven Komponente visuell dargestellt, eine barrierefreie Textalternative.

Wenn Ihre <fancy-menu>-UI-Komponente beispielsweise nur ein Zahnradsymbol um anzuzeigen, dass es sich um ein Einstellungsmenü handelt. eine barrierefreie Textalternative wie z. B. „Einstellungen“, die dieselben Informationen vermittelt. Je nach Kontext können Sie eine Textalternative mit einem alt-Attribut angeben, ein aria-label-Attribut, ein aria-labelledby-Attribut, oder reinen Text im Shadow DOM. Allgemeine technische Tipps finden Sie in der WebAIM-Kurzanleitung.

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

Stellen Ihre Komponenten semantische Informationen bereit?

Hilfstechnologien übermitteln semantische Informationen, die anderen Nutzern zur Verfügung gestellt werden. sehende Nutzende durch visuelle Hinweise wie Formatierung, Cursorstil oder Position. Bei standardisierten Elementen sind diese semantischen Informationen bereits im Browser enthalten. Für benutzerdefinierte Komponenten müssen Sie jedoch ARIA, um die Informationen hinzuzufügen.

Im Allgemeinen gilt: Jede Komponente, die auf einen Mausklick oder Mouseover-Ereignis reagiert, eine Art Tastaturereignis-Listener und eine ARIA-Rolle haben, möglicherweise auch ARIA-Status und -Attribute.

Beispielsweise kann eine benutzerdefinierte <fancy-slider>-UI-Komponente die ARIA-Rolle eines Schiebereglers übernehmen, mit einigen verwandten ARIA-Attributen: aria-valuenow, aria-valuemin und aria-valuemax. Durch Binden dieser Attribute an die relevanten Eigenschaften Ihrer benutzerdefinierten Komponente ermöglichen Sie Nutzenden von assistiven Technologien, mit dem Element zu interagieren, seinen Wert ändern und sogar bewirken, dass sich die visuelle Darstellung des Elements entsprechend ändert.

Screenshot eines Schiebereglers — Eine Bereichsschiebereglerkomponente.

<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 als einziges Mittel zur Vermittlung von Informationen verwendet werden, z. B. einen Status anzeigen, Nutzende zu einer Antwort auffordern oder Daten visualisieren. Wenn Sie beispielsweise ein Kreisdiagramm haben, geben Sie Beschriftungen und Werte für jedes Segment an. damit Nutzende mit Sehbehinderung die Informationen, auch wenn nicht erkennbar ist, wo die Segmente beginnen und enden:

Ein Kreisdiagramm mit Beschriftungen und Werten, um die Barrierefreiheit sicherzustellen. — Ein barrierefreies Kreisdiagramm. (Quelle: W3C Web Accessibility Initiative)

Ist der Kontrast ausreichend?

Alle in Ihrer Komponente angezeigten Textinhalte müssen den Mindestkontrastgrenzwert auf der WCAG-AA-Ebene. Sie sollten ein Design mit hohem Kontrast verwenden, das den einen höheren AAA-Schwellenwert, und sicherzustellen, dass User-Agent-Stylesheets wenn Nutzende einen benutzerdefinierten Kontrast oder andere Farben benötigen. Sie können die Farbkontrastprüfung verwenden, beim Entwerfen Ihrer Komponente.

Sind sich übertragene oder blinkende Inhalte aufzuhalten und sicher?

Nutzende sollten Inhalte, die sich bewegen, scrollen oder länger als fünf Sekunden blinkt. Vermeiden Sie im Allgemeinen blinkende Inhalte.

Wenn etwas blinken muss, stellen Sie sicher, dass es nicht mehr als dreimal pro Sekunde blinkt.

Bedienungshilfen und Tests

Es stehen über 100 Tools zur Verfügung, die Zugänglichkeit Ihrer Website zu bewerten und deren Komponenten. Einige Tools sind automatisiert, während andere manuelle Tests erfordern.

Hier sind einige, die Sie berücksichtigen sollten:

Axe bietet automatisierte Bedienungshilfen für das Framework oder den Browser Ihrer Wahl testen. Axt Puppeteer können zum Schreiben automatisierter Barrierefreiheitstests verwendet werden.
Bedienungshilfen in Lighthouse Audit liefert hilfreiche Einblicke, um häufige Probleme mit der Barrierefreiheit zu erkennen. Der Accessibility Score ist ein gewichteter Durchschnitt aller Prüfungen zur Barrierefreiheit. basierend auf Axe-User-Folgen-Abschätzungen. Informationen zum Monitoring der Barrierefreiheit mit Continuous Integration finden Sie unter Lighthouse CI (nur auf Englisch verfügbar).
Tenon.io eignet sich zum Testen häufiger Probleme mit der Barrierefreiheit. Tenon bietet starke Integrationsunterstützung für Build-Tools, Browser (durch Erweiterungen) und sogar Texteditoren.
Es gibt viele bibliotheks- und Framework-spezifische Tools zum Hervorheben Probleme mit der Barrierefreiheit bei Komponenten. Verwenden Sie beispielsweise eslint-plugin-jsx-a11y , um Probleme mit der Barrierefreiheit von React-Komponenten im Editor hervorzuheben.

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

Mit Hilfstechnologien arbeiten

Sie können untersuchen, wie assistive Technologien Webinhalte sehen, indem Sie Barrierefreiheitsprüfung (Mac) oder Windows Automation API Testing Tools und AccProbe (Windows). Sie können sich auch die vollständige Bedienungshilfen-Baumstruktur ansehen, die Chrome erstellt indem du about://accessibility aufrufst.
Die beste Möglichkeit, die Screenreader-Unterstützung auf einem Mac zu testen, ist VoiceOver. Dienstprogramm. Verwenden Sie ⌘F5 zum Aktivieren oder Deaktivieren, Ctrl+Option ←→ zum Wechseln auf der Seite und Ctrl+Shift+Option + ↑↓, um in den Bedienungshilfen nach oben und unten zu wechseln. Baum. Eine ausführlichere Anleitung Vollständige Liste der VoiceOver-Befehle und die Liste der VoiceOver-Webbefehle
Unter Windows ist NVDA ein kostenloser Open-Source-Bildschirm Leser. Für sehende Nutzer ist dies jedoch mit einer langen Lernkurve verbunden.
ChromeOS hat eine integrierten Screenreader nutzen.

Wir arbeiten noch intensiv daran, die Zugänglichkeit im Web zu verbessern. Gemäß Web Almanac gilt Folgendes:

4 von 5 Websites haben Text, der sich in den Hintergrund einfügen lässt, sodass sie unlesbar werden.
49,91% der Seiten enthalten immer noch keine alt-Attribute für manche Bilder.
Nur 24% der Seiten, auf denen Schaltflächen oder Links verwendet werden, enthalten Labels.
Nur 22,33% der Seiten haben Labels für alle Formulareingaben.

Wir können viel tun, um Erlebnisse zu schaffen, die für Menschen mit für alle.