Barrierefreiheit in Software

Wie es dazu kam

Vor Kurzem war ich in einem Meeting darüber, wie Alt-Texte in einem Onlineshop geschrieben werden sollten, den ich beraten habe. Ich war als externer Berater für Softwarearchitektur dabei, zusammen mit jemandem aus der internen IT und zwei Personen aus dem Marketing.

Am Ende des Meetings stand die Entscheidung fest. Der bisherige Ansatz sollte bleiben. Alt-Texte würden weiterhin als weiterer Platz für Keywords behandelt, nicht in erster Linie als Hilfsmittel für Barrierefreiheit.

Das Meeting war frustrierend. Das größere Problem ist aber, dass Barrierefreiheit in Unternehmen oft keine klaren Verantwortlichen hat. Wenn niemand dafür verantwortlich ist, wird sie verhandelbar. Und wenn sie verhandelbar wird, zieht sie meistens den Kürzeren.

In kleineren Unternehmen ist das Marketing meiner Meinung nach oft gut aufgestellt, um Barrierefreiheit ernst zu nehmen. Seine Aufgabe ist es, Menschen dabei zu helfen, das Angebot des Unternehmens zu verstehen, ihm zu vertrauen und es zu nutzen. Das sollte möglichst viele Menschen einschließen, nicht nur diejenigen, die das Web genauso erleben wie das Team.

Menschen mit Behinderungen auszuschließen ist Diskriminierung. Es schadet auch dem Geschäft, weil es eine große Nutzergruppe ausschließt.

Genug geschimpft. Reden wir darüber, wie man es richtig macht.

Was ist Barrierefreiheit?

Barrierefreiheit bedeutet, Produkte, Geräte, Dienstleistungen, Fahrzeuge oder Umgebungen so zu gestalten, dass Menschen mit Behinderungen sie nutzen können. ¹

In diesem Artikel konzentriere ich mich auf Barrierefreiheit in Software. Ich werde außerdem hauptsächlich Begriffe aus der Webentwicklung verwenden, weil die meisten damit arbeiten. Dasselbe gilt für native Apps.

SEO ist eine Abzocke

SEO steht für Search Engine Optimization, also Suchmaschinenoptimierung. Dieser Name ist das Problem.

Versteh mich nicht falsch. Es ist wichtig, dass Suchmaschinen deine Website crawlen können. Aber damit endet SEO.

SEO verwechselt Korrelation mit Kausalität.

Nützliche, übersichtliche, schnelle und barrierefreie Seiten werden immer besser platziert, weil Suchmaschinen versuchen, Nützlichkeit abzuschätzen. Konzentriere dich auf die UX für echte Nutzer, nicht auf einen Algorithmus. Biete deinen Nutzern einfach eine gute UX, und Suchmaschinen werden das zu schätzen wissen.

Selbst wenn du Suchmaschinen überlisten möchtest, kannst du das nicht. Du kannst nicht für ein System optimieren, das du weder einsehen noch kontrollieren oder vorhersagen kannst. Google veröffentlicht seine Ranking-Regeln nicht. Außerdem ändert Google sie im Laufe der Zeit.

Wenn also jemand sagt “für Google optimieren”, frag nach, wofür genau optimiert werden soll. Die Person weiß es nicht.

Sie kennt Vermutungen. Sie kennt Muster. Sie weiß, was früher funktioniert hat. Das ist nicht dasselbe, wie den Algorithmus zu kennen.

Mach die Seite verständlich. Mach sie barrierefrei. Beantworte die Suchanfrage. Hilf dem Nutzer. Das ist die einzige “SEO”, die Sinn ergibt.

Alles andere ist Raten. Oder Werbung.

Wenn du Geld in eine hohe Platzierung bei Google investieren möchtest, bezahle Google und nicht irgendeinen SEO-Guru.

Alternativtexte

Visueller Kontext

Manche wesentlichen visuellen Inhalte sind für einige Menschen mit Behinderungen schwer oder gar nicht zugänglich. Der Einfachheit halber nehmen wir Bilder als Beispiel. Dasselbe gilt aber für Diagramme und andere rein grafische Inhalte.

Der Alternativtext, kurz Alt-Text, ist für Menschen gedacht, die diesen Inhalt aus irgendeinem Grund nicht visuell wahrnehmen können. Er ist keine Bildbeschreibung und keine Bildunterschrift. Die Aufgabe des Alternativtextes ist es, die Lücke zu schließen. Er sollte den Kontext der Seite berücksichtigen und die Informationen, die der grafische Inhalt vermitteln würde, in Textform ergänzen.

