Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
(Das Video hat einen Untertitel, aber du findest das ganze Transkript auch auf YouTube selbst)
Komprimiertes Transkript des Videos:
Was ist Barrierefreiheit?
Viele können sich gar nicht vorstellen, wie eine barrierefreie Webseite eigentlich sein soll. Offene Fragen sind: Was muss meine Webseite jetzt können und warum ist meine Webseite nicht barrierefrei? Um euch mal ein bisschen aufzuklären, zeige ich in diesem Video, was es denn bedeutet, barrierefrei zu sein.
Ich habe mir hier die Webseite von Eurowings herausgesucht, weil die eigentlich mal sehr barrierefrei war. Interessanterweise habe ich gemerkt, als ich für dieses Video an der Seite ein bisschen herumgespielt habe, dass einige Punkte nicht mehr ganz barrierefrei sind.
Das ist deswegen sehr interessant, weil wir auch oft darüber reden, dass das Problem nicht ist, barrierefrei zu werden, sondern es zu bleiben. Vielleicht hat das Entwicklerteam gewechselt, der Verantwortliche für Barrierefreiheit ist gegangen oder vielleicht wurde eine Agentur beauftragt, die jetzt nichts mehr damit zu tun hat.
Auf jeden Fall gibt es ein paar Stellen, bei denen ihr hier sehen werdet, dass es mit der Barrierefreiheit nicht mehr ganz so gegeben ist.
Ich werde dazu den Screenreader anschalten. Ihr seht unten links in der Ecke, was der Screenreader vorliest, und ihr seht dann auch den Fokus meiner Tab-Navigation.
Kommentare zum Header und zur Navigation
Es geht los, und das ist schon mal super: Wenn ich anfange, durch die Seite mit dem Tabulator zu gehen, sieht man hier, dass es versteckte Links gibt, die mich auf dieser Webseite leiten. Es gibt einen, der mich direkt zum Seiteninhalt bringt. So habe ich mit dem Screenreader die Möglichkeit, dass ich mich nicht immer durch diese ganze Navigation tabben muss, sondern ich kann hier ENTER drücken.
Normalerweise kann ich hier Enter drücken und das springt zum Seiteninhalt. Was gerade nicht passiert! Es funktioniert aber bei allen anderen Links. Es gibt hier, wie gesagt, ein paar Probleme, die eventuell übersehen wurden, wo vielleicht bei der Weiterentwicklung der Webseite nicht mehr so darauf geachtet wurde.
Trotzdem sollte es hier direkt im Header diese Links geben, damit ich mit dem Screenreader navigieren kann. Dann gehe ich einfach mal weiter.
Ich kann mich gut durch die Navigation tabben. Wie man hier sieht, ist die Navigation auch eine Liste mit Listenelementen. Die Liste hat fünf Objekte. Und für die Menüpunkte selbst wird mir angezeigt, dass es Einblendmenüs sind, die gerade geschlossen sind. Reduziert heißt in dem Fall, dass sie gerade geschlossen sind. Das sind alles sehr nützliche Informationen, die jetzt an meinen Screenreader weitergegeben werden. Der kann sie mir vorlesen, weil es eben die richtige HTML-Struktur hat!
Was auch ganz interessant ist, dass sie hier zwei Navigationen haben, und sie wurden ganz richtig mit ARIA-Labels benannt. Das eine ist die Hauptnavigation und das andere eine “weiterführende Navigation”. Wenn sich mehrere Navigationen auf einer Webseite befinden, muss man ihnen verschiedene Labels geben, damit ein Screenreader-Benutzer sie auseinanderhalten kann und weiß, wofür welche Navigation verantwortlich ist.
Was hier allerdings merkwürdig ist: Die weiterführende Navigation hat noch ein verstecktes H2 darüber, das auch “weiterführende Navigation” sagt. Das sagt eigentlich schon das ARIA-Label. Das bedeutet, das ist eigentlich redundant, dass hier noch mein H2 eingefügt wurde.
Das haben sie vielleicht am Anfang gemacht, weil sie es nicht wussten oder im Nachhinein, weil sie es vergessen haben, dass sie da ein ARIA-Label hinzugefügt haben. Ich weiß es nicht, aber das sind Kleinigkeiten, die mir aufgefallen sind, während ich da so durchgegangen bin.
Auf jeden Fall gehen wir mal über die Navigation darüber und landen jetzt mal beim Hauptinhalt. Man sieht, der Screenreader liest “main” vor. Eine Webseite muss drei verschiedene Dinge haben: Header, Main und Footer. Das sind sogenannte ARIA-Landmarks. Diese Landmarks helfen mir, besser zu navigieren. Main ist für den Hauptinhalt. Header und Footer sollten selbsterklärend sein.
Kommentare zum Slider
Was jetzt nicht so schön ist in diesem Hauptbereich, ist dieser Slider am Anfang. Slider sind immer schwierig mit Screenreadern zu bedienen. Man sieht jetzt zum Beispiel, der Fokus ist auf einem Element des Sliders, das gar nicht im sichtbaren Bereich ist.
Es ist immer schwierig, mit Slidern und Barrierefreiheit umzugehen, deshalb raten wir generell davon ab, Slider zu benutzen.
Was sie hier aber gemacht haben, was immerhin gut ist, sie haben die Möglichkeit eingebaut, den Slider zu stoppen. Das haben auch sehr wenige Seiten, obwohl das sehr nützlich ist. Ich kann diesen Slider und die Animation stoppen. Wenn ich also zum Beispiel längere Zeit zum Lesen brauche, bleibt das Ding dann nicht immer nach links gehen, wenn ich gerade lesen will! Super geregelt!
Kommentare zum Formular
Weiter zum Formular. Hier sieht man, ich kann dieses Formular bedienen. Es werden mir die einzelnen Bereiche vorgelesen: Flüge, Flug & Hotel und nur Hotel.
Ups… jetzt, wenn ich bei Hotel auf ENTER drücke, werde ich auf eine andere Seite geleitet. Das ist ein Problem! Wenn ein Link mich auf eine neue Seite leitet, muss mir der Link das sagen. Sonst weiß ich als Screenreader-Nutzer*in nicht, dass das passiert.
Generell habe ich hier bei diesem Formular das Problem, dass ich gar nicht so richtig weiß, was ist das jetzt? Mir fehlt so ein bisschen der Kontext.
Ihr müsst euch wirklich in eine blinde Person hineinversetzen, während ihr die Webseite bedient. Jetzt lest ihr auf einmal “Flüge”. Aber was genau bedeutet das? Kann ich jetzt hier Flüge buchen oder kann ich mir Flüge anschauen?
Da fehlt so ein bisschen die Beschreibung bzw. die Überschrift zu den Formularen, um Kontext zu haben.
Wenn ich jetzt in dieses Formular hineinspringe, dann kann ich hier mal schauen, ob ich es mit ENTER bedienen kann. Ich kann es mit ENTER bedienen, aber wie man hier sieht, schaffe ich es mit den Pfeiltasten nicht, einen Flug auszuwählen. Ah, hier bekomme ich eine Anleitung: “Sie können Vorschläge mit Shift und den Pfeiltasten hoch und runter ansteuern”.
Okay, also wenn ich Command + Pfeiltaste hoch oder runter drücke, dann kann ich die verschiedenen Flughäfen ansteuern. Tatsächlich wird mir aber nichts vorgelesen.
Das bedeutet, ich kann es zwar ansteuern und auswählen, aber mir wird nicht vorgelesen, was ich ausgewählt habe. Das ist ein Problem, weil blinde Nutzende so nie erfahren, was sie gerade auswählen.
Nachtrag: Ich habe es bei einem weiteren Versuch doch geschafft, mich zu navigieren und dass mir dabei der Flughafen vorgelesen wurde. Ich schaffe es allerdings nicht immer. Vielleicht liegt der Fehler hier aber auch bei mir. Ich möchte keine falschen Anschuldigungen machen!
“Alles” muss eine Liste sein!
Wenn wir weitergehen, sehen wir, dass jetzt eine Aufzählung von Services als einzelne Karten kommt. Diese Karten müssten eigentlich in einer Liste sein. Und wenn sie anklickbar sein sollen, sollte es nur einen Link geben. Hier hat sowohl das Bild als auch der Link jeweils einen eigenen Link, der zur gleichen Seite führt.
Eigentlich müsste die gesamte Karte den Fokus haben, damit ich sie komplett mit ENTER anklicken kann und mir gleichzeitig die Möglichkeit gegeben wird, Bild und Text einzeln zu lesen. Hier gibt es auch ein paar CSS-Tricks, wie man das ganz leicht hinbekommt.
Kommentare zur HTML-Struktur
Wenn wir jetzt ein bisschen weitergehen zu den empfohlenen Reisezielen, sehen wir hier eine H2, das ist gut gemacht. Dann kommt jedoch eine H4. Das sollte eigentlich eine H3 sein. Es ist jetzt nicht so dramatisch, aber generell sollten Überschriften-Strukturen eingehalten werden.
Ich kann mir gut vorstellen, warum das hier passiert ist. Aber das sind kleinere Probleme. Das größere Problem ist, dass mir hier wieder eine komplette Liste angezeigt werden müsste. Und hier sollte der Fokus um diese ganze Karte gesetzt werden.
Wahrscheinlich haben Sie das nicht gemacht, weil Sie dann unten diese weitere Städtereise nicht gewusst haben, wie Sie das ansteuern können oder wie Sie das trotzdem in einer Karte haben können und diese unabhängig voneinander anklickbar machen können.
Das ist an sich recht einfach und es gibt gute Möglichkeiten, das heutzutage umzusetzen. Generell ist es einfach nicht ganz konsequent durchdacht, wenn jemand mit einem Screenreader diese Seite durchgeht.
Ich schalte mal ein Tool ein, um die Seite noch besser zu gliedern, wie ich euch gerade schon erzählt habe. Hier sieht man ganz gut, was eine H2 ist, was eine H1 ist und was ein Absatz ist. Von daher ist die Seite sehr gut strukturiert.
200 % Zoom-Test
Ich werde mal hereinzoomen. Webseiten müssen auch bei 200 % Zoom funktionieren, insbesondere der Text. Alles andere sollte idealerweise auch bei 400 % Zoom funktionieren, ohne dass etwas zerbricht oder unlesbar wird.
Man sieht, dass ich die gesamte Webseite nutzen und durchscrollen kann. Alles ist lesbar, es gibt keine Überlappungen. Das ist sehr gut gemacht, da gibt es nichts zu beanstanden.
Kommentare zum Kontrast.
Der Kontrast ist in allen Fällen auch super: Schwarz auf Weiß und Lila auf Weiß. Man könnte jetzt noch testen, ob das Weiß auf diesem Hintergrund wirklich so gut funktioniert. Aber das sind Kleinigkeiten.
Kommentar zum Mega-Menu
Ich versuche jetzt mal das Mega-Menü mit meinem Screenreader zu lesen. Es gibt 6 Objekte, das ist schon mal gut. Hier ist es ein bisschen unpraktisch, dass er mir als allererstes wieder den Schließen-Button anvisiert. Ich möchte vielleicht gar nicht zuerst den Schließen-Button haben, sondern wissen, was im Menü drin ist. Deswegen wäre es vielleicht besser, den Schließen-Button ans Ende des Menüs zu setzen.
Worte zum Abschluss
Ich hoffe, jetzt habt ihr eine Vorstellung davon, worauf man alles achten muss und wo es möglicherweise Probleme geben kann, nur auf der Startseite. Dies war nur ein Überblick über einige der kleinen und größeren Probleme, wie wir am Beispiel des Formulars gesehen haben, die auftreten können, wenn man eine Webseite barrierefrei gestalten möchte.
Natürlich gibt es noch viel mehr zu beachten. Dies war nur ein kleiner Einblick in das Thema. Es war interessant zu sehen, dass Barrierefreiheit langfristig im Fokus bleiben muss, da Webseiten schnell wieder an Barrierefreiheit verlieren können.
Falls ihr noch Fragen habt oder etwas unklar ist, stehe ich gerne zur Verfügung. Vielen Dank fürs Zuhören und bis bald!
