PAGE online

Web-Accessibility: Diese Extension zeigt Schwachstellen auf

Der Prototyp der Chrome-Extension »zugangsformen« von Daniela Hach visualisiert Barrieren im Netz.

Visualisierung alternativer Bildtexte süddeutsche zeitung.

Hochschule Augsburg. Trotz aller Bemühungen um Inklusion und Barrierefreiheit im Netz hapert es immer noch bei der Umsetzung von für alle Menschen zugänglichen Websites und Apps. Mit diesem wichtigen Thema hat sich Daniela Hach in ihrer Masterarbeit »zugangsformen« im Studiengang Interaktive Mediensysteme auseinandergesetzt. Dazu entwickelte sie den funktionsfähigen Prototyp einer Chrome-Extension, die Websites anhand der vier Kriterien »Leichte Sprache«, »Farbkontraste«, »Barrierefreie Bilder« sowie »Tastatur-Navigation« analysiert und die Ergebnisse dann grafisch darstellt.

Visualisierung Leichte Sprache, Kontraste und Klickwege
Auf den Einzelseiten schlüsselt die Chrome-Extension die gesammelten Daten visuell auf. Von oben: Leichte Sprache als weiße Rechtecke, darunter Kombinationen von Schrift- und Hintergrundfarbe in proportionaler Größe zur Textmenge, Klickweg bei Tastatur-Navigation über eine Website
Visualisierung der Alt Texte im Vergleich
Auf der Übersichtsseite lassen sich die Websites schnell vergleichen. Der NDR ist vorbildlich, was das Thema Bildbeschreibungen (Alt-Texte) angeht, die großen Tageszeitungen scheinen bemüht. Die PAGE-Website mit ihren vielen Bildern hinkt deutlich hinterher. Das werden wir ändern!

Ruft man eine Website auf, erfasst das Plug-in die Farben, Texte und Bilder sowie deren Attribute, etwa CSS, und wertet sie aus. Öffnet man an­schlie­ßend einen neuen Tab in Chrome, gelangt man zum User Interface der Extension und dort zu den Visualisierun­gen. Auf einer Übersichtsseite kann man die besuchten Websites hinsicht­lich ihrer Barrierefreiheit grob miteinander vergleichen. Klickt man eine der Websites an, gelangt man zu den detaillierten Darstellungen, die sich zu­dem als Gra­fiken herunterladen las­sen. Die Analysen vermitteln eine sehr kon­kre­te Vor­stellung da­von, wie (un)zugänglich die be­such­ten Web­sites für Menschen mit Behin­derungen sind.

Visualisierung der Klickwege mit verbundenen Zielpunkten
887 Tabs benötigen User ohne grafisches Interface, um sich einmal durch die »FAZ«-Startseite zu klicken

Um das Thema Inklusion auch au­ßer­halb der digitalen Medien in die Öf­fent­lichkeit zu tragen, hat Daniela Hach an eine Plakatserie im öffent­li­chen Raum oder eine Ausstellung gedacht. Die großflächige Inszenierung wäre eine Möglichkeit, das In­teresse der Be­trach­tenden zu wecken und ihnen Ge­legen­heit zu bieten, sich mit der Thematik auseinanderzusetzen. In die­sem Format käme auch die äs­the­ti­sche Qualität ih­rer Daten­visu­ali­sie­run­gen besonders schön zur Geltung.

Ausstellungs Mock Up mit Besuchern vor großflächigen Plakaten
Vielen ist gar nicht klar, dass sie selbst zur Barrierefreiheit beitragen können, etwa indem sie die Bilder auf Websites ­inhaltlich benennen und beschreiben. Eine »zugangsformen«-Ausstellung mit Daniela Hachs Datenvisualisierungen könnte dafür ein Bewusstsein schaffen

großflächige visualisierung im museum

Farbkontraste magenta grau blau
Plakatreihen im öffentlichen Raum würden auch für das Thema sensibilisieren

Die vier Analysekriterien und ihre grafische Umsetzung

Leichte Sprache

Die Extension stellt jedes Wort auf der Website als Rechteck dar, dessen Breite von der Wortlänge abhängt. Wörter mit mehr als zwölf Buchstaben erscheinen in Schwarz, Sätze mit mehr als zwölf Wörtern als schwarze Balken.

Farbkontraste

Die verschiedenen Kombina­tionen von Schrift- und Hintergrundfarbe werden jeweils als eigenes Feld dargestellt, dessen Größe der Anzahl der Wörter einer Kombination entspricht. Bei Mouseover zeigt die Extension den genauen Kontrastwert und die Schriftgrößen an.

Barrierefreie Bilder

Verwendete Bilder werden als Kreise wiedergegeben. Je nachdem, ob die Screenreader sie ignorieren (a), sie nicht ignorieren, aber keinen Alt-Text finden (b) oder den Alt-Text vorlesen (c), sind die Kreise nicht ausgefüllt (a), mit der Hauptfarbe, aber nicht mit Bild (b) oder mit beidem (c) gefüllt.

Tastatur-Navigation

Die Extension speichert alle per Tab-Taste erreichbaren Elementen mit ihrer Position auf der Website und verbindet sie durch eine Linie. Dies verdeutlicht die mitunter sehr langen Klickwege von Nutzern, die grafische Interfaces nicht bedienen können.

Auch in Zukunft möchte Daniela Hach digitale Projekte in kulturellen und sozialen Kontexten umsetzen. Momentan arbeitet sie an einem digitalen Wegweiser für Menschen mit Behinderungen

 

 

 

 

 

 

Produkt: eDossier »Webdesign-Trends«
eDossier »Webdesign-Trends«
Im Webdesign heißt es gründlich umdenken. PAGE hat dazu Statements führender Webdesigner eingeholt.

Kommentare zu diesem Artikel

  1. Es handelt sich um den funktionsfähigen Prototyp einer Chrome-Extension. Wir haben ihn getestet, aber die Extention ist noch in der Entwicklung. Hierbei geht es in erster Linie darum, durch die Visualisierung ein deutlicheres Bewusstsein für Barrieren zu schaffen. Um Barrieren im Web abzubauen, braucht es diese Extension hingegen nicht. Dazu muss man u.a. auf leichte Sprache beim Schreiben achten oder Bildbeschreibungen, aber das steht ja alles schon im Artikel.

  2. Interessanter Artikel und vielversprechendes Projekt – alleine die angesprochene Chrome Extension ist nirgendwo (mehr?) aufzufinden. Conclusio: nettes Design-Projekt, stiftet aber keinerlei nachhaltigen Nutzen … schade um das ambitionierte Ziel Barrieren im Web abzubauen.

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Das könnte Sie auch interessieren