Wie schreibt man also einen guten Alternativtext? Überlege, welche Informationen dir der Text auf der Benutzeroberfläche bereits gibt. Überlege dann, welche zusätzlichen Informationen das Bild liefert, die dir fehlen würden, wenn du es nicht sehen könntest. Entscheidend ist, keine Informationen zu wiederholen, die bereits als Text auf der Benutzeroberfläche stehen. Nimm nur Informationen auf, die für die Verwendung des Bildes relevant sind.

Nehmen wir dieses Bild als Beispiel:

Wenn du dieses Bild auf einer Seite über Radfahren verwendest, kannst du schreiben:

Mann fährt mit dem Fahrrad durch eine ruhige Stadtstraße

Das Café spielt hier keine Rolle. Es liefert keine Informationen, die in diesem Zusammenhang relevant sind.

Wenn du dasselbe Bild auf einer Seite über dieses Café verwendest, wird der Radfahrer unwichtig:

Café in einem roten Backsteingebäude mit großen Fenstern, einer roten Markise und einem Schild mit der Aufschrift ‘Stads Koffie Branderij’

Denk an den Kontext. Worum geht es auf der Seite? Welche Informationen sollten ergänzt werden, wenn das Bild nicht sichtbar ist?

Der Alt-Text sollte nur die Informationen ergänzen, die fehlen, wenn das Bild nicht sichtbar ist, und nichts darüber hinaus.

Emotion

Angenommen, du hast eine Seite mit den Vortragenden einer Konferenz. Die Liste enthält jeweils den Namen, das Unternehmen und ein Foto.

Was schreibst du in den Alt-Text? Den Namen zu wiederholen ergibt keinen Sinn.

Versuchst du, die Person zu beschreiben? Geschlecht? Ethnische Zugehörigkeit? Das wird schnell seltsam.

²

Konzentrieren wir uns auf diesen einen Eintrag und nehmen an, es geht um eine Tech-Konferenz.

²

Der Name “Jake Archibald” und das Unternehmen “Google” stehen bereits klar im Text. Für eine Tech-Konferenz sind seine ethnische Zugehörigkeit, sein Geschlecht, sein Alter und seine Brille irrelevant. Mit dem Kontext allein kommen wir hier nicht weit. Konzentrieren wir uns also auf die Emotion.

Jake Archibald versteckt sich schelmisch hinter einer Pflanze

Andere Vortragende haben vielleicht nur ein Porträtfoto ohne etwas Erwähnenswertes. Das ist in Ordnung. Lass das alt-Attribut einfach leer.

Das Konferenzbeispiel stammt aus der Folge über Alt-Texte des HTTP-203-Podcasts von Jake Archibald und Surma.² Ich kann empfehlen, sie anzuschauen.

Wenn es bei dieser Konferenz nicht um Technik, sondern um Diskriminierung ginge, würde sich plötzlich ändern, was wichtig ist. Informationen wie ethnische Zugehörigkeit und Geschlecht wären nun bedeutsam. Was relevant ist und was nicht, hängt stark vom Kontext ab.

Produktfotos

Auf einer Shopseite gibt es häufig mehrere Fotos desselben Produkts. Das ist eine Besonderheit.

Um das Offensichtliche vorwegzunehmen: Schreibe weder den Produktnamen noch eine allgemeine Beschreibung in den Alt-Text. Das wären wiederholte Informationen. Denk daran, dass jemand mit einem Screenreader sich das immer wieder anhören müsste.

Schreibe wie zuvor nur die Informationen auf, die dieses Bild liefert und die nicht bereits als Text auf der Benutzeroberfläche stehen. Zusätzlich haben wir hier aber mehrere Bilder. Du kannst den Alt-Text für jedes Bild nicht einfach isoliert schreiben. Du musst die anderen Bilder berücksichtigen.

Dieses Bild zeigt den PC im 45-Grad-Winkel. Es zeigt den Lufteinlass an der Vorderseite und den Luftauslass an der Oberseite. Du solltest nicht wiederholen, dass es ein PC ist oder welche technischen Daten er hat.

