Heute widmen wir uns der Frage: Wie setzt mgo360 Barrierefreiheit online um?

Das Internet ist für alle, heißt es. Doch Menschen mit Behinderung sind häufig davon ausgeschlossen. Welche Voraussetzungen es braucht, damit Websites dieses Versprechen tatsächlich einhalten, haben wir in den letzten zwei Artikel „Großes Thema, große Relevanz“ und „Weiter geht’s!“ aufgezeigt. Heute widmen wir uns der Frage: Wie setzt mgo360 Barrierefreiheit online um?

„Barrierefreiheit im Netz wird in den kommenden Jahren immer wichtiger“, sagt Muschtaq Mustafa, Projektmanager und Konzeptioner bei der Agentur München von mgo360. Er betreut den Relaunch des Projekts „ich will fair“ – eine Plattform der Deutschen Gesellschaft für Internationale Zusammenarbeit (GIZ) zum Thema Nachhaltigkeit. Bei ichwillfair.de handelt es sich um eine Webseite, die Schwerpunkte wie Fairer Handel und Umwelt aufgreift und Menschen so den Einstieg in ein faires Leben aufzeigen und erleichtern soll. Auf den Übersichtsseiten zu diesen Themen werden unter anderem Nachhaltigkeits-Artikel von Partnern wie Fairtrade Deutschland oder Weltladen veröffentlicht.

HTML-Struktur sorgt für die nötige Orientierung

Bei dem Redesign der ursprünglichen Website lag das Augenmerkt hinsichtlich Optik und Bedienbarkeit vor allem auf der Nutzerfreundlichkeit. „Wir beraten unsere Kundinnen und Kunden auch, welche Einstellungen für die Barrierefreiheit wichtig wären“, so Muschtaq Mustafa. „Bereits bei der ersten Konzeptionierung achten wir daher darauf, dass die Website strukturiert, simple und eindeutig ist.“

Damit der Aufbau von Nutzerinnen und Nutzern leicht verstanden wird und von Sprachprogrammen richtig erkannt werden kann, benötigt die Seite eine klare HTML-Struktur. Das bedeutet, die HTML-Überschriften H1, H2, H3 sowie der Fließtext müssen klar im Quellcode der Seite gegliedert sein.

ichwillfair.de ist zudem ausschließlich mit der Tastatur bedienbar. Denn wer prüfen will, ob eine Website barrierefrei ist, sollte die Maus beiseiteschieben und sich alleine mit der Tastatur durch den Seiteninhalt klicken. Wichtigste Taste ist dabei die sogenannte Tabulator-Taste. Diese Taste liegt auf der gängigen deutschen PC-Tastatur über der Feststelltaste (Caps Lock) und zeigt zwei waagrecht übereinanderliegende Pfeile jeweils mit einem Endstrich.

Im Bild sieht man gut die Kontraste zwischen Text und Hintergrund, die gefetteten Überschriften und farbliche Unterlegungen von Buttons.

„Mit der Tabulator-Taste kann man zu jedem anklickbaren Feld nach und nach wechseln“, so Muschtaq Mustafa. Mit der Entertaste können zudem Links und klickbare Buttons aktiviert werden, die dann die jeweils verlinkte Seite öffnen. Auch das in die Webseite eingegliederte Formular zur Kontaktaufnahme im Footer ist mit der Tabulator-Taste bedienbar. Wichtig: Bei der reinen Tabulator-Bewegung darf der Seiteninhalt nicht automatisch neu geladen werden, andernfalls können sich blinde Menschen auf der Website nicht zurechtfinden.

Alt-Text und Layout: Auch die Optik muss barrierefrei sein

Beim Design von ichwillfair.de wurde darauf geachtet, dass die Farben rot und grün nicht zu häufig erscheinen, so Muschtaq Mustafa. Denn Menschen mit einer Rot-Grün-Sehschwäche fällt es oft schwer, zwischen beiden Farben zu unterscheiden. Zudem wurde allgemein auf eine kontrastreiche Farbauswahl gesetzt.

Die auf der Seite angezeigten Bilder sind mit einem ALT-Text versehen. Dabei handelt es sich um alternative Texte, die das auf dem Bild zu sehende präzise und anschaulich beschreiben sollen. Dadurch können sich Menschen mit Sehbehinderung den Bildtext vorlesen lassen. Sollte die Internetverbindung für das Laden eines Fotos nicht ausreichen wird ebenfalls der ALT-Text angezeigt. Diese HTML-Funktion bietet also eine Alternative zum visuellen Betrachten eines Bildes und ist somit eine zentrale Säule für die Barrierefreiheit einer Website.

Auch Google hat mittlerweile die Wichtigkeit von Barrierefreiheit im Netz erkannt, somit ist das Ausfüllen von ALT-Texten ein wichtiger Bestandteil der Suchmaschinenoptimierung (SEO). Mit dem Lupensymbol am unteren Rand der Fotos können diese zudem vergrößert werden.

Im Bild wird links oben die Aktion der genutzten Tabulator-Taste angezeigt. Nun kann die komplette Webseite mit dem Tabulator durchforstet werden.

Barrierefreiheit im Netzt ist bereits ein großes Thema und wird in Zukunft wahrscheinlich noch zentraler für das Ranking bei Suchmaschinen werden – und dadurch ein wichtiger Faktor für jedes Unternehmen bleiben. Das Ziel ist klar: Das Internet soll zu einem inklusiven Ort werden.