Die 5 häufigsten Anmerkungen zur Barrierefreiheit

Maße. Das ist das, wovor man sich am Ende des Entwurfsprozesses fürchtet – wenn man sich ganz weit in seinem Stuhl zurücklehnen, sich noch eine Tasse Kaffee einschenken, an die Decke starren und sagen muss: „Okay, bringen wir es hinter uns.“

Es gibt mittlerweile zwar zahlreiche Tools, Bibliotheken, Muster und Softwareprogramme, die diesen Prozess beschleunigen können, aber letztendlich besteht die Aufgabe eines präzisen Prototyps darin, zu vermitteln, wie bestimmte Aspekte eines Designs dargestellt werden sollen – bis hin zum Verhalten, zur Farbe, zur Typografie, zur Größe und zum Maßstab eines Elements – und das muss man nun einmal selbst erledigen.

Was die Barrierefreiheit angeht, gibt es noch weitere Aspekte Ihres Designs, die Sie Ihrem Entwicklungsteam klar vermitteln müssen. In diesem Artikel stellen wir Ihnen fünf gängige Anmerkungen zur Barrierefreiheit vor, die Sie schon heute in Ihre Entwürfe einarbeiten können.

Um zu veranschaulichen, wie man sie einsetzt, haben wir eine kleine Beispielanwendung zusammengestellt. Alle im Artikel gezeigten Elemente stehen am Ende des Artikels kostenlos zur Verfügung.

Bevor wir loslegen, noch ein Hinweis: Genau wie Designmaße lassen sich Barrierefreiheitsangaben am besten auf Musterebene festlegen. Sobald du ein Muster barrierefrei gestaltet hast, müssen viele Aspekte davon nicht jedes Mal neu definiert oder formuliert werden, wenn du dieses Muster in deinen Entwürfen verwendest. Für die Zwecke dieser Übung werden wir jedoch Anmerkungen so vornehmen, als gäbe es keine Muster – aber mach das bitte nicht wirklich, sonst wirst du noch verrückt.

Beispielseite für Anmerkungen

Um die fünf gängigen Annotationen besser zu veranschaulichen, habe ich eine fiktive E-Commerce-Website für Socken namens „Tutzies“ erstellt. Zu jeder Annotation gibt es einen Screenshot der fiktiven Website, der die Verwendung der jeweiligen Annotation veranschaulicht.

Registerkarten

Beginnen wir mit einem Thema, das den meisten Designern wohl bekannt ist: die Tab-Reihenfolge. Dabei handelt es sich um die Reihenfolge, in der Elemente den Fokus erhalten, wenn man mit der Tabulatortaste durch die interaktiven Elemente einer Anwendung navigiert. Dies ist wichtig, da Nutzer, die ausschließlich die Tastatur verwenden (KO) oder assistive Technologien (AT) nutzen, auf diese Weise durch die Informationen und Funktionen Ihrer Anwendung navigieren und diese präsentiert bekommen. Wenn Sie nach einer Regel für die Festlegung der Tab-Reihenfolge suchen: In der Regel folgt diese der Lesefolge der Seite von oben nach unten.

Schauen wir uns unser Beispiel einmal an:

Ein paar Anmerkungen: Die Punkte Nr. 12 und Nr. 13 sind wichtig, da ich damit andeute, dass sich zwischen dem Ende der oberen Leiste und der ersten Karte keine weiteren fokussierbaren Elemente befinden. Was die Karten angeht: Hätte ich die Fokusreihenfolge innerhalb der Karten bereits auf Musterebene festgelegt, müsstest du dies hier nicht unbedingt noch einmal tun, es sei denn, es gäbe eine Abweichung, die besonders erwähnt werden müsste.

Wer genau hinschaut, wird feststellen, dass in diesem Beispiel kein „Skip-Link“ vorhanden ist, der normalerweise die erste Tabulatortaste wäre. Sie haben Recht, und eigentlich sollte es bei einer Website wie dieser einen geben, aber der Einfachheit halber wurde er weggelassen.