Dieses Bild zeigt das Glasfenster, durch das die PC-Komponenten sichtbar sind. Du solltest die sichtbaren Komponenten nicht erneut aufzählen, da sie in einer Tabelle mit technischen Daten oder etwas Ähnlichem stehen sollten. Das Glasfenster ist wichtig, weil es eine neue Information sein könnte.

Dieses Bild zeigt die Rückseite des PCs mit seinen Anschlüssen. Die Anschlüsse eines PCs sind wichtig. Du kannst sie hier wiederholen oder ihre Position und Anordnung genauer beschreiben. Das ist aber nicht zwingend nötig und hängt von der üblichen Kundschaft und dem Detailgrad deiner technischen Daten ab.

Keine zusätzlichen Informationen

Es gibt Bilder, die keine zusätzlichen Informationen in Textform brauchen. Manche Bilder sind rein dekorativ, etwa Icons .

Entferne niemals das alt-Attribut. Gib es immer an. Du kannst es auf einen leeren String setzen, wenn es keinen sinnvollen Text gibt, den du schreiben könntest. Ein leeres alt-Attribut ist nicht dasselbe wie ein vollständig fehlendes alt-Attribut. Es sagt aus, dass du darüber nachgedacht und dich gegen einen Text entschieden hast. Für manche Bilder gibt es keinen Text, der sinnvolle Informationen ergänzen würde.

UI-Skalierung

Stell dir vor, du hast Schwierigkeiten beim Lesen und vergrößerst oder verkleinerst deshalb die Schrift. Die Gründe können ganz unterschiedlich sein, von verschwommener Sicht bis zu Bildschirmen mit sehr hoher Pixeldichte.

Dann stößt du aber auf UI-Elemente mit so großzügigen Abständen, dass kaum noch Platz für den Text bleibt. Das passiert auf den meisten Websites, weil es zur Best Practice geworden ist, die CSS-Einheiten rem, relativ zur globalen Schriftgröße am Root-Element, und em, relativ zur lokalen Schriftgröße, nicht nur für Text, sondern auch für Abstände, Größen und Layout zu verwenden. Ich verstehe, dass es die Größenbestimmung der UI erleichtert, wenn Abstände und Containergrößen auf der Schriftgröße basieren. Der Nachteil ist aber, dass viele Benutzeroberflächen unbenutzbar werden, wenn sich die Schriftgröße ändert.

Sogar TailwindCSS, das meistgenutzte Styling-Framework im Web, verwendet --spacing: 0.25rem; als Standardeinheit für Abstände.

Es geht hier nicht darum, welche Einheit die richtige ist. Mir ist egal, welche Einheiten du verwendest, solange die Benutzeroberfläche korrekt skaliert.

Das Problem ist die unbeabsichtigte Kopplung von Schriftgröße und Leerraum. Wenn du rem für Dinge wie Padding verwendest und der Nutzer die Schriftgröße erhöht, wird auch das Padding größer. Dadurch wird dem gerade größer gewordenen Text Platz weggenommen.

Siehst du jetzt das Problem? Größerer Text + weniger Platz für Text = unlesbarer Text / unbenutzbare UI.

Im folgenden Beispiel verändert der Schieberegler die Schriftgröße am Root-Element (rem). Die erste Karte verwendet 0.25rem als Abstandseinheit. Die zweite Karte verwendet 4px. Bei einer Schriftgröße von 16px am Root-Element sind sie identisch, weil die Standardschriftgröße 16px beträgt und 1rem damit 16px entspricht.
Spiel einfach damit herum und urteile selbst.

Bitte verwende rem oder em nicht als Standardeinheit für Abstände und Layout. Nutze schriftrelative Einheiten nur dort, wo die Skalierung mit dem Text beabsichtigt ist. Setze für TailwindCSS @theme { --spacing: 4px; } in deiner Konfiguration ³. Dadurch bleiben die Abstandsverhältnisse von Tailwind erhalten, aber die Abstände bleiben fest, wenn sich die Schriftgröße am Root-Element ändert. Verwende dann bei Bedarf ausdrücklich beispielsweise w-[8rem].

Dabei musst du sorgfältiger über Einheiten nachdenken. Manche Werte sollten weiterhin mit der Schriftgröße skalieren. Das sollte aber eine ausdrückliche Designentscheidung sein und nicht das Standardverhalten von Margin, Padding, Gap, Breite und Höhe.

