Design vor Code: Barrierefreiheit von Grund auf berücksichtigen – Teil 2

Dies ist der zweite Teil einer zweiteiligen Beitragsreihe, die auf dem Vortrag basiert, den Caitlin auf der CSUN 2017 gehalten hat. Der Vortrag und die Beiträge richten sich in erster Linie an Designer, wobei der Schwerpunkt auf dem User-Experience-Design liegt.

In Teil 1 von „Design Before Code“ habe ich die ersten drei von fünf Schlüsselbereichen vorgestellt, auf die Sie sich zu Beginn Ihrer Arbeit mit Barrierefreiheit konzentrieren sollten, damit Sie eine solide Grundlage für die Einbindung von Barrierefreiheit in Ihre Designpraxis schaffen können. Diese Schlüsselbereiche sind: das Verständnis der Prinzipien der Usability, das Verständnis Ihrer Nutzer und die Zusammenarbeit mit Ihrem Team. Dieser Beitrag bietet technische Anleitungen zu einigen praktischen Aspekten der Einbindung von Barrierefreiheit in Ihren Designprozess, und ich werde näher auf Elemente eingehen, die in der Designphase mehr Überlegung erfordern, einschließlich einiger Ratschläge zur Verwendung von Musterbibliotheken zur Unterstützung der Barrierefreiheit.

Tipp Nr. 4: Die kniffligen Stellen verstehen

Wenn Sie direkt (oder auch indirekt) mit den Entwicklern zusammenarbeiten, die Ihre Entwürfe umsetzen werden, sollten Sie sich bewusst sein, dass manche Dinge barrierefrei schwieriger zu realisieren sind als andere. Bei manchen Elementen muss im Vorfeld gründlicher nachgedacht werden, und es bedarf einer engeren Zusammenarbeit, um die beste Vorgehensweise für die Gestaltung und Umsetzung des Elements zu ermitteln. Ich habe vier der wichtigsten Elementtypen herausgegriffen, auf die Sie achten sollten und die mir im Laufe meiner Tätigkeit im Bereich Barrierefreiheit aufgefallen sind.

Formulare

Wenn Sie sich schon einmal mit Web- oder Mobile-Design beschäftigt haben, wissen Sie wahrscheinlich, dass Formulare gleichzeitig die einfachsten und zugleich kniffligsten Elemente einer Seite sein können. In gewisser Hinsicht sind Formulare ziemlich unkompliziert – man weiß, welche Informationen man von den Nutzern erfassen muss, und es gibt traditionell nur eine begrenzte Anzahl verschiedener Feldtypen, die man den Nutzern anbieten kann, um diese Informationen zu erfassen. Es ist nicht schwer, ein paar Felder auf eine Seite zu packen, sie mit einer Datenbank zu verknüpfen und es dabei zu belassen.

Die Herausforderung besteht darin, ein Formular zu erstellen, das benutzerfreundlich ist. Einfach ausgedrückt: Die meisten Webformulare sind für die Nutzer eine Quelle der Frustration. Es gibt unzählige Studien (und ebenso viele unterschiedliche Meinungen) darüber, was ein Formular benutzerfreundlich macht und warum. Auch in den WCAG gibt es eine Reihe von Richtlinien, die sich mit der Barrierefreiheit von Benutzereingaben befassen, wobei ein besonderer Schwerpunkt auf Webformularen liegt. (Frischen Sie Ihr Wissen über die WCAG, auch bekannt als Web Content Accessibility Guidelines, auf der W3C-Website auf.) Kurz gesagt: Es ist viel einfacher, ein schlechtes, unbrauchbares Formular zu erstellen, als ein gutes.

Um ein Formular benutzerfreundlich zu gestalten, müssen verschiedene Aspekte berücksichtigt werden: Ist der Feldtyp für die Art der Daten geeignet, die der Benutzer eingeben wird? Helfen die Beschriftung und der Hilfetext des Feldes dem Benutzer zu verstehen, welche Arten von Daten er in das Feld eingeben kann? Im Hinblick auf die Barrierefreiheit gibt es einige weitere spezifische Richtlinien. Gemäß WCAG 2.0 müssen Webformulare folgende Anforderungen erfüllen:

