Du bist nicht mit dem Internet verbunden.
Galaxus Logo
ThemenwocheReportage 2195

Ein Blinder öffnet uns die Augen

Wir wissen schon länger, dass unsere Website nicht behindertengerecht ist. Doch einmal einen Blinden beim Ausprobieren unseres Shops zu beobachten, hat uns die Augen geöffnet.

Wir sind schlecht. Wir sind sogar die schlechtesten in einem Feld von mehr oder weniger schlechten Webshops, wenn es um den Zugang für Behinderte geht. Dies hat 2016 die Stiftung «Zugang für alle» in ihrer Accessibility-Studie ermittelt. Nun sitzen wir in den Büros der Stiftung und lassen uns erklären, was denn so schlimm ist und was wir besser machen könnten. Wir, das sind UX-Designer Stefan Jost, Front-End-Entwickler Remo Vetere, Fotograf Thomas Kunz und ich.

Gianfranco Giudice testet für die Stiftung Websites auf ihre Tauglichkeit für Menschen mit Behinderungen und ist selbst blind. Jetzt sitzt er vor einem Laptop und besucht digitec.ch. Eine spezielle Software, ein sogenannter Screenreader, liest ihm vor, was sich auf der Website befindet. Doch was der Screenreader so von sich gibt, ist nicht hilfreich. Grund: Auf der Seite fehlen Zusatzinformationen, die der Reader braucht, um die grafischen Elemente richtig zu deuten.

Gianfranco erforscht unsere Website per Screenreader, wir sehen sie auf dem Beamer.

Woran ein Blinder scheitert

Sehende erkennen eine Navigation ganz einfach daran, dass sie wie eine Navigation aussieht und sich grafisch an einem Ort befindet, wo wir aus Gewohnheit Navigationen erwarten. Für einen Screenreader muss aber die Navigation als solche im Quellcode der Seite beschriftet sein. Ansonsten schwafelt die Sprachausgabe einfach den Text drauflos, und der Blinde kann sich höchstens zusammenreimen, dass dies nun eine Navigation sein könnte.

Genau das passiert bei unserer Seite. Im Idealfall gibt der Screenreader zuerst einmal einen Titel aus, der sagt, worum es hier geht, und dann kündigt er eine Navigation an. Auf digitec.ch beginnt er aber einfach mit: «Liste mit sechs Elementen: Kontakt Hilfe Über uns Standorte Social Media Stellenangebote.» Das geht in einem Höllentempo vor sich, und englische Wörter werden ausgesprochen, als ob es deutsche wären, aber mit all dem hat Gianfranco kein Problem. Sein Gehör ist daran gewöhnt. Das Problem liegt in der Orientierung.

Die Elemente oben rechts sind ohne optische Hilfe kaum als Menü erkennbar.

Bei der «Liste mit sechs Elementen» kann sich Gianfranco noch zusammenreimen, dass es sich um eine Navigation handeln muss. Doch dann – oben rechts – kommen die Punkte «Deutsch» und «Inkl. MwSt.» Das ist keineswegs selbsterklärend. Insbesondere, da der Screenreader keinen Hinweis darauf gibt, dass diese Elemente ausklappbare Untermenüs haben. Wer nicht blind ist, sieht das am kleinen nach unten zeigenden Pfeil. Gianfranco nützt dieser optische Hinweis nichts.

Albtraum Registrierung

Und so geht es weiter. Auch das Rubriken-Menü hat keine hinterlegte Überschrift. Die Beiträge beginnen mit einem Bild, das nicht mit einer Texterklärung versehen ist (das Alt-Attribut in HTML), dann kommen zwei Rubriken-Tags, dann erst die Überschrift. Laut Gianfranco müsste in der logischen Struktur des Quellcodes zuerst die Überschrift stehen und dann dessen Unterelemente. Visuell darf das natürlich anders angeordnet sein. Im Web-Design lassen sich visuelle Anordnung und logische Struktur trennen.

Gianfranco versucht jetzt, sich zu registrieren. Die Beschriftungen der Formularfelder wie «Vorname», «Nachname» usw. werden vom Screenreader nicht vorgelesen. Gianfranco weiss nicht, was er wo eingeben muss. Unten, bei der Telefonnummer, funktioniert dann das Vorlesen plötzlich.

Beim Link mit dem Facebook-Symbol sagt der Screenreader «Link». Äh, ja. Wir müssen lachen, aber gleichzeitig schämen wir uns. Aber gut: Jetzt wissen wir, warum wir so schlecht sind.