Schaltflächen und Links

Schaltflächen und Links sind eine recht einfache Gruppe von Annotationen, und die meisten Designer werden sie sofort einsetzen können. Sie müssen lediglich angeben, ob es sich um eine Schaltfläche oder einen Link handelt. Wie genau Sie dabei vorgehen, bleibt Ihnen und Ihrem Entwicklungsteam überlassen. Ich persönlich nutze diese Funktion nur, wenn ich etwas definieren muss, das nicht auf den ersten Blick erkennbar ist – zum Beispiel ein Element, das wie ein Link gestaltet ist, sich aber wie eine Schaltfläche verhält, wie etwa „+ Weiteres hinzufügen“.

Schauen wir uns unser Beispiel einmal an:

Falls Sie sich fragen, was den Unterschied zwischen einer Schaltfläche und einem Link ausmacht: Wir sehen den Unterschied folgendermaßen: Schaltflächen dienen dazu, Funktionen und Aktionen auszulösen, wie zum Beispiel das Öffnen eines Modalfensters oder das Speichern des Fortschritts; Links dienen der Navigation. Achten Sie letztendlich einfach darauf, dass Sie einheitlich vorgehen. Ach ja! Falls du dich fragst, warum diese Farbauswahl-Schalter im Karten-Layout nicht als Schaltflächen markiert sind: Das liegt daran, dass sie keine sind … es handelt sich tatsächlich um gestylte Radio-Steuerelemente.

Barrierefreie Namen

Barrierefreie Namen (AccName) sind Informationen, die Sie einem Element zuweisen, damit dieses einem Nutzer von assistiver Technologie vermitteln kann, um was es sich handelt und, falls erforderlich, wie es funktioniert. Zu den gängigen Elementen, die solche Namen benötigen, gehören Symbole (die nicht bereits durch Text beschriftet sind), nicht-dekorative Bilder und nicht standardmäßige Steuerelemente (wie das zuvor erwähnte Optionsfeld).

Schauen wir uns das Beispiel einmal an:

Hier finden Sie eine detailliertere Übersicht über die Anmerkungen zu barrierefreien Namen:

Das Logo bekommt also einen, die Symbole in der oberen Leiste bekommen welche … das macht Sinn. Die Bilder in den Karten bekommen welche, da sie als informativ gelten, und die kleinen Regler zum Ändern der Radio-Farbe bekommen ebenfalls welche.

Moment mal, was ist mit dem riesigen Bannerbild? Es gilt als dekoratives Bild, benötigt also keinen „AccName“, und der darauf stehende Text ist über das Bild gelegt, sodass ein Screenreader ihn problemlos erfassen kann. Die „In den Warenkorb“-Schaltflächen benötigen keinen „AccName“, da der Text auf den Schaltflächen ausreicht.

Wenn Sie sich nicht sicher sind, ob etwas einen „AccName“ benötigt oder nicht, ist es hilfreich, sich vorzustellen, Sie könnten ein Element nicht sehen. Welche Informationen müsste ein Screenreader Ihnen mitteilen, damit Sie verstehen, um was es sich handelt und wie Sie damit umgehen sollen? Wenn diese Informationen nicht bereits direkt am oder um das Element herum vorhanden sind, benötigt es einen „AccName“.

Überschriften

In diesem Artikel werde ich nicht in eine lange Tirade darüber ausholen, wie man Inhalte richtig strukturiert, welche Lesereihenfolge sinnvoll ist und wie man was wann macht usw. Vor allem deshalb, weil es hier viele Varianten gibt und es in der Realität zahlreiche richtige Antworten gibt, je nachdem, was man hervorheben möchte und auf welche Weise.

Just know that many screen readers can skip from one <h> tag to another so it’s probably a good idea to make sure they share a cohesive narrative. What that narrative is is up to you. Here’s what you need to know: Make sure your <h> tags cascade and are nested properly <h1-n> and be consistent.

Schauen wir uns das Beispiel einmal an:

