Nirgendwo gehen Darstellung und Umsetzungstechnik stärker Hand in Hand als im Webdesign. Entsprechend müssen schon die Brand-Designer:innen wissen, welche Darstellungselemente für das Web benötigt werden.

Teil 1 – Theorie
Bedeutet digitale Barrierefreiheit den Kontrollverlust über Corporate-Design?

Teil 2 – Praxis
Ein Design für eine barrierefreie Webseite erstellen – wie gehe ich vor?

Teil 2 – Praxis

Jedes Design bzw. jede Webseitenkonzeption sollte mit Research über die Nutzenden beginnen. Für barrierefreie Webseiten ist es natürlich notwendig, sich nicht nur mit dem klassischen “Menschzentrierten Gestaltungsprozess” [1] zu beschäftigen und dessen Methoden anzuwenden, sondern sich auch darin zu vertiefen, dass Menschzentriert nicht heißt, dass im Zentrum der “normale” Mensch steht, sondern alle Menschen mit ihren körperlichen, kognitiven und psychischen Eigenarten.

Das wirkt sich idealerweise bereits stark auf die Wireframes aus, die berücksichtigen sollten, dass interaktive Elemente auf allen Geräteklassen sowohl mit der Maus, als auch mit der Hand und mit der Tastatur bedienbar sein müssen.

Barrierefreiheit und Responsives Webdesign

Um barrierefrei zu sein, müssen sich die fertigen Webseiten komplett oder nur in der Schriftgröße von den Nutzer:innen skalieren lassen. Eine gut umgesetzte, responsive Webseite zeigt dann auch auf dem Desktop die mobile Version an.

Für die Arbeit am Design ist es daher unablässig, die mobile Version nach wie vor in 320px Breite oder weniger zu erstellen. Als Schriftgröße empfehle ich strikt 16px für den Fließtext als feste Größe. Diese muss später in der Entwicklung in 1rem umgewandelt werden, damit sie sich an die Präferenz der Nutzenden anpasst.

Die größte Größe, in der ein Design erstellt wird, sollte sich an der maximalen Breite orientieren, in der die Zeilenlänge bei Schriftgröße 16px nicht zu lang ist. Zu lange Zeilen lassen sich nicht gut lesen, was für alle Nutzenden gilt.

Auch wenn es in modernen Webdesign-Tools wie Figma und Sketch möglich ist, jederzeit den Zoom zu verändern, empfehle ich dringend, 100% zu arbeiten, um ein Gefühl für die Größen und Proportionen zu erlangen. Es lohnt sich außerdem, sich einzuzeichnen, welcher Bereich des Designs “above the fold”, also vor dem ersten Scrollen, sichtbar sein soll. Dabei sollte nicht der eigene Arbeits-Monitor ausschlaggebend sein, sondern vor allem an die vielen Nutzenden von Tablets und Laptops gedacht werden.

Nachdem die Wireframes feststehen, kann eine erste Farbversion entstehen. Eine Methode ist dabei sicherlich, zunächst die Startseite zu gestalten. Sinnvoller jedoch ist es, zunächst zu schauen, welche Inhaltsblöcke es auf der gesamten Webseite geben soll und diese auf einer Meta-Seite zusammenzuziehen. Auch wenn ich bei der Konzeption oft den Ansatz “Mobile first” vertrete, empfehle ich in diesem Fall, eher mit einer Desktop-Größe zu beginnen. Am besten mit einer, auf der nicht die ganze Breite genutzt wird, sondern rechts und links noch die Hintergrundfarbe des Bodyelements sichtbar sein wird. Desktop HD mit 1440px Breite zum Beispiel.

Meine Meta-Seite umfasst:

Darstellung und Position von Skip-Links für Screenreader-Nutzende und ggf. Einstellungen zur Barrierefreiheit, die nicht automatisch abgedeckt werden können.*
<head> der Seite mit
1. Logo
2. Suche
3. Navigation
4. Metanavigation
<main> der Seite mit
1. h1 Überschrift (für alle Templates!)
2. Fließtext in Paragraphen 16px (= 1rem im CSS)
3. Links
  1. innerhalb der Seite
  2. zu externen Seiten
  3. auf Dokumente, die geöffnet werden (Dateiformat mit angeben!)
  4. auf Dokumente, die herunter geladen werden (Dateiformat mit angeben!)