• Sichtbare Beschriftungen für jedes Feld (die immer sichtbar sind!)
• Programmatische Bezeichnungen für jedes Feld
• Hilfetexte und Fehlermeldungen, die tatsächlich hilfreich sind
• Tastaturzugriff für jedes Feld
• Sichtbare Fokusanzeigen für alle Elemente, die über die Tastatur aufgerufen werden können
• Die Möglichkeit, die in ein Formular eingegebenen Daten vor dem Absenden zu überprüfen, insbesondere wenn Sie durch das Absenden des Formulars Ihre finanziellen oder rechtlichen Daten in die Hände anderer geben

Wenn Sie bei der Gestaltung Ihrer Formulare Wert auf die Benutzerfreundlichkeit legen, haben Sie einige dieser Aspekte wahrscheinlich bereits berücksichtigt. In den meisten Fällen tragen die WCAG-Anforderungen in Bezug auf Formularfelder und Benutzereingaben sogar dazu bei, die Benutzerfreundlichkeit von Formularen zu verbessern, da sie Sie dazu zwingen, noch einmal zu überprüfen, ob Ihre Formulare für Ihre Nutzer tatsächlich das leisten, was sie leisten sollen.

Tabellen

Ich beziehe mich hier speziell auf Datentabellen. Die Verwendung von Datentabellen kann eine sehr effektive Methode zur Vermittlung von Informationen sein: Eine interaktive Datentabelle bietet Nutzern eine gute Möglichkeit, Daten zu sortieren, zu ordnen oder bestimmte Daten innerhalb eines viel größeren Datensatzes zu finden.

Allerdings kann es schwierig sein, Datentabellen barrierefrei zu gestalten, insbesondere wenn sie komplex sind. Bildschirmleseprogramme verfügen über einen speziellen Modus für die Interaktion mit Tabellen, und Nutzer von Bildschirmleseprogrammen erwarten in der Regel, dass Tabellen auf bestimmte Weise vorgelesen werden. Insbesondere müssen Zellen in Datentabellen, die in einem bestimmten Kontext stehen, den Nutzern von Bildschirmleseprogrammen ebenfalls vermittelt werden.

Wenn Sie an einem Entwurf für eine komplexe Datentabelle arbeiten, rate ich Ihnen, sich darüber noch einmal gründlich Gedanken zu machen. Hier sind einige Fragen, die Sie sich stellen sollten:

• Was sind die wichtigsten Informationen, die man aus dieser Tabelle entnehmen sollte?
• Gibt es irgendwelche nicht wesentlichen Informationen, die entfernt werden können?
• Gibt es eine andere Möglichkeit, die Informationen in dieser Tabelle darzustellen, die es den Nutzern erleichtern würde, sie zu verstehen und damit zu arbeiten? (Ist eine Datentabelle die richtige Art, die Informationen darzustellen?)
• Würde eine Aufteilung der Daten auf mehrere Tabellen den Nutzern das Verständnis der Informationen erleichtern?

Es empfiehlt sich, bei allen komplexen Datentabellen, die Sie entwerfen, Usability-Tests oder A/B-Tests durchzuführen – schon allein, um zu verstehen, ob die Nutzer die Informationen in der Tabelle gut genug interpretieren können, damit die Daten für sie von Nutzen sind. In den meisten Fällen kann die Neugestaltung einer Datentabelle – sei es, um sie zu vereinfachen oder um sie gar nicht mehr als Datentabelle zu gestalten – große Auswirkungen auf alle Nutzer haben und den Zugang zu den Daten selbst erheblich erleichtern.

Benutzerdefinierte Steuerelemente

Was ich in diesem Zusammenhang unter „benutzerdefinierten Steuerelementen“ verstehe, sind Formularfelder oder andere Arten von interaktiven Elementen, die keine nativen HTML-Elemente sind. Es ist möglich – und manchmal sogar notwendig –, nicht standardmäßige HTML-Attribute und JavaScript zu verwenden, um ein interaktives Steuerelement zu erstellen. Genau diese Art von Steuerelementen meine ich.

