Barrierefreies Brand Design
Ein Design für eine barrierefreie Webseite erstellen – wie gehe ich vor?
Barrierefreies Brand Design
Ein Design für eine barrierefreie Webseite erstellen – wie gehe ich vor?
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. Wir knüpfen am Artikel aus der letzten Ausgabe zum Corporate Design im Rahmen der Barrierefreiheit an und zeigen Gestaltungsansätze hands-on.
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 320 px Breite oder weniger zu erstellen. Als Schriftgröße empfehle ich strikt 16 px für den Fließtext als feste Größe. Diese muss später in der Entwicklung in 1 rem 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 16 px nicht zu lang ist. Zu lange Zeilen lassen sich nicht gut lesen, was für alle Nutzenden gilt.
Auch wenn es in modernen Webdesigntools wie Figma und Sketch möglich ist, jederzeit den Zoom zu verändern, empfehle ich dringend, in 100 Prozent 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 Arbeitsmonitor 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 ist es jedoch, zunächst zu schauen, welche Inhaltsblöcke es auf der gesamten Webseite geben soll, und diese auf einer Metaseite zusammenzuziehen. Auch wenn ich bei der Konzeption oft den Ansatz „Mobile First“ vertrete, empfehle ich in diesem Fall, eher mit einer Desktopgröße zu beginnen. Am besten mit einer, auf der nicht die ganze Breite genutzt wird, sondern rechts...