Tipps zur Barrierefreiheit für Webentwickler

Inhalt

Durch die Verbesserung der Zugänglichkeit wird Ihre Website für alle Benutzer benutzerfreundlicher.

6. Dezember 2019

Es ist großartig, Websites zu erstellen, die inklusiv und für alle zugänglich sind.
Es gibt mindestens sechs Schlüsselbereiche für Behinderungen, für die Sie optimieren können:
visuell, Hören, Mobilität, Erkenntnis, Rede, und neuronale.
Viele Tools und Ressourcen können hier helfen,
even if you’re totally new to Netz accessibility.

Über eine Milliarde Menschen leben mit irgendeiner Form von Behinderung.
Sie könnten irgendwann in einem lauten Raum gewesen sein
versuche das Gespräch um dich herum zu hören
oder bei schlechten Lichtverhältnissen versuchen, im Dunkeln etwas zu finden.
Erinnerst du dich an die Frustration, die du unter diesen Umständen empfunden hast?
Stellen Sie sich nun vor, dieser vorübergehende Zustand wäre dauerhaft.
Wie unterschiedlich wären Ihre Erfahrungen im Web?

Um zugänglich zu sein, müssen Sites auf mehreren Geräten funktionieren
mit unterschiedlichen Bildschirmgrößen und verschiedenen Arten von Eingaben, wie z. B. Bildschirmlesegeräten.
Darüber hinaus sollten Websites für die breiteste Benutzergruppe nutzbar sein.
einschließlich Menschen mit Behinderungen.
Hier ist ein Beispiel für einige Behinderungen, die Ihre Benutzer möglicherweise haben:

Vision	Hören	Mobilität
Schlechte Sicht Blindheit Farbenblindheit Katarakte Sonnenblendung	Hörbehinderte Taubheit Lärm Ohrinfektion	Rückenmarksverletzung Begrenzte Geschicklichkeit Hände voll
Kognitiv	Rede	Neuronale
Lernschwäche Schläfrigkeit oder Ablenkung Migräne Autismus Krampfanfall	Umgebungsgeräusche Halsschmerzen Sprachfehler Unfähig zu sprechen	Depression PTBS Bipolare Störung Angst

Visuelle Probleme reichen von der Unfähigkeit, Farben zu unterscheiden, bis hin zu keiner Sicht.

Stellen Sie sicher, dass der Textinhalt ein Minimum erfüllt
Kontrastverhältnisschwelle.
Vermeiden Sie die Übermittlung von Informationen
ausschließlich mit Farbe verwenden
und stellen Sie sicher, dass der gesamte Text ist
der Größe veränderbar.
Stellen Sie sicher, dass alle Komponenten der Benutzeroberfläche mit unterstützenden Technologien verwendet werden können
wie Bildschirmleser, Lupen und Braillezeilen.
Dies beinhaltet die Sicherstellung, dass UI-Komponenten markiert sind
so dass Eingabehilfen-APIs programmgesteuert bestimmen können
das Rolle, Zustand, Wert, und Titel eines beliebigen Elements.

Trinkgeld: Die Elementinspektionsfunktion im Chrome-, Edge- und Firefox-Entwickler
tools displays a tooltip of CSS properties
Dazu gehört eine schnelle Überprüfung des Farbkontrastverhältnisses.

Inspect-Element-5474631

Ich persönlich lebe mit Sehbehinderung und sehe mich oft dabei, Websites zu vergrößern.
ihre DevTools und das Terminal.
Während die Unterstützung von Zoom fast nie ganz oben auf der To-Do-Liste der Entwickler steht,
Für Benutzer wie mich kann dies einen großen Unterschied machen.

Hörprobleme Dies bedeutet, dass ein Benutzer möglicherweise Probleme beim Hören von Ton hat, der von einer Seite ausgegeben wird.

Bildschirmleser-7256747

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

Machen Sie den Inhalt Ihrer UI-Komponenten
funktional über eine Tastatur zugänglich
Für alle Aktionen würde man sonst eine Maus verwenden.
Stellen Sie sicher, dass die Seiten für unterstützende Technologien korrekt markiert sind - einschließlich
screen readers, voice control Software, and physical switch controls—which
neigen dazu, die gleichen APIs zu verwenden.

Kognitive Probleme bedeutet, dass ein Benutzer möglicherweise unterstützende Technologien benötigt
Um ihnen beim Lesen von Text zu helfen, ist es wichtig sicherzustellen, dass Textalternativen vorhanden sind.

Seien Sie vorsichtig, wenn Sie Animationen verwenden. Vermeiden Sie Videos und Animationen
wiederholen
oder Blitz, which can cause Probleme
für einige Benutzer.

Das bevorzugt-reduzierte-Bewegung
CSS media Abfrage allows you to limit animations
und automatische Wiedergabe von Videos für Benutzer, die eine reduzierte Bewegung bevorzugen:
```
@media (bevorzugt-reduzierte-Bewegung: reduce) {
Taste {
animation: keiner;
}
}
```
Vermeiden Sie Interaktionen, die sind
zeitbasiert.

Dies scheint eine Menge zu behandelnder Grundlagen zu sein,
Aber wir werden den Prozess zur Bewertung durchlaufen
und dann die Zugänglichkeit Ihrer UI-Komponenten verbessern.

Trinkgeld: Das GOV.UK-Team für Barrierefreiheit hat einige großartige Ergebnisse erzielt
Zugänglichkeit macht digitale Plakate aus
um das Bewusstsein für Best Practices in Ihrem Team zu verbreiten:

Zwei-Donts-4261761

Sind Ihre UI-Komponenten zugänglich?

Zusammenfassung (tl; dr)

Fragen Sie sich, wenn Sie die UI-Komponenten Ihrer Seite auf Barrierefreiheit prüfen:

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

Verwaltet die Komponente den Fokus und vermeidet Fokusfallen?
Kann es auf die entsprechenden Tastaturereignisse reagieren?
Können Sie Ihre UI-Komponente mit einem Bildschirmleser verwenden?

Haben Sie Textalternativen für visuell dargestellte Informationen bereitgestellt?
Haben Sie mit ARIA semantische Informationen hinzugefügt?
Kann Ihre UI-Komponente ohne Ton arbeiten?

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

Stellen Sie sicher, dass Ihre UI-Komponente von jemandem verwendet werden kann, der keine Farben sehen kann.
Ein hilfreiches Tool zur Simulation von Farbenblindheit ist eine Chrome-Erweiterung namens
SEHEN.
(Probieren Sie alle vier verfügbaren Formen der Farbenblindheitssimulation aus.)
Das könnte Sie auch interessieren
Daltonisieren
Erweiterung, die ähnlich nützlich ist.
Kann Ihre UI-Komponente mit aktiviertem kontrastreichen Modus arbeiten?

Alle modernen Betriebssysteme unterstützen einen kontrastreichen Modus.
Hoher Kontrast
ist eine Chrome-Erweiterung, die hier helfen kann.