Unterschiedliche Behinderungen, unterschiedliche Bedürfnisse

Die Idee dieses Treffens ist auch, etwas zu lernen und uns auszutauschen. Darum sind neben mir und Fotograf Thomas Kunz auch der UX-Designer Stefan Jost und der Front-End-Entwickler Remo Vetere dabei. Und Andreas Uebelbacher von der Stiftung gibt uns zuerst ein paar Hintergrundinformationen zur Stiftung und ihrer Arbeit, aber auch zu Behinderungen allgemein und der Situation in der Schweiz.

Die Stiftung befasst sich nur mit dem elektronischen Zugang – für bauliche Massnahmen gibt es eine eigene Fachstelle. Behinderungen lassen sich in diese vier Kategorien einteilen:

  1. Sehbehinderungen
  2. Hörbehinderungen
  3. Motorische Behinderungen
  4. Kognitive und neurologische Behinderungen

Jede Behinderungsform benötigt unterschiedliche Optimierungen. Auch innerhalb einer Kategorie. Ein Blinder ist auf andere Hilfen angewiesen als eine sehbehinderte Person, die noch etwas Sehvermögen hat und das nutzen will.

Blinde stellen mit etwa 10 000 Personen in der Schweiz eine kleine Minderheit dar. Zum Vergleich: Es gibt hierzulande mindestens 325 000 Seh- und 500 000 Hörbehinderte, und insgesamt sind 14 Prozent der Menschen von einer Behinderung betroffen. Der Grund, warum die Stiftung trotzdem einen starken Fokus auf Blinde legt: Sie stellen für Website-Betreiber die grösste Herausforderung dar, weil jegliche Orientierung an grafischen Elementen wegfällt. Zudem nutzen auch viele Sehbehinderte zusätzlich einen Screenreader zur Unterstützung.

Gleichzeitig sind Blinde stark auf funktionierende Websites angewiesen. Gianfranco sagt, er nutze Laptop und Smartphone täglich, denn der digitale Zugang sei für ihn viel einfacher als das Stöbern in einem Ladenlokal. Dort bräuchte er eine individuelle Führung, was sehr viel Zeit beanspruchen würde. Auch die Zeitungslektüre klappt nur digital. Fahrplan lesen ist auf dem Smartphone für ihn möglich, auf den Anzeigetafeln des Bahnhofs nicht. Und so weiter. «Was für Sehende etwas Zusätzliches ist, eine weitere bequeme Möglichkeit, das ist für mein Leben essenziell», fasst er zusammen.

Auch die Braille-Schrift lässt sich digital nutzen.

Die Schweiz im internationalen Vergleich

Was digitale Behindertentauglichkeit angeht, gibt es in der Schweiz noch einiges zu tun. Andreas und Stefan sind sich einig, dass zum Beispiel in Grossbritannien die Awareness für das Thema viel grösser ist. Im Ausland existieren teilweise strengere Gesetze. Die Stiftung «Zugang für alle» merkt dies daran, dass ihre Dienste in letzter Zeit verstärkt von Fluggesellschaften gefragt waren. Denn diese müssen natürlich internationalen Vorschriften genügen. Einige Fluggesellschaften haben denn auch die Tastaturbedienbarkeit vorbildlich umgesetzt, und zwar ohne dass es Abstriche in der Optik gäbe. Dies kommt auch Nichtbehinderten zugute, die keine Lust haben, immer zwischen Maus und Tastatur hin- und her zu wechseln. Hier das Beispiel der Swiss-Website:

Jedes Unternehmen muss seine Ressourcen optimal einsetzen. Das kann bedeuten, dass ein UX-Designer zuerst einmal darauf angesetzt wird, die Bedienbarkeit für die Mehrheit der Nichtbehinderten zu verbessern, statt für die Minderheit einer spezifischen Gruppe von Behinderten. Gesetze und Vorschriften helfen ein Stück weit, dass Behinderte trotzdem bekommen, was sie brauchen. Möglicherweise macht dies sogar den Wettbewerb fairer: Ein Unternehmen, das einen gewissen Aufwand für die Behinderten betreibt, hätte keinen Wettbewerbsnachteil mehr.

Wie sieht denn das in der Schweiz konkret aus? Ganz allgemein verbietet die Bundesverfassung Diskrimierung, ausdrücklich auch von Behinderten. Auf Gesetzesebene gibt es das Behindertengleichstellungsgesetz, das recht detailliere Vorgaben macht. Allerdings müssen diese nicht erfüllt werden, wenn der Nutzen in einem Missverhältnis zum wirtschaftlichen Aufwand steht. Was das im Einzelfall bedeutet, müsste im Fall einer Klage vor Gericht entschieden werden.

