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) Text Design
Durch ein Design, das nur auf Text basiert, bekommt man Klarheit zur Ordnung und zum Inhalt einer Seite.
Was tun?
Das Design kann schriftlich skizziert werden, bevor man das Design Tool (z. B. Sketch, Figma oder Adobe XD) öffnet. Am besten startet man mit einer nummerierten Liste und einem Stift und Papier, oder in einem Text-Editor.
Folgendes sollte man aufschreiben:
- Überschriften der Sections
- Inhalt und Funktion jedes Bildes
- Text jedes Links
- Text jedes Buttons und
- den Namen jedes Formular-Elements
Warum?
Durch das Schreiben einer numerierten Liste wird man sich klar über:
- Die Reihenfolge von Elementen im HTML Quellcode. Das ist die Reihenfollge, 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 alles logisch ist und Sinn macht.
Überschriften zu schreiben hilft dabei, die Seite in logische Sektionen aufzuteilen (und ist später bei der Umsetzung auch hilfreich, da es in html die Landmark <section> gibt). 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-Altribut (oder einen guten Startpunkt dafür). Es hilft dabei, klar zu machen, 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 darauf klickt.
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 fnden. Es zwingt uns dazu, den deutlichsten, offensichtlichsten Namen für jedes Element zu finden.
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.
Was tun?
Man geht durch das Text Design und erweitert es mit HTML Elementen, kein css! Dies bedeutet keine Gestaltung (nur die Elemente, die Defaults haben, wie z. B. Überschriften-Stile) und kein Layout (alles ist erst einmal in einer Spalte). Auf der Seite MDN’s HTML elements reference gibt es Liste mit den korrekten semantischen Elementen.
Warum?
- Das Designen nur mit HTML hat dieselben Vorteile wie die Seite in einer nummerierten Liste aufzuschreiben: die Quellcode Reihenfolge, die Hierarchie von Elementen und die Fokus-Reihenfolge werden klar.
- Man kann nur ein Element für ein Ding verwenden, also zwingt das dazu, sich zu entscheiden, was jedes Ding eigentlich ist. Zum Beispiel: ist es ein Link oder ist es ein Button? 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” ist ein Szenario, bei dem „alles gut geht und nichts schief geht“, was eine schöne Idee ist, aber leider nicht die Realität wiederspiegelt und auch nicht wie Menschen und Computer interagieren.
Was tun?
Man überprüft und überdenkt das Design und versucht es zu brechen. Danach versieht man es mit Erläuterungen, wie man einer Personen, die die Seite 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 schief gelaufen ist und wie man es löst?
Zu diesem Zeitpunkt könnte man das Design schon etwas gestalten und das css erwägen, das man benutzen könnte. Durch das Hinzufügen von Gestaltungs-Elementen bekommt man mehr, was man überprüfen kann:
- 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 ein 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?
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 einer Person ausgeht, die aber evtl. gar nicht vorhanden sind.
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.