Die Zugänglichkeit oder Barrierefreiheit von Anfang an zu beachten, ist besser als das Design nachträglich darauf zu überprüfen. Es hilft dabei, die große Bandbreite der Leute zu berücksichtigen, die die Produkte und Services nutzen.
Ein von Anfang zugängliches Design kann mit folgendem 3 Schritten gestartet werden:
1) Text Design, 2) HTML Design und 3) „Weg vom Happy Path“
1) Wie man ein „Text Design“ macht
Durch ein Design, das nur auf Text basiert, bekommt man Klarheit zur Ordnung und zum Inhalt einer Seite.
Das Design wird dafür schriftlich skizziert, bevor ein Design Tool (z. B. Sketch, Figma oder Adobe XD) eingesetzt wird. Am besten startet man mit einer nummerierten Liste und einem Stift und Papier, oder in einem Text-Editor.
Der Aufschrieb kann wie folgt aussehen:
- Überschriften der Sections (falls man thematische Bereiche auf der Website hat, es sollte allerdings nicht zu viele Sections geben. Nur ein Bereich, der wichtig genug ist, dass ein Nutzer dorthin navigieren können soll, sollte als <section> gekennzeichnet werden. Ein kurzer Artikel dazu hier im Barrierefreien Blog)
- Inhalt und Funktion jedes Bildes
- Text jedes Links
- Text jedes Buttons und
- den Namen jedes Formular-Elements
Warum hilft das bei barrierefreien Angeboten?
Durch das Schreiben einer nummerierten Liste wird man sich klar über:
- Die Reihenfolge von Elementen im HTML-Quellcode. Das ist die Reihenfolge, in der ein Screenreader die Seite lesen wird.
- Die Hierarchie der Elemente auf der Seite. Dies hilft bei der Entscheidung zum Layout auf verschiedenen Bildschirmgrößen.
- Die Fokus-Reihenfolge auf der Seite. Das hilft dabei, sicherzustellen, dass z.B. Tab-Reihenfolge und Screenreader Output logisch sind und Sinn machen.
Überschriften zu schreiben, hilft dabei, die Seite in logische Sektionen aufzuteilen (und ist später wichtig für die Umsetzung mit z. B. der Landmark <section>). Screenreader-Nutzer navigieren oft mithilfe der Überschriften auf einer Seite.
Den Text für Bilder zu schreiben bedeutet, dass man dann später schon einen alternativen Text hat für das alt-Attribut (oder einen guten Startpunkt dafür). Es hilft dabei, klarzumachen, welche Information ein Bild mitteilt (wenn es eine Information enthält).
Wenn man Link-Texte schreibt, wird klar, warum „Klicke hier“ kein hilfreicher Link-Text ist. Der Text sollte beschreiben, wohin der Link führt, wenn der Nutzer daraufklickt.
Beim Schreiben von Text für Buttons merkt man, warum „Abschicken“ normalerweise kein guter Button-Text ist. Auch dieser Text sollte beschreiben, was passiert, wenn man den Button anklickt.
Die Namen von Formular-Elementen aufzuschreiben, hilft dabei, gute Label-Bezeichnungen zu finden. Es zwingt uns dazu, den deutlichsten, offensichtlichsten Namen für jedes Element zu definieren.
2) HTML Design
Ein HTML Design anzulegen hilft dabei, die Reihenfolge und den Inhalt einer Seite festzulegen. Es hilft auch dabei, die einzelnen Funktionen jedes interaktiven Element auf einer Seite zu erläutern.
Vorgehensweise
Das Text Design wird mit HTML-Elementen erweitert. Dabei wird kein css verendet! Dies bedeutet keine Gestaltung (nur die Elemente, die Defaults haben, wie z. B. Überschriften-Stile) und kein Layout. Auf der Seite MDN’s HTML elements reference (externer Link, englisch) gibt es Liste mit den korrekten semantischen Elementen.
Warum hilft das?
- Das HTML-Design hat dieselben Vorteile, wie die Seite in einer nummerierten Liste aufzuschreiben: die Quellcode Reihenfolge, die Hierarchie von Elementen und die Fokus-Reihenfolge werden klar.
- In diesem Layout wird klar, ob ein Interaktionselement z.B. besser ein Link oder ein Button ist. Wenn es zur Navigation ist, nimm einen Link. Wenn es für eine Aktion ist, nimm einen Button.
- Mit HTML zu designen, zwingt dazu, sich für eine Funktion von jedem Element zu entscheiden (wie auch immer man es später stylt). Zum Beispiel: Ist es eine multiple-choice Frage, bei der man nur eine Antwort wählen kann? Dann ist es eine Gruppe von Radio-Buttons, für die es Regeln gibt, z. B. braucht eine Gruppe von Radio-Buttons ein <fieldset> und ein <legend>.
3) Weg vom „Happy Path“
Der „Happy Path” (externer Link, englisch) ist ein Szenario, bei dem „nichts schief geht“, aber was, wenn Benutzer nicht so agieren, wie es das Design vorgibt, andere Reihenfolgen oder Vorgehensweisen benutzen?
Vorgehensweise
Man überprüft und überdenkt das Design und versucht es zu „brechen“. Damit ist gemeint zu überlegen, wie eine Nutzung dazu führen kann, dass der Inhalt unverständlich wird oder Interaktionen nicht wie vorgesehen funktionieren. Danach versieht man das Design mit Erläuterungen, wie man einer Personen, die die Seite so benutzt, helfen könnte. Kann man die Labels von Feldern noch verbessern? Kann man Hilfe-Text für Felder hinzufügen? Welche Fehlermeldungen könnte man einblenden, die dem Nutzer sagen, was schiefgelaufen ist und wie man es löst?
Zu diesem Zeitpunkt macht es Sinn anzufangen zu gestalten. Durch das Hinzufügen von Gestaltungs-Elementen, gibt es mehr Elemente, die überprüft werden können:
- Einsatz von Farben, um Informationen zu übermitteln
- Kontrastverhältnisse
- Animation und Timing
- Status von interaktiven Elementen, z. B. Fokus Styles
Ein guter Weg zu versuchen, das Design zu brechen, ist ein Annähern von einer ganz anderen Richtung.
- Man kann sich fragen: „Wenn ich es mit Absicht falsch machen würde, was würde ich tun?“ Zum Beispiel: ein Pflichtfeld nicht ausfüllen oder etwas im falschen Format ausfüllen.
- Ein Element nehmen und umdrehen, und das Gegenteil versuchen. Zum Beispiel: Wenn eine Fehlermeldung in Farbe ist, überprüfen, wie es ohne Farbe aussehen würde.
Warum hilft das?
Den „Happy Path“ zu verlassen zwingt dazu:
- Fehler-Zustände ausdrücklich zu prüfen. Es führt dazu, dass man Fehlermeldungen schon vorab fomuliert.
- in einem größeren Umfang über menschliche Erfahrung nachzudenken. Es hilft dabei, zu realisieren, wo man vielleicht Barrieren aufbaut, indem man von bestimmten Fähigkeiten oder Vorgehensweisen einer Person ausgeht.
Zusammenfassung
Ein Design auf Zugänglichkeit zu überprüfen ist gut um sicherzustellen, dass man zugängliche Websites ausliefert. Mit einem zugänglichen Design zu starten ist jedoch noch besser.
Mit diesen drei Schritten kann man ein Design zugänglich beginnen und sicherstellen:
- Ein reines Text-Design machen,
- Ein reines HTML-Design machen, und dann
- den „Happy Path“ verlassen
Es ist hilfreich, über die diverse und große Bandbreite der Menschen nachzudenken, die mit dem Designs und dem Code interagieren werden und man stellt so gut wie möglich sicher, dass man keine Hindernisse vor ihnen aufstellt.