One troublesome aspect of custom controls is that they’re much more difficult to make fully accessible. Screen readers and other assistive technology are built to work with native HTML elements, like <label> and <input>. If, instead, the developer decides to use a <div> with a content-editable attribute and styles it to look like a form field, that form field will not be accessible by default. It will actually take a lot more work to make the field fully accessible because all of the accessibility features will have added to the field from scratch.

Here you can see the form field “First Name” coded in two different ways: one using native HTML elements, and the other using the “contenteditable” attribute on a <div>. Both elements look the same through the magic of CSS, but only one of them is accessible.

Beispiel für barrierefreien Code

<lable>First Name</label>
<input type="text" name="fname" class="av-text" id="fname">

Beispiel für unzugänglichen Code

First Name
<div id="input" contenteditable></div>

Beide Beispiele sehen wie folgt aus:

In manchen Fällen, insbesondere bei komplexeren Steuerelementen, ist es einfach nicht möglich, ein natives HTML-Element zu verwenden. Dies liegt höchstwahrscheinlich daran, dass es keine nativen Elemente gibt, die die für Ihr Design erforderliche Funktionalität bieten. Beispielsweise sind die meisten Kalender-Widgets benutzerdefinierte Steuerelemente. HTML5 bietet zwar einen Eingabetyp namens „date“ als natives Steuerelement an, doch dessen Umsetzung und Darstellung ist browserübergreifend uneinheitlich und wird manchmal gar nicht unterstützt. Im Falle einer Kalender- oder Datums-Eingabe ist es für die Benutzererfahrung in der Regel deutlich besser und einheitlicher, entweder ein vorhandenes jQuery-Plugin zu verwenden und es an Ihre Website anzupassen oder ein eigenes von Grund auf neu zu erstellen.

In beiden Fällen müssen Sie als Designer einige Vorarbeiten leisten, um sicherzustellen, dass das Element so aussieht, sich so anfühlt und so funktioniert, wie es soll. Dazu gehört auch, sich damit auseinanderzusetzen, wie Screenreader ein solches Steuerelement nutzen würden. Recherchieren Sie, was es bereits auf dem Markt gibt (eine Google-Suche nach Begriffen wie „barrierefreie Kalender-Widgets“ kann ein guter Anfang sein) und wie diese funktionieren. Wähle ein oder zwei Beispiele aus und finde ein paar Screenreader-Nutzer, die diese testen, damit du verstehen kannst, wie Screenreader-Nutzer erwarten, dass beispielsweise ein Kalender-Widget funktioniert. Entwirf einen Prototyp und arbeite mit einem Entwickler zusammen, um ihn tatsächlich umzusetzen, damit du deine eigene Version mit Screenreader-Nutzern testen kannst. Wenn du eine Version hast, mit der du zufrieden bist, suche einen geeigneten Ort, um sie zu speichern – zum Beispiel in einer Musterbibliothek –, damit andere Teams in deinem Unternehmen von deiner Arbeit profitieren können.

Dynamische Inhalte

Nicht zuletzt bezeichnet der Begriff „dynamische Inhalte“ Inhalte, die auf einer Seite in Echtzeit aktualisiert werden, ohne dass die Seite neu geladen wird. Ein paar Beispiele: ein Börsenticker, der alle 5 Sekunden aktualisiert wird, oder ein Feld zum Erstellen eines Passworts, das Ihnen während der Eingabe Hinweise darauf gibt, wie sicher Ihr neues Passwort ist. Im Allgemeinen werden solche Inhalte in Echtzeit bereitgestellt, da sie für den Nutzer zu diesem Zeitpunkt in irgendeiner Weise nützlich sind. Als Designer muss man jedoch ein ausgewogenes Gleichgewicht finden: Bei zu wenigen Informationen wird der Nutzer nicht in dem Maße informiert, wie er es benötigt. Bei zu vielen Informationen läuft man Gefahr, ihn zu überfordern.