Für Bund, Kantone und Gemeinden gibt es weitere, genauere Vorschriften. Seit 2014 gilt in der Schweiz ausserdem die UN-Behindertenrechtskonvention (BRK), die zum Beispiel auch Schulen in die Pflicht nimmt. Nur im privatwirtschaftlichen Bereich bleibt der optimale Zugang für Behinderte weitgehend freiwillig.

Das Bewusstsein ist wichtig

Für unsere UX-Designer und Entwickler stellt sich die Frage, wo sie denn beginnen sollen. Bei komplexen Websites – digitec.ch gehört zweifellos dazu – ziehen oft auch kleine Änderungen eine ganze Reihe von Folgeaufgaben nach sich. Je länger man nichts für Behinderte optimiert, desto schwieriger wird es.

Doch letztlich müssen wir offen zugeben: Die schlechte Bedienbarkeit für Blinde beruht nicht in erster Linie auf fehlenden Ressourcen, sondern mehr darauf, dass das Problem gar nicht in den Köpfen verankert ist. Einige der Probleme, die Gianfranco für uns aufgedeckt hat, wären relativ einfach zu lösen, vermutet Remo.

Wir haben alle gemerkt: Nur schon die Tatsache, dass sich eine blinde Person überhaupt im selben Raum befindet, verändert unser Denken stark. Mehr als die Hälfte der Mitarbeiter von «Zugang für alle» ist selbst von einer Behinderung betroffen. Bei uns fehlt das komplett. Von den ungefähr 130 Personen in unserer Entwicklungs-Abteilung ist niemand sichtbar behindert. Übrigens befasst sich die überwiegende Mehrheit von ihnen nicht mit dem Front-End, sondern mit dem Back-End. Das ist der interne Teil des Systems, den du als Kunde gar nie zu sehen bekommst. Die Entwickler sind fast alles junge Männer, mit Adleraugen und den besten Monitoren ausgestattet. Eine kleine Schrift, hellgrau auf weissem Grund, nimmt niemand von ihnen aus eigener Erfahrung als Problem wahr. Wenn wir hier öfter unsere eigene Perspektive verlassen und uns in andere hineinversetzen, wäre der erste Schritt schon getan.

Avatar

David Lee, Zürich

  • Teamleader Thor
Durch Interesse an IT und Schreiben bin ich schon früh (2000) im Tech-Journalismus gelandet. Mich interessiert, wie man Technik benutzen kann, ohne selbst benutzt zu werden. Meine Freizeit ver(sch)wende ich am liebsten fürs Musikmachen, wo ich mässiges Talent mit übermässiger Begeisterung kompensiere.

21 Kommentare

3000 / 3000 Zeichen
Es gelten die Community-Bedingungen.

User Anonymous

Bravo Gaalacus. Bin selber sehbehindert. Stolpere ständig. Gratuliere zum kurzen Perspektivenwechsel! Hoffe, es wird was

21.01.2019
User Anonymous

Wann dürfen wir den Artikel zu den Änderungen und Konsequenzen aus dem Besuch lesen?

21.01.2019
User David Lee

Hallo! Das kann ich dir zum jetzigen Zeitpunkt leider nicht sagen. Selbsterkenntnis ist der erste Schritt zu Besserung, aber es ist klar, dass weitere Schritte folgen sollten. Unsere Entwicklungsabteilung wird sich auf jeden Fall mit dem Thema befassen und schauen, wie sie das am besten in ihre Pipeline einbringt und umsetzt.

24.01.2019
Antworten
User andreas_kocher

Mit Gianfranco hatte ich auch das Vergnügen :) Sehr spannend wie schnell der Mann navigiert. Für Swisspass.ch habe ich mitgeholfen die Zertifizierung zu erhalten. War wirklich schwierig das zu erreichen aber auch spannend. Gerade im Bereich Kontrast kann man mit einfachen Tools sehr viel herausholen. Empfehlen kann ich auch den Einsatz eines Skriptes, welches den Header-Baum visualisiert. So erkennt man rasch, ob man irgendwo mit den Stufen was verbockt hat. Das Fazit war auch bei uns war auch: weniger ist mehr. Statt halt eine fancy pancy Animation einzubauen, einfach besser weglassen. Statt noch ein cooles farbiges Hintergrunds-Div zu verwenden, einfach weglassen.