4. Headlines Level 2–6
5. Weitere Inhaltsblöcke:
  1. Zitate
  2. Informationsboxen
  3. Sortierte Liste
  4. Unsortierte Liste
6. Formularelemente:
  1. Eingabefelder
  2. Dropdown-Felder bzw. Comboboxen
  3. Checkboxen und Radiobuttons
7. Nicht vergessen! die Spezialfarben für:
  1. Selektierten Text
  2. Scrollbar-Design
  3. Hover-Darstellung von Links
  4. Visited-Darstellung von Links
  5. Hover-Darstellung von visited Links
  6. Fokus-Farbe und Stil für alle Elemente (one fits all?)

* Position und Darstellung hiervon bestimmen, ob sie ebenfalls im <head> platziert werden können oder eine eigene <section> erhalten.

Je nachdem, wie die Brand bisher aussieht, fange ich mit den bereits feststehenden Farben an, eine erste Version zu bauen. Dabei achte ich darauf, die Unterscheidungen zwischen einzelnen Abschnitten und Elementen nicht über die Invertierung der Schriftfarbe zu lösen, sondern achte darauf, möglichst eine andere Hintergrundfarbe oder andere Gestaltungselemente zu verwenden die einen ausreichend hohen Kontrast zu der Fließtextschrift hat.

Erst wenn diese Version fertig ist, dupliziere ich sie und bearbeite die Version für den jeweils anderen Modus. Dabei achte ich immer darauf, alle Farben, die miteinander kombiniert werden können, auch gegeneinander zu prüfen, ob der Kontrast ausreichend ist.

Wenn die Farbgestaltung feststeht kommen noch exemplarische Ausarbeitungen in verschiedenen Schriftgrößen sowie für eine grobe oder feine Eingabemethode dazu.

Wichtig ist natürlich nach wie vor die responsive Darstellung, die im Prüfschritt 9.1.4.10 Inhalte brechen um [2] ein Level AA-Kriterium darstellt.

Gibt es Farben, die ich nicht einsetzen sollte?

Das würde ich nicht pauschal sagen. Es kommt in erster Linie darauf an, wie die Farben eingesetzt werden und wofür – und natürlich auf den Kontrast von den Farben der Schrift und Bedienelemente zum Hintergrund.

Das wohl wichtigste Beispiel ist der Einsatz von Rot (inklusive Orange und Rosa) und Grün. Wenn diese ohne eine weitere visuelle Komponente darstellen sollen, ob es sich z.B. um eine negative oder positive Meldung handelt, kann diese von vielen Nutzenden nicht korrekt interpretiert werden. In diesem Fall muss z.B. Text oder eine gut lesbare Form dazu kommen um eindeutig gelesen zu werden.

Für diejenigen, die sich an Fußball auf Schwarz-Weiß-Fernsehern erinnern, möchte ich an dieser Stelle auf die unterschiedlichen Taschen hinweisen, in denen Schiedsrichter damals die gelbe und die rote Karte mit sich trugen. Aus dieser Zeit stammt der Begriff “Arschkarte”, da die rote Karte in der Hosentasche getragen wurde, um die Farbe der Karte für die Zuschauer daheim verständlich zu machen.

Um sicherzugehen, ob alle wesentlichen Elemente von allen Nutzenden gut gesehen werden können, empfiehlt sich ein Tool, das die Farben so umwandelt, wie Menschen mit verschiedenen Farbsehschwächen sie wahrnehmen. Am wichtigsten ist, dass sie keine relevante Funktion übersehen können, weil die Farbe nicht deutlich war!

Farbmodi mit CSS Farb-Variablen mit wenigen Codezeilen umsetzen

95% der in Deutschland verwendeten Browser unterstützen inzwischen den Einsatz von CSS-Variablen [3]. Für die wenigen Browser, die dies noch nicht unterstützen, gibt es den Fallback den Farbwert mit in den Aufruf der Farbe zu schreiben. Wenn Sie die 0,09% Unterstützung für den Internet Explorer 11 ebenfalls unterstützen möchten können Sie dies mit einem Polyfill [4] tun.

CSS-Variablen sind deshalb so wichtig, weil wir ihnen an zentraler Stelle sagen können, für welche Farbpräferenz sie gelten sollen.

Welche Farbversion soll ich als Default setzen?