Das gleiche Prinzip gilt für Nutzer mit Behinderungen. Wenn beispielsweise ein Nutzer mit kognitiven Einschränkungen mit einem Steuerelement interagiert und durch diese Interaktion plötzlich Text erscheint und sich in alle Richtungen bewegt, kann dies bei diesem Nutzer große Verwirrung stiften – oder er könnte zu dem Schluss kommen, dass die von Ihnen geforderte Aufgabe zu schwierig ist, und aufgeben. Ein weiteres Beispiel: Wenn Sie Nutzern beim Erstellen eines Passworts häufige Aktualisierungen anzeigen, diese Aktualisierungen jedoch nicht automatisch an Screenreader weitergeleitet werden, wird die Benutzererfahrung für Screenreader-Nutzer beeinträchtigt. Wenn Sie hingegen jede einzelne Aktualisierung in Echtzeit an Screenreader weiterleiten, könnten diese so überfordert sein, dass sie vergessen, was sie ursprünglich eingegeben haben.

Die beiden besten Maßnahmen, die Sie bei der Gestaltung dynamischer Inhalte ergreifen können, sind:

1. Überlegen Sie, welche Informationen Ihre Nutzer sofort benötigen. Wenn sie diese nicht sofort benötigen, warum zeigen Sie sie dann an?
2. Testen Sie Prototypen mit Nutzern. Welche Informationen benötigen sie, um die von Ihnen gestellten Aufgaben zu erledigen? Ist es notwendig, ihnen diese Informationen dynamisch bereitzustellen, oder nicht? Falls ja, wie viele Informationen benötigen sie mindestens, damit ihre Nutzung zu einer positiven Erfahrung wird?

Generell gilt: Je weniger Informationen Sie dynamisch an den Nutzer übermitteln müssen, desto weniger müssen Sie sich Gedanken darüber machen, wie diese Informationen an Nutzer mit Behinderungen vermittelt werden. Wenn Sie Informationen doch dynamisch übermitteln müssen, stellen Sie sicher, dass sie leicht verständlich und leicht auffindbar sind und dass Nutzer von assistiver Technologie darauf zugreifen können.

Schlüssel Nr. 5: Styleguides und Musterbibliotheken

Vieles von dem, worüber ich gesprochen habe, lässt sich von einem Team oder einem Unternehmen auf nachhaltige Weise umsetzen, indem eine Musterbibliothek erstellt und eingeführt wird. Unter einer Musterbibliothek verstehe ich eine Sammlung wiederverwendbarer Komponenten, die Anweisungen dazu enthält, wann, wo, wie und warum diese zu verwenden sind. Eine Musterbibliothek kann auch eher traditionelle Elemente eines Styleguides umfassen, wie beispielsweise Beispiele für Typografie und Farben oder Anweisungen zur Verwendung des Logos.

Eine Musterbibliothek kann ausschließlich aus Mockups bestehen oder vollständig programmierte Beispiele enthalten, die direkt in Anwendungen eingebunden werden können. Möglicherweise wird sie von Zeit zu Zeit von einem Designer oder Entwickler ergänzt, oder es gibt ein kleines Team, das sich speziell um ihre Pflege kümmert. Unabhängig davon, wer sie erstellt und pflegt, sollte man sich bewusst sein, dass eine Musterbibliothek für alle am Entwicklungsprozess Beteiligten von Nutzen ist. Eine Musterbibliothek hilft Designern dabei, die Marke des Unternehmens einheitlicher zu präsentieren und Interaktionen konsistenter zu gestalten. Eine Musterbibliothek kann zudem Zeit sparen, da Designer nicht immer wieder dieselben Elemente neu entwerfen müssen. Das Gleiche gilt für Entwickler – wenn Code-Schnipsel und Richtlinien für die Implementierung bereitgestellt werden, müssen Entwickler ihre Zeit nicht damit verbringen, das Rad neu zu erfinden. Auch die Qualitätssicherung (QA) kann beim Testen davon profitieren, da sie bei der Überprüfung, ob sich eine Komponente wie erwartet verhält, auf die Musterbibliothek zurückgreifen kann.