übrigens kann ich auch empfehlen, einen ScreenReader so auszustatten, dass er den gesprochenen Text wiederum als Schrift-Text anzeigt. Ist als sehender Entwickler deutlich angenehmer die Page so zu prüfen und zu korrigieren.

21.01.2019
User schrottbox83

hm.. wenn die Sites etwas weniger fancy und blinki werden, hat das ja auch für uns sehende was positives. :)

andere frage:
Wie ist das eigentlich mit so "werbeverseuchten" sites (nenne hier jetzt einfach mal als bsp. blick oder 20min). liest der screenreader dann auch noch den ganzen quatsch dazu vor? hilft man sich hier mit einem Adblocker? oder schnallt der reader dies und verzichtet wenigstens darauf?

21.01.2019
User andreas_kocher

Ich habe versucht dazu noch was rauszufinden. Tatsächlich sind Werbungen in vielen Fällen sehr hinderlich für Personen mit Screenreader. Gerade Werbung, welche dann auch noch automatisch Audio abspielt, übertönt den Screenreader und macht die Page eigentlich nutzlos. Ein Adblocker hilft dann genau so weiter.

Wie man das korrekt löst könnte ich aber nicht sagen. Es hängt vermutlich stark davon ab, wie genau die Werbungen eingebunden werden. Das einfachste wäre vermutlich, den Werbebereich entsprechend zu markieren, dass er für Screenreader ausgeblendet wird.

22.01.2019
User crodino

Ich denke ein Pi-Hole könnte für Sehbehinderte interessant sein.
Dieses ist auf einem Raspberry Pi innerhalb nützlicher Frist einzurichten. Es übernimmt in einem LAN den DNS und mittels Filter und Blacklist werden Anfragen an Werbesites zwar geschickt, die Antwort wird jedoch nicht an den User weitergeleitet, also "versandet" im Pi-Hole.
Recht nützlich für Sites, die nach aktiviertem Adblocker scannen. Die Site bekommt nichts mit, der User sieht (oder hört) die Werbung nicht.
Links:
pi-hole.net/ (offizielle Pi-Hole website)
en.wikipedia.org/wiki/Pi-ho... (englisches Wikipedia)

23.01.2019
User schrottbox83

@Andreas: Danke für deine Antworten.

@Crodino: Pi-Hole ist definitv ein cooles Teil. Gibts übrigens auch als Dockerimage und kann so auf der Synology ohne zusätzliche Hardware betrieben werden (über RaspPi ist aber definitv einfacher).
Die Funktion ist aber, glaube ich zumindest, genau anders rum. So wie du es beschreibst, funktionieren (soweit ich weis) die AdBlock-Addons in Browsern. Die Blocken erst die zurückkommende Antwort.
Der Pi-Hole blockt aber bereits die ausgehende Anfrage und schickt sie somit gar nicht erst raus. Bin der Meinung, dies ist ja das coole Feature von Pi-Hole, da so der Traffic gar nicht erst anfällt.. und dies Netzwerkweit. Egal welche Cleint (Mobile/Konsole/PC/TV/..)!
Somit kann auch die Gegenstelle (Facebook-/Googlewerbetracker) gar kein Datenprofil von dir generieren, da sie nie irgendwas von dir gehört haben. :)

..man möge mich korrigieren und erleuchten, falls ich falsch liege.

23.01.2019
User crodino

@Schrottbox83
Du hast selbstverständlich recht, ich hatte das falsch im Kopf.

25.01.2019
Antworten
User Janser0

Supper Beitrag.
Sehr viele Lehrreiche Informationen :).
Hat mich auf jedenfall Aufgeklärt wie das Blinde im Internet unterwegs sind.
Danke

21.01.2019
User andreas_kocher

Für die es interessiert. Die SBB befasst sich stark mit dem Thema und hat einen Guide veröffentlicht. Ist alles noch in Beta, also noch nicht zu stark werten ;) Vielleicht helfen die Tipps ja mal jemanden aus

digital.sbb.ch/de/barrieref...

22.01.2019
User sa

Ja, es ist erstaundlich, wie schnell blinde Menschen mit dem Computer umgehen können und es ist extrem faszinierend. Aber dabei bleibt es leider meistens. Ich hoffe aber, dass Digitec das Gegenteil beweisen wird und sich für die Accessibility einsetzt sowie das Thema wirklich mal an den Wurzeln packt.

21.01.2019
User MakeAppsNotWar

Wäre es nicht eine Idee einen speziellen Webseiten Teil zu machen? Also so wie bei Englisch/Deutsch, dass sich der Inhalt der Seite verändert? So das man beide Seiten optimal optimieren könnte.