Zunächst einmal der Reminder: Wir wollen unsere Brand maßgeblich gestalten, aber die Hoheit darüber, in welchem Modus Nutzer:innen sie digital auf ihren eigenen Geräten betrachten, liegt nicht bei uns. Generell ist es jedoch sinnvoll, die Farbvariablen nicht ausschließlich an Media-Queries zu knüpfen, zumal diese derzeit “nur” von 93,69% der in Deutschland verwendeten Browser unterstützt werden [5].

Hier meine Überlegungen dazu:

2018 hat Apple den Nacht-Modus auf dem Mac in macOS 10.14 “Mojave” eingeführt [6], andere Plattformen haben nachgezogen.
Seit Sommer 2019 unterstützen Browser das Feature [7].
Im Sommer 2023 haben in einer Übungsgruppe alle Student:innen gesagt, immer den Nacht-Modus zu nutzen. In einer spontanen Linked-In-Umfrage waren es bei Produktionsstopp nur 27%, die immer den Tag-Modus genutzt haben.
Da der Nacht-Modus jedoch extra eingestellt werden muss, gehe ich davon aus, dass diejenigen, die ihn noch nicht eingestellt haben, den Tag-Modus gewohnt sind und dieser für sie ok ist.

Auch wenn die Brand in Druckerzeugnissen eher einen Nacht-Modus einsetzt, im Web ist es sinnvoller den Tag-Modus als Default zu setzen.

Zunächst wird das Set von Farben für den Tag-Modus am Anfang der CSS-Datei gesetzt, da CSS (zur Erinnerung, CSS steht für “Cascading Style Sheet”) gesetzte Regeln so lange innerhalb von bestimmten Bereichen vererbt, bis sie anderweitig überschrieben werden. Zur besseren Veranschaulichung des Prinzips habe ich Farbnamen gewählt:

:root {
   --body: white;
   --copy: black;
   --logo: red;
   --link: blue;
}

Damit der Tag-Modus auch der Modus ist, der beim Ausdrucken verwendet wird, setzen wir bei den folgenden Media-Queries immer den Geltungsbereich “only screen” zusätzlich zu der eigentlichen Abfrage mit ein. Dann gelten die Anweisungen nicht für den Druckmodus.

@media only screen and (prefers-color-scheme: dark) {
  :root {
    --body: black;
    --copy: white;
    --link: yellow;
}

Im weiteren Verlauf werden diese Variablen den jeweiligen Eigenschaften zugewiesen. Das Komma hinter dem Variablen-Namen und der Default-Farbwert sind für diejenigen Browser gedacht, die keine Variablen unterstützen:

body {
     background: var(--body, white);
}

#logo {
     color: var(--copy, black);
     fill: var(--logo, red);
}

p {
     color: var(--copy, black);
}

a {
     color: var(--link, blue);
}

Für die ID #logo bin ich davon ausgegangen, dass das Logo aus einem rot gefärbten SVG mit daneben stehendem schwarzen Text besteht. Der Text wird durch die Eigenschaft color eingefärbt, der Logo-Pfad im SVG durch fill.

Der Farbwert “red” wird mit dem Hexadezimalwert #FF0000 aufgelöst. Er erreicht im Kontrast zu weiß ein Verhältnis von 4, was nur die Voraussetzungen für Schrift mit mehr als 24px erfüllt. Da wir davon ausgehen, dass das Logo eher groß angezeigt wird, reicht dies gerade so aus. Auf schwarzem Hintergrund ergibt sich ein Kontrastverhältnis von 5.25, was auch die Kriterien für AAA für große Schrift erfüllt. Da dies als ausreichend betrachtet werden kann wird die Farbe –logo in den Einstellungen für den Nacht-Modus nicht verändert.

Das Ergebnis sieht automatisch so aus dass die linke Version sichtbar ist wenn der Tag-Modus aktiviert wurde und der rechte bei aktivem Nacht-Modus:

TL;DNR (Too long; did not read)

Sie werden im barrierefreien Web die Kontrolle über ihr Corporate Design nicht zu 100% behalten können. Wenn Sie ein paar Adaptionen vornehmen und ihre Marke bewusst in das Zeitalter der digitalen Barrierefreiheit überführen, wird Ihnen der Paradigmen-Wechsel sicherlich besser gelingen, als wenn Sie an den Regeln der Kontrolle über Ihr Corporate-Design festhalten, wie es in der analogen Zeit noch möglich war!