Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Volltext-Alternative für das Video
[00:00:00] Tobias Roppelt: Hi, ich Tobias von der Gehirngerecht Digital GmbH und heute zeige ich euch zusammen mit der lieben Nina Schweppe, wie denn ein wirklicher User, der darauf angewiesen ist, einen Screenreader zu benutzen, eine Webseite durchgeht und was man beachten muss, damit diese Webseite auch für einen Screenreader benutzbar beziehungsweise steuerbar ist.
Und wir werden das so ein bisschen machen, dass wir die Nina, geht durch, tippt immer durch so ein paar Sachen, benutzt praktisch ihren Screenreader, und ich sage dann zwischendrin mal Stopp und erklär dann ein bisschen dazu, was an der Stelle oder an der Stelle eben auf dieser Webseite nicht ganz so gut funktioniert, wie es funktionieren sollte oder könnte und was man auch verbessern kann.
Wir haben uns die Webseiten, wir gehen zwei Webseiten insgesamt durch, die haben wir uns wirklich willkürlich ausgesucht, wir wollen da niemanden beleidigen, oder sonstiges, sondern es ist einfach. In unsere Recherche sind da zwei Webseiten aufgetaucht, die wir einfach uns herausgepickt haben, um zu sagen, da zeigen wir das mal, weil wir ein paar Sachen gefunden haben, die auch relativ dramatisch sind, wie wir gleich sehen bei dieser Webseite, die wir sehen.
Wie, dass das Navigations-Menü zum Beispiel gar nicht erreichbar ist mit dem Screenreader. Aber da gehen wir gleich darauf ein.
Liebe Nina, willst du ein zwei Worte zu dir sagen, und dann starten wir los?
[00:01:27] Nina Schweppe: Ja, ich kann ein, zwei Worte zu mir sagen: Ich bin als Computer-Nutzerin , ist meine Eigenschaft, dass ich blind bin seit Geburt. Das heißt, ich bin auf Hilfsmittel-Technologien angewiesen. Ich nutze sowohl die Sprachausgabe als auch die Barille-Zeile.
In meinem beruflichen Leben, außerhalb meiner Blindheit, bin ich Chrono-Biologischer-Coach. Ich unterstütze Menschen, die Schlafprobleme haben.
Und eigentlich sind wir ja, so Tobias und ich, zusammengekommen deshalb, weil ich auch didaktische Beratungen mache für, hauptsächlich Anbieter von Medizinprodukten und digitalen Medizin-Angeboten, im Handling durch blinde und sehbehinderte Menschen. Da geht es einmal um die Bedienung, aber auch um so was wie barrierefreie Sprache und es geht eben auch um Geräteeigenschaften und so was, die gegeben sein müssen, damit Blinde und sehbehinderte Menschen nicht ausgeschlossen sind.
Und darum ja, bewegen wir uns heute hier in diesem Randgebiet meiner eigentlichen Tätigkeit, aber, also was ich spannend finde, wir machen ja heute sozusagen Audiodeskription einmal andersherum. Das, was man vom zweiten Fernsehton-Kanal her kennt: Blinde kriegen einen Film beschrieben. Heute machen wir es mal andersherum. Heute kriegt ihr, die ihr vermutlich das Video guckt und sehen könnt, kriegt ihr beschrieben, was ich nicht sehe und das find ich auch mal ne ganz spannende Perspektive.
[00:03:02] Tobias Roppelt: Absolut, wir haben es ja schon in einem Live-Workshop, das Ganze schon mal getestet, bevor wir auf die Idee gekommen sind, dieses Video hier aufzunehmen, und es hat eben einen wahnsinnig starken Eindruck hinterlassen bei den Leuten, die da in diesem diesem Workshop mit drin waren, deswegen fanden wir es einfach super wichtig, da auch mal das weiter zu verbreiten, indem wir da Videos darüber kreieren, wie so was aussehen kann. Und wie das wirklich, mit echten Usern etwas zu testen und zu machen, ist immer noch eine ganz andere Sache, als es sich einfach in seinem stillen Kämmerchen zu überlegen. Da glauben wir, dass das euch sehr viel Mehrwert liefern wird, wenn ihr euch damit auseinandersetzt, Webseiten oder Apps auch barrierefrei zu machen.
Dann lass uns doch loslegen, Nina.
[00:03:51] Nina Schweppe: Ja genau, also wir haben ja schon das erste Beispiel aufgerufen hier. Die Seite von “Discovering Hands”. Und vielleicht muss man an dieser Stelle wirklich sagen um die Brisanz dieser Seite auch zu verstehen. Da geht es um eine Ausbildung für blinde Menschen und dementsprechend muss man eigentlich auch davon ausgehen, dass diese Seite nicht nur von Patienten genutzt wird, sondern auch von den blinden Menschen, die vielleicht auch diese Ausbildung absolvieren möchten. Und unter diesem Gesichtspunkt schauen wir uns das an.
[00:04:28] Tobias Roppelt: Genau.
[00:04:29] Screenreader: (Nina starte den Screenreader und geht mit dem Tab durch den oberen Teil der Webseite) Link für Blinde und Sehbehinderte. Überschriftebene eins. Link: “Jetzt Praxis finden und Termin buchen.” Link: “Geben sie dem Brustkrebs kein e ch anke.”.
[00:04:40] Nina Schweppe: Man hört hier ja schon, dass die also bestimmt ist ja für Sehende schon schwierig überhaupt die Sprachausgabe zu verstehen, aber auch hier für mich sind diverse schon Sprachfehler drin, wenn ich hier schon durchwandere.
[00:04:55] Tobias Roppelt: Also ich werde es kurz kommentieren, auch dazu. Wie Ihr seht, erst mal ganz oben links seht ihr immer, was der Screenreader auch gerade vorliest. Das ist ganz gut, weil ihr da auch einen Einblick kriegt, was denn da eigentlich wirklich.
[00:05:10] Nina Schweppe: Was die Barielle-Zeile zeigt.
[00:05:12] Tobias Roppelt: Genau und zeigt es, was da gerade vorgelesen wird, und das ist ganz spannend, weil hier man sieht, sie haben sich Gedanken gemacht. Sie haben in diesem Text, den ihr da seht, den großen Text: “Geben Sie dem Brustkrebs keine Chance”. Haben die extra so Blindenzeichen eingefügt, für die unterschiedlichen Buchstaben, um es halt ein bisschen zu verdeutlichen, dass sie für blinde Menschen da sind. Aber leider, sieht man oben in der Zeile, dass genau diese Buchstaben in Großbuchstaben geschrieben werden.
Was das Problem macht, dass eben der Screenreader die ganze Sache nicht so vorliest, wie er sie vorlesen sollte. Also dieser ganze Satz, ihr habt ja auch gerade gehört, ist leider die Idee der ist ganz nett, aber die Umsetzung mit mit dem Screenreader ist nicht so vorteilhaft gelaufen, weil das sehr abgehackt klingt und man nicht das hört, was man eigentlich hören sollte.
[00:06:06] Nina Schweppe: Und tatsächlich ist die Darstellung auf der Braille-Zeile auch so, dass ich die ganze Zeile sehe, mit einem Font-Hinweis, der möglicherweise auf Fettdruck oder auf Unterstrichen oder darauf hinweist. Das bedeutet, dass ich jetzt hier im ersten Augenblick auch gar nicht sehen kann, was du gerade beschrieben hast, dass diese Buchstaben großgeschrieben sind und dass daher diese Lesefehler kommen. Das heißt, im Grunde haben wir hier zwei Barrieren, sowohl in der Barille, als auch in der Sprachdarstellung, weil jemand einfach nur diese Seite optisch schön hat machen wollen und benachteiligt dabei eigentlich die blinden und sehbehinderten Nutzer, also gerade die blinden Nutzer vor allen Dingen.
[00:06:48] Tobias Roppelt: Ja spannend, aber ja ist super interessant. Ne, was du sagst, da kommen wir ja auch noch ein paar Mal drauf zu sprechen heute wahrscheinlich auf das, was man optisch schön machen will. Was der Designer machen möchte und wie der Entwickler es dann umsetzt und wie da die Kommunikation eigentlich auch stattfinden soll, muss damit genau so was nicht passiert. Das zwar nette, gestalterische Ideen, dann aber auch so umgesetzt werden, dass sie barrierearm oder am besten, barrierefrei sind.
[00:07:18] Screenreader: (Nina starte den Screenreader und geht mit dem Tab weiter) “Überschrift ebene sechs”
[00:07:19] Tobias Roppelt: Einen Moment, ganz kurz. Wir bleiben noch kurz dabei, weil wenn du zurückgehst, dieser große Text ist ja ein Link und der Text davor ist die H1. Und zwar ist hier…
[00:07:32] Screenreader: (Nina starte den Screenreader und geht mit dem Tab weiter) “Überschriftebene 1, Link:” Jetzt Praxis finden und Termin.”
[00:07:36] Nina Schweppe: Die meinst du ne: “Jetzt Praxis finden”, wo der Link auf die H 1 gesetzt ist?
[00:07:40] Tobias Roppelt: Genau das ist, wenn man es optisch sieht, auf der Seite eigentlich schon mal, jetzt nicht nur optisch, aber das ist das Erste, was jetzt wahrscheinlich, die Leute sehen werden, die jetzt hier zugucken. Dass man:” Jetzt Praxis und einen Termin buchen”, ist die H1 und eine H1 einer Webseite sollte eigentlich die Hauptüberschrift sein, die beschreibt, was auf dieser Webseite zu sehen ist oder um was es hier geht.
Und hier geht’s eher darum, “Geben sie dem Brustkrebs keine Chance”. Ist eigentlich die Hauptaussage dieser Seite, und sie ist ja auch optisch so dargestellt. Und da ist auch tatsächlich ein WCAG-Kriterium, dass was optisch eine Überschrift, wie eine Überschrift aussieht, auch eine Überschrift sein sollte. Und das “Jetzt Praxis finden und Termin buchen”, ist eigentlich ein Call-to-Action Link, der dann woanders hinführen sollte.
Deswegen ist da die Strukturierung der Überschriften oder der Überschriften und Links in dem Fall etwas falsch gewählt, und das werden wir auch jetzt weiter auf der Seite dann sehen, dass wer keine Ahnung von HTML-Struktur hat, wie gerade angesprochen, es gibt eine Überschfitebene 1, es gibt aber auch eine Überschriftebene 2,3,4,5 und 6 und wenn ihr mit Überschriften-Ebenen arbeitet, ihr könnt euch das bisschen wie so ein Buch vorstellen: Die H1 ist der Titel, die H2 sind die Kapitel, die H3 sind die Unterkapitel. Es muss halt immer eine logische Struktur geben.
Wir werden es später auch noch mal sehen da wird die Nina mit ihrem Screenreader nur durch die Überschriften springen und dann sieht man eben, was es für Probleme geben kann, wenn die Überschriften nicht logisch aufeinanderfolgen.
[Ganz kurz, bevor wir jetzt hier den ersten, den oberen Teil der Webseite verlassen, weil wir weiter heruntergehen. Nina, kannst du mal versuchen, in das Navigationsmenü mit deinem Screenreader reinzukommen.
[00:09:30] Screenreader: (Nina starte den Screenreader und geht mit dem Tab weiter) “Brustkrebs früh…”. “Brustkrebs”. “Besuchter Link”. “Besuchter Link: Geben Sie dem Brustkrebs… “.”Überschriftebene 6 Link info besuchter.”
[00:09:37] Nina Schweppe: Wie wir sehen…
[00:09:38] Screenreader: “Überschrift”
[00:09:40] Tobias Roppelt: Also, wir sehen, das hier ganz, ganz schön.
[00:09:43] Screenreader: “Brustkrebs”
[00:09:44] Tobias Roppelt: Mit dem Screenreader, dass es keine Möglichkeit gibt, auf diese Navigation zu kommen. Ich weiß tatsächlich nicht ganz, wie sie das geschafft haben. Das habe ich sonst auf auf keiner Seite gesehen, dass es wirklich nicht, nicht möglich ist, in die Navigation überhaupt reinzukommen. Aber normalerweise, wenn man oben auf eine Webseite kommt, sollte man ja erst mal die Möglichkeit haben, die Navigation durchzugehen, weil das ja teilweise auch das Allerwichtigste an dieser Seite ist, um sich zurechtzufinden und zu schauen, was gibt es hier überhaupt, was könnte mich interessieren.
Und da müsste, da sehen wir später auf der anderen Seite, wie das eigentlich sein sollte. Das sollte eigentlich eine Liste sein, mit verschiedenen Elementen, die da ausgewählt werden kann und so weiter.
Was hier einfach wirklich gar nicht möglich ist. Also, Nina hätte keine Chance sich überhaupt zu informieren, oben um was es hier, was man hier alles machen kann auf der Seite und wenn sie Glück hat, findet sie irgendwo im weiteren Verlauf der Startseite Links auf die Unterseiten. Aber ansonsten hätte sie eigentlich keine Möglichkeit, auf eine Unterseite zu kommen. Und dann spannenderweise, vielleicht hat sie ja auch gar keine Möglichkeit wieder zurückzukommen. Das haben wir noch gar nicht getestet, das kann sie auch mal austesten.
[00:10:56] Nina Schweppe: Können wir gleich mal probieren, genau.
[00:10:59] Tobias Roppelt: Okay, dann kannst du gerne mal weitermachen.
[00:11:01] Nina Schweppe: Einfach Cursor wandern?
[00:11:02] Tobias Roppelt: Genau.
[00:11:04] Screenreader: (Nina starte den Screenreader und geht mit dem Tab weiter) “Überschriftebene 6: Link. Infos zur Untersuchung, besuchter….”, “Überschriftebene 6: Link. Ausbildung für Sehbehinderte.”, “Überschriftebene 6. Link. Betriebliche Gesundheitsförderung.”, “Überschriftebene 3: Unser Beitrag zu einer verbesserten Brustkrebs-Früherkennung.”
[00:11:20] Nina Schweppe: Ja, sieht man na wie krauss die Überschriften sind, ne. Dass wir von der Ebene sechs völlig grundlos auf eine Ebene drei springen, ne.
[00:11:29] Tobias Roppelt: Allgemein, dazu kann ich wieder fünf Punkte sagen. Wir haben jetzt hier, ganz spannend zu sehen, was man nicht sieht. Sagen wir so. Wir, unter der Hauptüberschrift, ist erst mal da liegt jetzt ein Bild im Hintergrund. Dieses Bild siehst du gar nicht Nina, als aber die Frage, ob man da jetzt sagen kann okay, dieses Bild im Hintergrund ist wirklich nur ein dekoratives Bild und es muss jetzt nicht unbedingt gesehen oder vorgelesen werden. Das ist ein anderes Thema ,auf das man mal eingehen kann. Aber, darunter kommen eben drei verschiedene Links zu verschiedenen Leistungen, die sie anbieten. Zum Beispiel: Ausbildung für Sehbehinderte oder betriebliche Gesundheitsförderung.
[00:12:18] Tobias Roppelt: Und da … für mich, ist es klar, weil ich sehe diese Leistungen und kann mir etwas drunter vorstellen. Aber selbst für mich in dem Kontext, wie es gerade dasteht, wäre es hilfreich, wenn es eine Überschrift darüber geben würde, die mir sagen würde “Unsere Services” oder “Unsere Leistungen”. Das ist eine generelle Usability-Sache, die hier sehr hilfreich wäre,um mir den Kontext [zu geben].
Dann, wenn wir auf den Screenreader eingehen, wie die Nina gerade vorgelesen hat lassen, steht hier, h6, h6, h6. Das sind keine H-6en, das sind Links, die auf unterschiedliche Seiten verweisen. Und, hier wär es auch interessant, wenn man mehrere Links in einer Reihe hat beziehungsweise mehrere Elemente, die gleich sind, so wie auch Cards auf einer Webseite, da kommen wir gleich dazu, die sollten am besten in eine Liste gepackt werden, damit jemand, der den Screenreader nutzt, sich drauf einstellen kann, was er jetzt sieht. Also, wenn wir jetzt diese Tipps nehmen und sagen würden, das steht darüber “Unseres Services” und dann wird dem Screenreader angezeigt: “Liste mit drei Objekten”. Dann kann sich die Nina darauf einstellen: “Ah, Ich sehe jetzt gleich drei Services, die mir auf irgendeine Art und Weise beschrieben werden”. Auch, wenn sie in dem Fall nur Links sind. Aber, es gibt einfach den Kontext, den ich sehe, weil ich sehe, es sind drei Links, hat Nina nicht. Deswegen können wir ihr zumindest eine Art Kontext geben, indem wir sagen: “Es sind drei Objekte, die jetzt gleich auf dich zukommen”. Weil, es könnte ja im Prinzip auch 50 sein. Und wenn sie sich jetzt da immer durchklicken würde ohne Kontext und auf einmal 50 Services vorgelesen bekommt, weiß sie nicht, wann das Ende ist, und sie weiß auch gar nicht teilweise, wo sie sich gerade befindet, weil wir ihr den Kontext nicht gegeben haben.
[00:14:18] Screenreader: (Nina starte den Screenreader und geht mit dem Tab weiter durch die Services) “Link: Methodik Taktilographier. Leer. Überschriftenbene 2 Taktiolographier. Discovering Hands nutzt den überlegenen Tastsinn sehbehinderter Frauen und bildet diese zur professionellen medizinisch taktil aus. Detail. Leer. Weitere Information.
[00:14:40] Nina Schweppe: Da willst du was zu diesen Leerzeilen sagen, denk ich, ne. Bei denen ich immer so bewusst angehalten hab
[00:14:46] Tobias Roppelt: Ja, da gibt’s jetzt eben auch, wie gerade angesprochen. Wo wir uns jetzt befinden, ist eine Darstellung von zwei Karten-Elementen, nennt man die UI. Das sind meistens Dinger, die ein Bild haben, ne Überschrift, ne Unterschrift, äh nen beschreibenden Text und ein Link. Und das ist, wird eben im Großen und Ganzen meistens als Karte bezeichnet und hier wie gerade gesagt, wäre es super hilfreich, wenn diese einzelnen zwei Karten die gezeigt werden, erst mal ein Listenelement pro Karte sind, damit man sich orientieren kann: es kommen jetzt zwei Objekte. Und dann gibt’s, wahnsinnig viel Kleinigkeiten hier zu sagen. Zum Beispiel, bei so einer Karte, wenn man sie anwählt, wär es super wenn’s nicht so wär, dass man dreimal den gleichen Link hat. Einmal ist das Bild verlinkt, einmal ist die H2 verlinkt und einmal ist der Link verlinkt.
[00:15:39] Nina Schweppe: So entsteht das. Ich wunder mich immer, warum so oft Links dreimal und viermal vorkommt. Denk ich mir, ist es für die Mausklicker einfacher. Aber dann liegt es daran. Das es falsch beschriftet ist, quasi.
[00:15:51] Tobias Roppelt: Das liegt nicht daran, dass das falsch beschriftet ist. Das liegt daran, dass die Leute HTML falsch nutzen, in dem Sinn, weil natürlich, also man… es gibt eben Möglichkeiten zu sagen: eigentlich, ist nur die H2 Taktilografie, in dem Sinn ein Link, aber, man kann es so einstellen, dass der ganze Container klickbar und fokussierbar ist. Es bedeutet, dass man, obwohl man nur eine Linke drin hat, dieser Link eine ganze Fläche von dieser Karte ausfüllt und man diese ganze Karte klicken kann.
Das ist natürlich einfacher für jemand mit der Maus, dass er jetzt nicht auf die Überschrift klicken muss, sondern dass er diese ganze Karte objektiv anklicken kann und dann auf dem Link landet. Aber trotzdem kann man es so einstellen, dass obwohl die ganze Karte klickbar ist, dass man mit nem Screenreader immer noch das Bild lesen kann, immer noch die H2 lesen kann, immer noch die Beschreibung lesen kann. Und den Link unten, den haben viele schon gar nicht mehr, weißt du gar nicht mehr braucht, bei einer echten Karte, weil die Leute verstehen, dass sie darauf klicken können. Und es ja dann auch sehen, wenn sie darüber hovern und dein Screenreader es dir auch vorliest, wenn du die Karte an navigierst, dass du dann [klicken] kannst oder sie verlinkt ist. Deswegen ist es eigentlich in dem Sinn schlechtes Coding von so einer Karte. Das aber sehr oft passiert, tatsächlich.
[00:17:11] Nina Schweppe: Weil es nämlich nervig ist, wenn du dir ne ganze Linkliste zum Beispiel anzeigen lässt, dann kommst du auf irre Zahlen und ärgerst dich, denn du siehst hinterher, dass alle Links oder ganz viele Links drei oder viermal hintereinander vorkommen, so und da fragt man sich auch Ja, ne?
[00:17:27] Tobias Roppelt: Das ist voll spannend. Kannst dir so eine Linkliste mal zeigen, wir haben es gestern mal probiert mit der Nina. Also, meine Mitgründerin heißt auch Nina, deswegen. Wir haben das gestern mal probiert und leider hat Zoom diese Linkliste nicht übertragen, deswegen, kannst du mal versuchen die zu öffnen?
[00:17:42] Nina Schweppe: Ich weiß grad nicht wie sie aufgeht, ehrlich gesagt, unter JAWS.
[00:17:47] Tobias Roppelt: Ja, auch kein Problem.
[00:17:49] Nina Schweppe: Dann weißt du zufällig den Shortcut?
[00:17:55] Tobias Roppelt: Ne, ah Moment [Nina (Mitgründerin) schaut nach]
[00:17:57] Nina Schweppe: Danke.
[00:17:59] Screenreader: Linkliste, Dialogfeld.
[00:18:02] Nina Schweppe: Seht ihr die?
[00:18:03] Tobias Roppelt: Ja
[00:18:04] Nina Schweppe: Ah, was wir alles können!
[00:18:06] Screenreader: Selbstuntersuchung, 9 von 111.
[00:18:10] Tobias Roppelt: Kannst du ganz kurz eins zurückgehen?
[00:18:13] Screenreader: (Nina starte den Screenreader und geht ein Schritt zurück) Weitere Informationen, einfaches nach rechts zeigende spitzes Anführungszeichen, 8 von 111.
[00:18:18] Tobias Roppelt: Wunderschönes Beispiel dafür, warum man seine Links beschriften sollte.
[00:18:22] Nina Schweppe: Ja
[00:18:23] Tobias Roppelt: Weil hier einfach nur angezeigt wird: weitere Informationen. Und mit dieser Aussage kannst du ja einfach gar nichts anfangen. Und da ist es echt spannend zu sehen, solche “Weitere Informationen” -Texte kann man zwar hier für sehende User in seine… Also, erstens, könnten wir uns das ganz sparen, wenn wir die Karte richtig programmieren, aber selbst wenn wir das haben, könnten wir uns diese zweite Information, selbst wenn wir es so anzeigen, mit nem ARIA-Label so beschriften, dass Leute, die auf einen Screenreader angewiesen sind mehr Informationen zu diesem Link erhalten, wo er denn hinführt oder was da eigentlich passiert, anstatt einfach nur “Weitere Informationen” hier anzuzeigen.
Aber ich seh grad, wenn du eins höher gehst.
[00:19:11] Screenreader: (Nina starte den Screenreader und fokussiert etwas mit ihrem Tab) Methodik: Taktilographier 7 von 111.
[00:19:16] Tobias Roppelt: Also, es gibt jetzt zweimal den Link, genau. Und einmal heißt er halt Methodik: Taktilografie und einmal heißt er halt: “Weitere Informationen”. Aber im Prinzip führt er aufs gleiche Ziel und wir könnten uns den “Weitere Informationen” sparen. Und wenn du noch mal eins weiter, in die andere Richtung, bitte.
[00:19:33] Screenreader: (Nina starte den Screenreader und fokussiert etwas mit ihrem Tab) Weiter Methodik Selbstuntersuchung-ats, 9 von 111.
[00:19:39] Tobias Roppelt: Das es auch ganz spannend, wirklich, die Link-Beschriftung so hier zu sehen in der Linkliste, ist auch sehr interessant, weil Methodik Selbstuntersuchung-ats, damit kann man wahrscheinlich auch nicht viel anfangen. Das sollte ein bisschen besser beschrieben werden. Die Frage ist, ob der der Link dann auch wirklich so aussieht (Tobias untersucht den Link im Browser). Wahrscheinlich, ja, also das sind jetzt Feinheiten, aber das ist trotzdem auch eine ganz spannende Sache zu sehen.
[00:20:07] Nina Schweppe: Ja, aber “Strich ats” , das ist ja schon kryptisch genug, also wo man sich dann fragt: hm. Außerdem macht’s halt in der Verständlichkeit von dem, was JAWS mir sprachlich präsentiert, lenkt es auch ab, genau wie dieses Anführungszeichen, was da in dem Link da drüber vorkommt.
[00:20:27] Tobias Roppelt: Stimmt, ja, das haben wir auch noch gar nicht besprochen. Kannst du da nochmal drauf gehen?
[00:20:31] Screenreader: (Nina starte den Screenreader und fokussiert etwas mit ihrem Tab) Weitere Informationen, einfaches nach rechts zeigendes, spitzes Anführungszeichen, 8 von 111.
[00:20:38] Tobias Roppelt: Das hab ich jetzt schon so oft gehört, dass ich es voll ignoriert hab.
[00:20:40] Nina Schweppe: Ja, ich auch
[00:20:42] Tobias Roppelt: Weitere Information, spitzes Anführungszeichen, ist natürlich auch so eine Sache, dieses “Anführungszeichen”, sollte eigentlich gar nicht vorgelesen werden. Es ist eine unnötige Information, die einfach nur ablenkend und verwirrend ist. Und die, am Besten ist es einfach nur ein Icon und kein Anführungszeichen, das da hinter diesen Text gesetzt wird und dieses Icon sollte dann gehidet(versteckt) werden vom Screenreader, damit so was nicht vorgelesen wird. Sondern das einfach nur “weitere Informationen” vorgelesen wird und dieses Icon praktisch nur als Designelement dafür da ist, um irgendwas für sehende Leute anzuzeigen. Aber eben nicht Teil des Textes zu sein, so wie es hier momentan gemacht ist.
[00:21:29] Tobias Roppelt: Ja super, du kannst gerne die Linkliste wieder zumachen und wir können weiter machen.
[00:21:34] Screenreader: (Nina starte den Screenreader und fokussiert etwas mit ihrem Tab) Selbstuntersuchung-ats, 9 von 111.
[00:21:36] Nina Schweppe: Aber kuck mal, nur um das jetzt noch mal zu sagen, das ist hier der Link auf dem wir stehen ist der Link 9 von 111. Also dann kannst du dir vorstellen, was das für eine Arbeit ist, wenn du durch diese Liste durchwanderst und dann eigentlich n Haufen Links vorfindest, die schlecht beschriftet sind.
[00:21:53] Tobias Roppelt: Da hast du vollkommen recht.
[00:21:55] Nina Schweppe: Also, es ist nicht motivierend, sich da mit der Seite dann weiter zu, rum zu ärgern, eigentlich.
[00:22:01] Tobias Roppelt: Ja, bestimmt. Wahrscheinlich gibt’s auf der Seite relevante Links auch nur 20 oder 30.
[00:22:06] Nina Schweppe: Ja, das wollte ich damit ausdrücken. Genau, das meine ich. Stell dir vor, 111 Zeilen. Ich meine, welcher Sehende will 111 [Zeilen] und jetzt muss man ja denken, blinde Menschen können ja nur mit dem Cursor [navigieren]. Also ich kann ja nicht die Maus nehmen und mal eben so durch-rädern und sagen okay, das flitzt an mir vorbei, sondern ich muss ja wirklich Zeile für Zeile. warten, bis JAWS den Inhalt ausgibt. Und da kann ich weiter drücken. Pfeil hoch oder runter. So, und da bist du bei 111 ganz schön lange unterwegs.
[00:22:34] Tobias Roppelt: Das ist richtig. Eine halbe Tagesaufabe, dich mit der Website auseinanderzusetzen.
[00:22:40] Nina Schweppe: Muss mal gucken, wie das wieder ausgeht. Ah, hier.
[00:22:43] Screenreader: Link, Methodik selbst.
[00:22:44] Nina Schweppe: Das ging ja jetzt relativ einfach.
[00:22:47] Screenreader: (Nina starte den Screenreader und fokussiert etwas mit ihrem Tab) Überschriftebene 2: Anleitung zur taktilen Selbstuntersuchung der Brust. Wer unter professioneller Anleitung durch eine aus… Leer. Link: Mehr erfahren einfaches, nach rechts zeigende spitzes Anführungszeichen. Überschriftebene 6: Brustkrebs Früherkennung, finden Sie jetzt eine Praxis in Ihrer Nähe. PLZ, Stadt. PLZ, Stadt. Ausklappliste reduziert: Umkreis 100 Kilometer. Suchen: Schalter. Überschriftebene 2, Aktuelles.
[00:23:16] Tobias Roppelt: Das haben wir letztes mal schon gemacht, wir sind eben gerade durch dieses Formular durchgegangen. Und da haben wir ja auch echt interessante Sachen gesehen, nachdem wir das Formular ausgefüllt haben. Deswegen…
[00:23:26] Nina Schweppe: Sollen wir es mal zeigen?
[00:23:28] Tobias Roppelt: Genau, das würde ich sehr gerne zeigen.
[00:23:30] Screenreader: Leer.
[00:23:31] Nina Schweppe: Also, soll ich meine Postleitzahl eingeben?
[00:23:34] Tobias Roppelt: Genau. Gib einfach mal eine Postleitzahl oder deine, je nachdem, was du möchtest ein und dann…
[00:23:40] Screenreader: (Nina starte den Screenreader und füllt das Formular aus) 2,1,2, 5, 5. 2,1,2,5,5. Ausklappliste. Um zu suchen. Schalter. Drücken Sie Eingabe zum Aktivieren.
(Die Seite wechselt auf die Suchergebnis-Seite) Eingabe. Praxisfinder. Seite hat 14 Regionen, 17 Überschriften und 88 Links auf dieser Seite. Praxisfinder.
[00:24:01] Nina Schweppe: Das muss man sich mal, 14 Regionen, die man ja einzeln anspringen können, und was? 88 Links. In der Kürze liegt die Würze, hat man in der Schule zu mir immer gesagt.
[00:24:15] Tobias Roppelt: Das ist eigentlich im UI / UX auch so.
[00:24:19] Nina Schweppe: Also bei 14 Regionen. Also nicht nur, dass ich 88 Links mir aussuchen kann, sondern auch 40 Regionen, die man ja mit dem Screenreader auch noch mal einzeln durchspringen könnte, jetzt.
[00:24:29] Tobias Roppelt: Es kann aber hoffentlich an der Liste liegen, die sie jetzt dann zeigen. Aber, da schauen wir mal, weiter zu navigieren.
[00:24:36] Screenreader: In B Esten. H. Änden. In B Esten.
[00:24:41] Nina Schweppe: Huch.
[00:24:42] Screenreader: H. Änden.
[00:24:44] Nina Schweppe: Das habe ich beim letzten Mal noch nicht gesehen.
[00:24:46] Tobias Roppelt: Das habe ich beim letzten Mal auch noch nicht gesehen, aber es ist …
[00:24:49] Nina Schweppe: Das ist neu, glaub ich. Die haben Update gemacht!
[00:24:53] Tobias Roppelt: Das, weiß ich nicht, aber kann sein. Auf jeden Fall ist das Gleiche, wie auf der Startseite. Die haben eben hier wieder, da steht: In besten Händen.”, als Überschrift, was hier auch gar nicht als Überschrift ausgezeichnet ist, oder? Sind eine…
[00:25:06] Nina Schweppe: Ist nicht nee.
[00:25:07] Screenreader: Praxisfinder.
[00:25:08] Nina Schweppe: Und der Praxisfinder, ja guter der Praxisfinder ist die Line , aber.
[00:25:12] Screenreader: (Nina starte den Screenreader und geht mit Tab weiter.) In B. Esten. Partner, in Sachen Früherkennung, Überschriftebene 1. Überschriftebene 3: Diese Praxen und Kliniken bieten die Taktilogrpahie zur Brustkrebsfrüherkennung an. Mit speziell von disco… Überschriftebene 3: Die Terminübersicht der Kliniken, Praxen finden. Überschriftebene 4: Die Praxis… Überschriftebene 3: Untersuchung MTU. Überschrift. Die Terminvereinbarung läuft über die einzelnen… Übersicht der Kliniken. Überschrift. PLZ, Stadt, Eingabe. 2125. Ausklappen. Suchen.
Nur Kliniken/Praxen (TBU) anzeigen. Kontrollfeld nicht aktiviert. Nur dh Touchpoints (ATS) anzeigen. Kontrollfeld nicht aktiviert. Nur. Kurzbefehle Schalter. Zum Verschieben drückst du. Menü aktivieren. Vollbild-Ansicht. Vergrößern, verkleinern. Link dieses Gebiet.,
[00:26:06] Tobias Roppelt: Wir stoppen kurz hier.
[00:26:08] Nina Schweppe: Ich fall jedes Mal auch wieder darauf rein. Ich habe wieder genau so verwirrt geguckt!
[00:26:14] Tobias Roppelt: Also, wahnsinnig spannend zu sehen. Erst mal, von der ganzen Usability. Das ist etwas, unabhängig vom Screenreader oder nicht. Wenn wir eine sogenannte User-Journey uns überlegen: Jemand gibt seine Adresse in ein Feld ein und drückt auf Suchen. Was erwartet die Person?
Natürlich, dass sie eine Liste von Ergebnissen angezeigt bekommt, mit dem, was sie gerade gesucht hat. Und wie wir hier schön sehen, bevor man überhaupt, wir sind noch nicht mal da. Also jetzt, nach dieser Karte kommt die Liste der Ergebnisse. Aber bevor man überhaupt die Liste der Ergebnisse sieht, kommt erst mal ein fetter Block über irgendwas, was mit der Firma zu tun hat, dann kommt noch mal die Suche, die wir gerade schon ausgeführt haben. Dann kommt eine Darstellung einer Google Maps und dann kommen die Ergebnisse, die man eigentlich sehen will.
Schon von der ganzen UX dieser Seite ist sie an sich nicht gut aufgebaut. Und wenn man jetzt noch das Ganze aus der Sache des Screenreader-Users betrachtet, ist es halt noch 10x dramatischer, wenn man eine schlechte UX hat, weil man… du weißt ja nicht, wann deine Liste kommt. Du bist ja jetzt schon komplett verwirrt und gibst es vielleicht schon wesentlich früher auf, da überhaupt noch weiter zu suchen, weil du eben gar keine Ahnung hast, wann kommt denn jetzt meine Liste?
Also dieses Ziel ist komplett verfehlt von dieser Suche, das eigentlich erreicht werden sollte. Es geht wirklich stark davon aus hier, dass man runterscrollt. Das sogar man von Sehenden verlangt, dass sie erst mal ne halbe Page runterscrollen, bevor sie überhaupt an die Ergebnisse kommen.
Aber bei dir, die gar keine Vorstellung davon hat, wo denn die Ergebnisse schlussendlich sein könnten, da ist die Chance, dass du einfach abbrichst und genug davon hast ja wesentlich höher.
[00:28:09] Nina Schweppe: Vor allem, hätt ich mir jetzt eben was erhofft mit den Überschriftenebenen. Deswegen hat ich eben mal was gedrückt, weil ich mir jetzt erhofft hätte über den Weg da einfach schnell jetzt hinzukommen, weil ich ja schon oben sehen konnte: wie, da ist kein Ergebnis? Das Suchfeld war auch nicht da, da hab ich gedacht, ich muss weiter runter. Aber, das war ja noch nicht sonderlich effektiv.
[00:28:31] Tobias Roppelt: Tatsächlich haben die Ergebnisse keine Überschrift, ja.
[00:28:34] Nina Schweppe: Ja genau, ich glaube so ähnlich war das auch. Ich erinnere mich und das ist natürlich ärgerlich. Also entweder muss man wenigstens mit der auf der Überschriftenebene 1 die Suche dann mal oder auf 2 die Suche adressieren, sodass man wenigstens ungefähr dahinkommt, aber dann ärger ich mir trotzdem die Krätze, wenn ich erst mal bevor ich die Liste sehe Google Maps sehe, weil das für mich ja völlig wertlos ist. Runterscrollen muss. Und das ist im übrigen auch sehr ärgerlich, wenn Webanbieter bei so ner Suche, also ganz oft seh ich Seiten, da gibt es nur die Karte. Und das ist natürlich ganz besonders ärgerlich, weil da steigt natürlich der Screenreader aus.
[00:29:15] Tobias Roppelt: Absolut, ja ich hab das auch schon erst das erste Mal letzten Donnerstag, dass ich das gesehen hab, wie jemand so eine Google Map benutzt mit ‘nem Screenreader und es klingt wahnsinnig anstrengend.
[00:29:27] Nina Schweppe: Also ich weiß, ich wusste gar nicht, dass es überhaupt geht, aber ich hätte auch keine, also mal angenommen, ich suche einen Arzt oder einen Händler für irgendwas oder so. Da ist es doch sehr unerfreulich, wenn nur eine Karte da ist.
[00:29:44] Tobias Roppelt: Ja die bringt dir ja auch gar nichts. Also die Karte, also genau. Trotzdem gibt es auch Möglichkeiten. Also es jetzt nicht so wie den Leuten zu sagen, ihr könnt gar keine Google Maps Karte auf eurer Seite einbinden. Ihr könnt es schon machen und ihr könnt, es gibt auch Möglichkeiten, solche Karten oder solche Bereiche skipbar für einen Screenreader zu machen, damit sie im Screenreader halt nur sagen: “Hey, jetzt kommt eine Google Maps Karte.”, Kontext mal wieder geben und dann sagen: “Ihr habt die Möglichkeit, es zu überspringen.” Es ist also, da gibt es ja schon sehr viele Möglichkeiten heutzutage, so was hinzubekommen.
Man sieht es hier leider nur nicht, weil es nicht so implementiert ist, aber, nur um mal zu sagen es gibt, wenn man über Barrierefreiheit redet, haben die Leute ganz oft die Vorstellung, dass die Webseite dann super plain und klar, langweilig und riesige Schrift und grau aussehen muss. Aber das ist alles nicht die Wahrheit, wenn man es gut implementiert, kann die Website genau so aussehen, wie sie jetzt aussieht, nur dass sie eben besser implementiert ist und bessere Überschrifteisstrukturen hat und bessere Codierungen, um dem Screenreader-Nutzer zu sagen, was er und wie er es tun kann.
[00:30:54] Nina Schweppe: Und ja, aber das ist ja wirklich bedauerlich, weil viele barrierefreie Angebote ja wirklich hässlich und Entschuldigung, beeinträchtigt aussehen. Also das ist höre ich auch ganz oft von Menschen, mit denen ich darüber spreche, die eben sagen: “Ja, nee also das kann unsere Firma sich nicht leisten, so ne Seite zu haben, die dann eben barrierefrei ist, weil die dann eben keine Features hat, die gut aussehen.” und das ist ja wirklich ein Irrglaube.
[00:31:23] Tobias Roppelt: Das ist ein richtiger Irrglaube, ja und den versuchen wir auch immer wieder über unsere Marke an sich zu brechen, dass wir sagen können, du kannst also, das siehst du leider nicht, Nina, aber unsere Marke, wir sind ja relativ bunt unterwegs, wir haben vier sehr, sehr unterschiedlich bunte, verschiedene Farben, die wir zeigen, und auch in unseren Illustrationen und so weiter. Sind wir sehr kindlich, süß und nett angehaucht, damit wir halt zeigen können: Du kannst auch kreativ sein, wenn du barrierefrei bist. Es muss nicht so sein, wie: Du bist grau und du bist trist und du bist traurig. Man muss sich halt schon natürlich ein bisschen mehr Gedanken machen, wie die Farben dann zusammenpassen und wo man Abstriche machen muss und was man jetzt nicht auf was setzen darf. Aber das ist einfach auch nur eine Sache von, das übt man halt ne gewisse Zeit und da kommt man da rein und dann sieht man das, da kann man genau so viel damit machen, wie man wie man sonst auch machen könnte.
Es gibt eher so sachen die man dann nicht mehr benutzt, wie zum beispiel dass man Slider benutzt, weil Slider echt grauenhaft sind für den Screenreader, aber Slider auch generell so eine geringe Converstion-Rate haben, dass die Leute sich nie anschauen, was Slide Nummer 3, in so nem Slider ist. Das man eher was Positives für seine UX tut, wenn man barrierefreie Komponenten nutzt, anstatt normalen Komponenten.
[00:32:53] Nina Schweppe: Spannend
[00:32:53] Tobias Roppelt: So viel dazu. Dann kannst du gerne noch mal weitergehen. Jetzt kommt nämlich die eigentliche Liste und jetzt schauen wir mal wie diese Liste implementiert ist.
[00:33:01] Screenreader: Link. Fehler. Name. Leistung. Entfernung. Telefon. Straße. PLZ. Link: Praxis, Doktor der Medizin, Gerd Müller Möring. Doktor der Medizin, Britta Herren. TBU. 36,24 Kilometer. 040-367766 Bleichenbrücke 9. 20354 Hamburg. Link: Praxis Dres. med. Haritaworn und .
[00:33:26] Tobias Roppelt: Es gibt so viele Sachen zu sagen dazu. Als kleiner. Also was, wo fange ich an. Erstmal ist es wahrscheinlich eine Tabelle, so wie sie dargestellt wird und das sollte man eigentlich als Tabelle implementieren. Wenn es als Tabelle implementiert ist, dann ist die Sache wie es vorgelesen wird, eine ganz andere, weil dann werden diese Labels, jetzt, du siehst halt oben jetzt wie es momentan ist, was den Namen, die Leistung, Entfernung, Telefon. Du liest einmal die Labels und dann werden dir die einzelnen Positionen vorgelesen, aber du hast ja gar keinen Bezug mehr. Was heißt TBU und ATS. Erstmals, ist es eine Abkürzung, aber unabhängig davon, du weißt gar nicht mehr das Label Leistung, das da dazu steht, oder desselben Entfernung.
Spätestens bei dem zweiten oder dritten hast du das komplett vergessen, was da eigentlich, was der Bezug zu dem Label da oben ist. Deswegen ist das bisschen, ist es als Tabelle besser implementiert, weil eine Tabelle besser vorgelesen wird, von nem Screenreader und mehr Kontext schon automatisch gibt, und zweitens wenn man es so machen will, wie sie es hier gemacht haben, dann, wie vorhin schon gesagt, dann muss das Ganze zumindest eine Liste sein, mit einzelnen Listenelemente, die man durchgehen kann und dann sehen kann, okay, es gibt hier 14 Ergebnisse, ich kann mir von diesen 14 Ergebnissen, dann sind vielleicht die Namen der Leute für Überschriften in der Liste, dass du die wenigstens durchgehen kannst oder die… weiß ich nicht, da müsste man ja dann schauen was das das interessanteste für dich? Ist es die Entfernung? Ist es die Leistung? Ist es irgendwas. Da ist halt dann wirklich wieder so ein bisschen User-Testing gefragt, was will man denn eigentlich wissen?
[00:34:59] Nina Schweppe: Ja und sortieren sollte ich sie können ne.
[00:35:01] Tobias Roppelt: Sortieren, genau!
[00:35:02] Nina Schweppe: Das ich wählen kann, ist es denn, interessiert mich jetzt die Entfernung, interessiert mich der Name alphabetisch, ähm also, das wäre ja eigentlich best practice.
[00:35:12] Tobias Roppelt: Genau und das ist hier, das ist eben einfach nur runtergeschrieben, hier ist es keine Tabelle, es ist kein gar nichts, das ist einfach plain Text sozusagen, den sie da hingelegt haben, deswegen ist da nichts davon in einer irgendeine Art und Weise implementiert, das es hilfreich wäre für einen Screenreader-User, und auch so, also für mich jetzt persönlich, auch als sehende Person, diese Leistungen, da steht wirklich nur TBU und ATS und wenn ich gar keine Ahnung hab, was das bedeutet, bin ich hier vollkommen aufgeschmissen. Ich habe keine Möglichkeit durch, es gibt keine Beschreibung dafür, es gibt keinen Icon-Button oder Info-Button, den ich zumindest klicken könnte, um zu schauen, oder es gibt kein Tool Tipp. Es gibt rein gar nichts, was mir jetzt auch als sehende Person beschreiben würde, was diese Leistung denn bedeutet. Ich müsste mich anderswo auf der Seite umschauen, um das herauszufinden
Okay, so viel dazu. Ich glaube, wir haben die Seite ganz gut analysiert. Es gibt wahrscheinlich noch 50 Sachen, die wir dazu sagen könnten, aber ich glaube für den Anfang, habt ihr einen sehr guten Überblick bekommen, was für große und kleine Probleme auftauchen und was auch, das finde ich ja auch, da will ich immer wieder den Bezug dazu schaffen, wenn man sich mit Barrierefreiheit auseinandersetzt. Automatisch muss man sich mit Usability und User Experience auseinandersetzen. Und sieht in diesem Fall, dass man vieles selbst für, also für jeden User, egal, worauf er angewiesen ist, kann man so eine Seite besser strukturieren und besser machen, wenn man sich Gedanken darüber macht: Was will der User überhaupt und wie kommt er an die Informationen? Und wie sieht so eine User Journey aus? Von, Ich klicke auf irgendwas, oder ich gebe irgendwas ein, bis hin zu, Ich lande irgendwo. Was ist meine Erwartung? Was will ich da sehen, was will ich angezeigt bekommen?