21.01.2019
User andreas_kocher

Das wäre extrem teuer wenn du das machst. Das Ziel muss schon sein, dass du eine Seite hast für alle, die entsprechend optimiert ist. Mit speziellen Anweisungen kannst du explizit für den Screenreader Informationen geben, die der sehende nicht zu Gesicht bekommt. Als Entwickler muss man dann schon fast "doppelt denken". Also deine Idee ist per se nicht falsch und man kann sie auch mehr oder weniger so umsetzen. Aber es soll möglichst automatisch vom Screenreader korrekt gelesen werden.

21.01.2019
Antworten
User Anonymous

Das Problem fängt meines Erachtens schon eine Stufe vorher an:
"Früher" war es eigentlich guter Usus, dass man sich für einen HTML Doctype entscheidet, gemäss diesem die Seite aufbaut und dann einen Validator (z.B. dem vom W3C) drüber laufen lässt.
Bei digitec sehe ich keine Doctype-Auszeichnung im Quellcode, aber beim validieren 20 mal die Fehlermeldung, dass das alt-Attribut bei Bildern fehlt. Und dieser Text zeigt, warum er so wichtig (und deswegen ein Pflichtattribut) ist.

Allerdings ist Hopfen und Malz nicht verloren, so hat beispielsweise die Artikelüberschrift tatsächlich h1 als Element, so wie man es erwarten würde.

21.01.2019
User terabyte

Das war nicht nur früher so, sondern wird auch heute noch aktiv so beigebracht an den Schulen und Unis. Allerdings wird heutzutage viel Code automatisch generiert wird und es ist daher nicht immer ganz einfach alle Validierungen zu bestehen, respektive mit viel Aufwand verbunden.

Bezüglich des alt-Attributs finde ich es schon ein wenig peinlich von digitec, dass dieses gerade bei einem Artikel über Accessability nirgends vorhanden ist.

21.01.2019
User feerglas

Veto: das alt-Attribut auf Bilder ist nur dann Pflicht (aus Accessibility-Sicht), wenn das Bild inhaltliche Relevanz hat. Bei Bildern, welche nur "Verzierungs-Charakter" haben, ist das alt-Attribut sogar störend und sollte für Screenreader ohne hin einfach versteckt werden.

22.01.2019
Antworten
User itsupport01

Bonjour, travaillant directement dans le domaine de la déficience visuelle, nous sommes confrontés chaque jour à ces problèmes d'accessibilité à internet, mais aussi aux applications, soit en entreprise, soit à l'école, soit à la maison. Si dans l'ensemble l'accessibilité c'est améliorée ces 10 dernières années, malheureusement les postes de travail pour personnes déficientes visuelles sont de plus en plus difficile à trouver. Si certaines entreprises font des efforts pour offrir une place adaptée, de grande entreprises, qui pourraient créer des postes particuliers, ne le font pas. D'autre part le passage à un environnement de plus en plus virtualisé pose de nombreux problèmes aux moyens auxiliaires nécessaire à l'accès à ces systèmes.
Enfin, la politique de mise à jour constante de Windows nous contraint à vérifier à chaque version que les moyens auxiliaires utilisés fonctionnent encore.
Si il existe de plus en plus de solutions gratuites, elles ne sont pas toujours adaptées aux besoins.
Enfin, le monde Mac qui avait beaucoup d'avance il y a encore 4 à 5 ans, ce fait rattraper par Microsoft pour les solutions natives.
Ces prochaines années verront certainement encore des bouleversements qui nous espérons facilitera encore l'accès.

23.01.2019
User aarr6398

If you searching file explorer windows 10 updated version then fileexplorerwindows.com you must follow this link and and check this updated version of file explorer windows.

24.01.2019
User ElenaSchmolke

Durfte letztes Jahr auch einen Kurs von Access for all besuchen und es hat mir sprichwörtlich «die Augen geöffnet». Gianfranco hat uns da ebenfalls demonstriert, wie er über grössere Schweizer Webportale navigiert. Eine der schlimmsten war hier übrigens watson.ch. Das hat bei mir als UX-Designerin einige Spuren hinterlassen.
Schön, dass dieses Thema mehr Aufmerksamkeit bekommt!

28.01.2019
User janwidmer

Für (frontend) Entwickler ist der Accessibiouty developer guide eine gute erste Anlaufstelle: accessibility-developer-gui...

Dieser wird ebenfalls von der Stiftung betrieben.

28.01.2019