We only have 2 headings tags in this example: <h1> is in the banner and the <h2> is each of the titles in the cards. They tell a compelling narrative with the <h1> introducing the sale and each <h2> getting into specific items that are on sale.

Rollen

Okay, ich will ganz ehrlich zu dir sein. Die Definition von Rollen liegt vielleicht nicht in der Hand des UX-Designers … selbst die UX-Designer v Deques kennzeichnen in ihren Entwürfen keine Rollen. Der Grund dafür ist, dass die ARIA-Definitionen unserem Entwicklungsteam überlassen bleiben, weil das bei uns nun einmal so gehandhabt wird.

Wir haben in diesem Beispiel jedoch drei gängige Rollendefinitionen aufgeführt, falls Sie diese in Ihren Entwürfen künftig kennzeichnen möchten – und ehrlich gesagt sind sie recht leicht zu erkennen.

Schauen wir uns das Beispiel einmal an:

Hier finden Sie eine detailliertere Übersicht über die Rollenanmerkungen:

„Role = navigation“ bezeichnet Ihre Navigationsstruktur. Beachten Sie jedoch, dass ich die Symbole für Suche, Benutzer und Warenkorb nicht einbeziehe, da sie nicht Teil der Navigationsstruktur dieser Anwendung sind. „Role = banner“ wird für bannerartige Informationen verwendet. Dies findet man häufig auf Websites für hervorgehobene Informationen am oberen Rand der Seite. „Role = Main“ ist der Hauptinhalt der Anwendung. Es gibt natürlich noch weitere Rollen, die Sie sich ansehen können. Wenn Sie mehr erfahren möchten, sollten Sie die ARIA-Spezifikation zu Rate ziehen. Schauen Sie sich dazu auch unsere Deque Hochschulkurs zu ARIA.

Zusammenfassung

Einige wichtige Hinweise für den Einstieg in die Annotation Ihrer Entwürfe im Hinblick auf Barrierefreiheit:

1. Sprechen Sie mit Ihrem Entwicklungsteam. Finden Sie heraus, welche Art von Informationen es von Ihnen erhalten möchte und in welcher Form. Letztendlich ist es das Ziel dieser Anmerkungen, barrierefreie Anwendungen zu entwickeln.
2. Fühle dich nicht verpflichtet, all diese Konzepte auf einmal zu verstehen. Wenn dir das alles etwas überwältigend erscheint, mach dir keine Sorgen! Versuche einfach, zunächst ein oder zwei Dinge umzusetzen. Fang vielleicht mit einem Entwurf an, den du bereits erstellt hast, und versehe ihn nachträglich mit Anmerkungen, um zu üben.
3. Verwende die Methode, die für dich am besten funktioniert. Ehrlich gesagt sind einige davon vielleicht für jeden Prototyp, den du erstellst, übertrieben. Vielleicht möchtest du dem Prototyp einfach nur ein paar Notizen hinzufügen? Oder vielleicht sind einige der Anmerkungen bereits in deinen Feature-Tickets enthalten? Mach es so, wie es für dich am besten funktioniert.
4. Das sind nicht die einzigen Barrierefreiheits-Annotationen, die es gibt. Es gibt noch viele weitere, die Sie dem Kit hinzufügen könnten, wie beispielsweise die Unterstützung von „aria-live-region“, Untertitel usw.

Hier finden Sie einen Link zum Herunterladen des Kits und der Beispiele, die wir in diesem Artikel vorgestellt haben. Sie können das Kit als Adobe Illustrator-Dateien (AI), Sketch-Dateien oder SVG-Dateien herunterladen.

P.S. Im Folgenden finden Sie einige weitere kostenlose und nützliche Tools zur Barrierefreiheit, die Sie schon heute nutzen können:

1. Cauldron: Die Open-Source-Musterbibliothek von „ Deque“
2. Dequedas Farbkontrast-Tool von …
3. Axe: Das Open-Source-Tool zur automatisierten Barrierefreiheitsprüfung von Deque