Mit dem Tag <meta name="text-scale" content="scale"> kannst du Browsern mitteilen, dass deine Website Text tatsächlich korrekt skalieren kann.⁴ Ansonsten hängt das Verhalten stark von der Plattform ab. Auf Mobilgeräten wird ohne diesen Tag überhaupt nicht skaliert. Zum Zeitpunkt dieses Artikels unterstützen nur Chromium-basierte Browser diesen Meta-Tag. Den aktuellen Stand findest du auf caniuse.com. Unterstützung in Chromium-basierten Browsern bedeutet Unterstützung für die Mehrheit der Nutzer.

Tastaturnavigation

Versuche, deine Benutzeroberfläche ohne Maus zu verwenden.

Nicht als schnellen Test, bei dem du schon weißt, wo alles ist. Benutze sie wirklich. Öffne die Seite, leg die Maus weg und versuche, das zu erreichen, wofür ein Nutzer gekommen ist.

Du wirst sehr schnell merken, wie viel von der Oberfläche einfach nur im Weg ist.

Besonders schlimm ist das auf Shopseiten. Vor dem eigentlichen Inhalt kommen oft ein Logo, eine Suchleiste, die Sprachauswahl, das Kontomenü, die Wunschliste, der Warenkorb, die Kategorienavigation, Werbelinks und vielleicht noch eine weitere Navigation darunter.

Wer die Tastatur verwendet, sollte sich nicht auf jeder Seite durch all das tabben müssen. Füge einen Link “Zum Hauptinhalt springen” hinzu. Er kann visuell verborgen sein, bis er den Fokus erhält, aber er muss existieren. Er gibt Nutzern eine Möglichkeit, das Unwichtige zu überspringen.

Die Reihenfolge der Elemente ist sehr wichtig. Ein Screenreader weiß nicht auf dieselbe Weise wie ein sehender Nutzer, dass etwas oben, unten, links oder rechts ist. Der Nutzer bewegt sich durch eine Abfolge. Wenn diese Abfolge falsch ist, wird die UI verwirrend.

Das bedeutet auch, dass visuelle Reihenfolge und Reihenfolge für assistive Technologien nicht immer dasselbe sind. Elemente mit CSS zu verschieben ändert nicht, wie ein Screenreader sie vorliest. Dasselbe gilt für grafische Tricks, Shader oder andere visuelle Transformationen. Das kann ein Problem sein, aber auch nützlich. Manchmal ist die beste visuelle Reihenfolge nicht die beste Lesereihenfolge.

Fehler brauchen dieselbe Sorgfalt. Wenn ein Formularfeld einen Fehler enthält, muss die Meldung klar mit der Fehlerquelle verknüpft sein. Nicht nur durch einen roten Rahmen. Nicht nur dadurch, dass irgendwo in der Nähe Text steht. Der Nutzer muss verstehen, welches Feld das Problem verursacht hat und was korrigiert werden muss.
Browser haben dafür gute eingebaute Tools. Man muss sie nur nutzen.

Manche Dinge sollten überhaupt nicht vorgelesen werden. Dekorative Icons, Layout-Hilfen und kosmetische Effekte können die Nutzung mit einem Screenreader verschlechtern, wenn sie als Inhalt zugänglich sind. Verbirg sie im Accessibility Tree, wenn sie keine Informationen beitragen.

Am besten verstehst du das, wenn du die Grundlagen der Screenreader-Bedienung lernst und deine eigene Benutzeroberfläche damit ausprobierst. Nicht perfekt. Gerade genug, um zu navigieren, zu lesen, zwischen Überschriften zu springen, Formulare zu bedienen und zu merken, wo die Nutzung scheitert.

Du wirst Probleme finden, die dir keine Checkliste so spürbar gemacht hätte.

Farbe

Es gibt eine Grundanforderung, die sich mit Tools wie Google Lighthouse überprüfen lässt, die Farbkontraste prüfen. Diese erfüllst du in den Standardeinstellungen. Aber damit ist es nicht getan.

Manche Menschen brauchen mehr Kontrast. Manche brauchen weniger Kontrast.

Das klingt widersprüchlich, ist es aber nicht. Augen sind unterschiedlich. Bildschirme sind unterschiedlich. Räume sind unterschiedlich. Manche Menschen brauchen deutliche Kanten, um die Oberfläche zu verstehen. Andere werden müde oder bekommen sogar Beschwerden, wenn jede Kante sie anschreit.

Behandle Kontrast deshalb bitte nicht wie eine einzige perfekte Zahl.

