[W3Conf] Léonie Watson: „Design wie du dich kümmerst: Praktische Barrierefreiheit für Webprofis“

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Léonie Watson (@leoniewatson) ist eine Beraterin für digitale Barrierefreiheit aus Bristol, UK. Sie glaubt an die Bedeutung von Barrierefreiheit und auch daran, dass sie kein Hindernis für Kreativität ist.

Dies sind meine Notizen von ihrem Vortrag auf der W3Conf in San Francisco als Teil dieser Live-Blog-Serie.

Was Léonies Herz höherschlagen lässt, ist die Idee, mit Hingabe zu designen. Sie teilt drei Prinzipien rund um diese Idee.

1. Designen wie Banksy

Fordere konventionelle Weisheiten heraus.

Zum Beispiel: Barrierefreiheit tötet Kreativität. Sie arbeitete bei einem Arbeitgeber in Großbritannien, der buchstäblich daran glaubte. Dann zeigte sie uns ein sehr komplexes Webformular mit allen Arten von großartigen Animationen und Interaktionen, das aber aus Sicht der Barrierefreiheit perfekt funktionierte.

Barrierefreiheit ist nicht schwierig, es ist nur unbekanntes Terrain.

Was es unbekannt hält, ist, wie wir darüber denken. Wir müssen einfach mehr über die Menschen in unseren Zielgruppen erfahren.

2. Designen wie Da Vinci

Sei neugierig, wie wir unsere tägliche Arbeit verbessern können.

Ein wichtiges Konzept ist, Dinge von Seite zu Seite konsistent zu halten (z. B. Logo, Suchnavigation). Diese werden zu wichtigen visuellen Orientierungspunkten, um die Menschen zu orientieren. Dies gilt für jede Art von „Widget“, das Sie wiederholt verwenden, und gilt sowohl für die Funktionalität als auch für das Aussehen.

HTML5-Platzhalter sind kein Ersatz für echten beschreibenden Text.

Denken Sie über die Textgröße nach. Denken Sie über Kopfzeilenstrukturen nach. Denken Sie über Navigation nach (wie sie aussieht, wie sie sich anfühlt, wie sie sich verhält).

„Sie möchten nicht, dass die Leute kämpfen müssen, um an Ihre Informationen zu gelangen.“

„Die Fokus-Umrandung von Links und Eingaben zu entfernen, ist eine komplette Katastrophe.“

Das Web ist nicht kaputt. Wenn es kaputt ist, haben wir es kaputt gemacht. Wir sind schuld, wenn wir die Barrierefreiheit beeinträchtigen.

3. Designen wie Chanel

Es gibt einen „Accessibility Stack“

  • Oben: Screenreader
  • Mitte: Accessibility API (⇅)
  • Unten: Webbrowser
Der Stack.

„Nur weil ein Browser ein Feature unterstützt, heißt das nicht, dass es in der Accessibility API vorhanden ist.“

Der Browser muss etwas zuerst unterstützen, und dann bewegt es sich den Stack hinauf. Das kompliziert die Dinge in Bezug auf die Barrierefreiheit.

Das richtige HTML auf einer Seite (korrekte Überschriften, korrekte Listen usw.) zu haben, bedeutet, Screenreader-Benutzern geeignete nichtlineare Sprungmöglichkeiten auf einer Seite zu geben. HTML5 ARIA-Landmarken-Rollen sind auch ein großer Gewinn dafür.

Das <main>-Element wurde endlos diskutiert. Mit einem einzigen Tastendruck können Menschen zum Hauptinhalt einer Seite gelangen. Ein einfacher, aber großer Gewinn.

Ajax zu verwenden, versaut die Barrierefreiheit nicht automatisch. Es liegt alles daran, wie man es verwendet. Testen, testen, testen! Sie zeigte ein Beispiel, wie das Nicht-Entfernen des Fokus von einem „In den Warenkorb“-Button, aber das logische Platzieren des Warenkorbs direkt nach diesem Button die Screenreader-Erfahrung in diesem Fall akzeptabel macht.

Barrierefreiheit berührt alle Bereiche des Bauerlebnisses. „Agile Accessibility“ = Barrierefreiheit im gesamten Prozess.