Im Hinblick auf die Barrierefreiheit kann die Definition von Barrierefreiheitsfunktionen für Muster innerhalb einer Bibliothek den Arbeitsaufwand für die barrierefreie Gestaltung einer Seite oder Website erheblich reduzieren. Es können barrierefreie Farbkombinationen definiert werden, um zu verhindern, dass Designer Text mit geringem Kontrast verwenden. Für interaktive Elemente wie Formularfelder könnte eine Musterbibliothek Angaben zur Platzierung von Beschriftungen, zum Ton und Stil von Fehlermeldungen sowie Anweisungen dazu enthalten, wie Hilfetext und Fehlermeldungen programmgesteuert zugeordnet werden können. Benutzerdefinierte Komponenten wie Kalender-Widgets oder Kombinationsfelder können erheblich davon profitieren, in eine Musterbibliothek aufgenommen zu werden, insbesondere wenn die meisten oder alle Aspekte der Barrierefreiheit bereits im Vorfeld geklärt wurden. Ein Großteil des Aufwands, der mit der barrierefreien Gestaltung einer benutzerdefinierten Komponente verbunden ist, lässt sich durch die Erstellung eines wiederverwendbaren Musters verringern oder ganz vermeiden.

Eine kurze Liste von Musterbibliotheken, die barrierefreie Muster und Richtlinien enthalten:

• US-amerikanische Webdesign-Standards
• Salesforce Lightning Design System
• BBC Global Experience – Sprache
• Deque Musterbibliothek

Wie geht es nun weiter?

Zum Thema Barrierefreiheit im Web gibt es viel zu lernen und zu wissen. Und wie bei anderen Grundsätzen des Designs und der Programmierung entwickeln sich auch die Standards und bewährten Verfahren zur Barrierefreiheit weiter, wenn sich die Technologie verändert und immer fortschrittlicher wird. Selbst wenn man bereits über ein grundlegendes Verständnis der Anforderungen und Techniken der digitalen Barrierefreiheit verfügt, kann es sehr aufwendig sein, mit neuen Trends und Entwicklungen Schritt zu halten.

Deshalb ist es umso wichtiger, mit den Grundlagen zu beginnen und immer wieder darauf zurückzukommen. Wenn Sie die Grundlagen der Usability verstehen und dieses Verständnis als Rahmen nutzen, wenn Sie mit den unterschiedlichsten Nutzern sprechen, können Sie wertvolle Erkenntnisse darüber gewinnen, was etwas barrierefrei macht und was nicht. Wenn Sie sich bei Wissenslücken auf die Hilfe von Kollegen verlassen, können Sie viel besser herausfinden, welche Aspekte der Barrierefreiheit im Web zu Ihren Stärken gehören und welche nicht.

Als Designer beginnt Barrierefreiheit bei Produkten oft bei Ihnen, aber Sie sind nicht die einzige Station auf dem Weg zur Barrierefreiheit. Es ist für Sie unglaublich hilfreich zu wissen, welche Aspekte der Barrierefreiheit bei komplexeren Elementen wie Formularfeldern oder dynamischen Inhalten eine Rolle spielen, auch wenn Sie wahrscheinlich nicht selbst für die Umsetzung zuständig sein werden. Wenn Sie dies als Entwickler lesen, sollten Sie ebenfalls wissen, dass die Erstellung und Umsetzung barrierefreier Elemente oder Muster nicht allein auf Ihren Schultern lastet.

Das Beste, was Sie tun können, um den Fokus auf Barrierefreiheit zu behalten, ist, kontinuierlich dazuzulernen und die Dinge Schritt für Schritt zu verbessern. Der Weg von 0 auf 100 in Sachen Barrierefreiheit kann Jahre dauern, aber lassen Sie sich davon nicht einschüchtern. Eine barrierefreie Benutzererfahrung ist immer ein fortlaufender Prozess. Wenn Sie und Ihr Team sich weiterhin bemühen, einfühlsam zu sein und dazuzulernen, werden Ihre Nutzer dies erkennen und zu schätzen wissen.