Wenn der Nutzer mehr Kontrast möchte, gib ihm eine ruhigere Oberfläche mit klareren Abgrenzungen. Nicht nur dunkleren Text. Entferne Hintergrundtexturen. Entferne dekorative Farbverläufe. Entferne Schatten, die wenig beitragen. Mach Rahmen, Fokuszustände und interaktive Elemente deutlich erkennbar.

Wenn der Nutzer weniger Kontrast möchte, mach nicht einfach alles grau und unlesbar. Nimm die Aggressivität heraus. Verwende sanftere Theme-Farben. Behalte die Struktur. Behalte die Hierarchie. Die Oberfläche sollte ruhiger wirken.

CSS ist dafür inzwischen gut genug. Mit relativer Farbsyntax kannst du aus deinen vorhandenen Theme-Farben sanftere oder kräftigere Farben ableiten, statt für jede Vorliebe eine vollständig separate Palette zu pflegen. Genau für solche Dinge sollten wir CSS nutzen.

Mit Kontrastfiltern oder Shadern wäre ich vorsichtig. Als Notlösung können sie nützlich sein, aber sie sind kein Design. Sie können Markenfarben zerstören, Bilder seltsam aussehen lassen und sorgfältig gewählte UI-Zustände in Matsch verwandeln. Kein Filter versteht Farbbeziehungen und Wahrnehmung. Wenn du die Komponenten kontrollierst, ändere das Theme. Übermale nicht die ganze Seite und hoffe, dass es sich gut anfühlt.

Es gibt auch den Forced-Colors-Modus.

In diesem Modus übernehmen Browser und Betriebssystem deutlich mehr Kontrolle über die Farben. Dein schönes Theme gibt nicht mehr den Ton an. Der Nutzer tut es.

Das ist gut.

Es bedeutet aber auch, dass du es testen musst. Manche Dinge verschwinden. Schatten funktionieren möglicherweise nicht mehr. Hintergrundbilder können stören. Dezente Rahmen sind vielleicht nicht mehr zu erkennen.

Verwende dafür die Media Query forced-colors. Verbirg dekorative Hintergrundbilder. Entferne störende visuelle Effekte. Füge echte Rahmen hinzu, wo du dich zuvor nur auf Schatten oder Farbe verlassen hast.

@media (forced-colors: active) {
  .hero {
    background-image: none;
  }

  .card {
    box-shadow: none;
    border: 1px solid CanvasText;
  }
}

Das Ziel ist nicht, dein Design um jeden Preis zu bewahren.

Das Ziel ist, dass der Nutzer das Gefühl hat, die Oberfläche respektiere seine Augen.

Bewegung

Wenn du darauf bestehst, deine Nutzer mit Scroll-Hijacking, Software-Cursorn oder bewegten Hintergründen zu quälen, schalte sie wenigstens ab, wenn der Nutzer prefers-reduced-motion auf reduce gesetzt hat.

In den meisten Fällen funktioniert das gut genug:

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
        animation-duration: 0s !important;
    }
}

Oder du verschiebst deine Animationen in @media (prefers-reduced-motion: no-preference).

Wenn dein Aufbau komplexer ist, investiere bitte die Zeit, alle Animationen abzuschalten, wenn der Nutzer das bevorzugt.

Die dunkle Seite des Webs

Viele Nutzer bevorzugen Dark Mode. Viele bevorzugen Light Mode. Manche führen sogar intellektuelle Kriege darüber, welcher besser ist. Beteilige dich nicht an diesem Krieg und lass deine Nutzer wählen.

Ich habe so viele Websites und Apps gesehen, die Light Mode, Dark Mode und einen automatischen Modus unterstützen, aber standardmäßig Light Mode verwenden. Warum? Wenn du bereits eine Einstellung hast, die die Systemeinstellung berücksichtigt, verwende sie als Standard und erspare deinen Nutzern die ein oder zwei Klicks, die sie zum Ändern des Themes brauchen.

Danke fürs Lesen

Barrierefreiheit kann einschüchternd sein, wenn man nicht darauf angewiesen ist. Aber sobald man den Dreh raus hat, ist es gar nicht so schwer, grundlegende Barrierefreiheit in die eigene Benutzeroberfläche einzubauen.

Wenn du unsicher bist, frag Menschen, die diese Hilfsmittel nutzen. Sie freuen sich meistens, wenn sich jemand dafür interessiert.