PAGE online

Website-Barrieren-Check: PayPal am zugänglichsten

Lenstore analysierte über 100 Internetseiten, um Barrieren aufzusprüren und die zugänglichsten Angebote für Menschen mit Sehbeschwerden zu finden – von sozialen Medien, über Banking Angebote bis hin zu Nachrichtenseiten.


Website Barrieren: Person von hinten am Laptop Die mediale Gesellschaft mit schlechten Augen und nachlassender Sehfähigkeit tut für lesbare Websites noch immer zu wenig: Für die meisten Menschen mit Sehbeeinträchtigung ist das Lesen- und damit Nutzenkönnen von unterschiedlichen Plattformen bislang keine Selbstverständlichkeit. Statt Barrieren abzubauen, sind manche Angebote nach wie vor komplett unzugänglich.

Das zeigt eine Auswertung des Kontaktlinsen-Händlers Lenstore von mehr als 100 Websites internationaler Unternehmen. Dazu erstellte Lenstore einen eigenen Index, der die Leistung jeder Website auf einer Skala von 1 bis 10 nach verschiedenen einschränkenden* Kriterien wie Kontrast, Ankertext, leere Überschriften und Text bewertet.

Dann analysierte man mithilfe von Web Accessibility Evaluation Software die Webinhalte und fand die entsprechenden Fehler und Barrieren. Anhand der Gesamtfehler ergab sich eine Bewertung der Internetseiten, die die Websites mit der meisten beziehungsweise am wenigsten Barrierefreiheit ausweist.

*Anmerkung der Redaktion zu Alternativtexten: Screenreader behandeln Bilder ohne alt-Attribut anders als Bilder mit leerem alt-Attribut. Während Screenreader bei komplett fehlenden alt-Attributen die Dateinamen der Bilder vorlesen, ignorieren sie Bilder mit leerem alt-Attribut komplett. Mit einem vorhandenen, aber leeren alt-Attribut sorgt man also dafür, dass Besucher mit Screenreadern nicht ständig durch das Vorlesen von unbedeutenden Dateinamen an der Websitenutzung gehindert werden, sie sollten also positiv ins Gewicht fallen. Ein leeres alt-Attribut sieht in HTML folgendermaßen aus: alt=” ” . Screenreader ignorieren auch Elemente, die ein role-Attribut mit dem Wert »presentation« haben. Beispiel: <img src=”kreis.jpg” role=”presentation”>.

Top Accessibility: PayPal belegt Spitzenplatz

Mit einer nahezu perfekten Wertung von 9,9 von 10 Punkten landet der Bezahldienstleister PayPal auf Platz 1, dichtgefolgt von Alodokter, einem indonesischen Gesundheitsportal sowie einem Unternehmen für Finanzdienstleistungen namens Spectrum aus Kalifornien.

Bei PayPal beeinträchtigten lediglich problematische Textstellen die Funktion der Website. Mehrere interne Links, die zur gleichen Seite führen, was zusätzlichen Navigationsaufwand und Wiederholungen für die Nutzer von Screenreadern bedeutet, sowie die Verwendung von PDF-Dateien, was den barrierefreien Zugang erschwert, fand das Analysetool.

Website Fehler beim Kontrast Leere Überschriften Fehlender Alternativtext Null/leerer Alternativtext Andere Probleme beim Text Gesamtpunktzahl
paypal.com 0 0 0 0 7 9,99
alodokter.com 0 0 0 0 5 9,99
spectrum.net 1 0 0 1 3 9,99
cdc.gov 0 0 0 0 10 9,98
messenger.com 3 0 0 3 1 9,98

Barrieren: Deutsche News-Portale schwach

Am schlechtesten schneiden die englische Online-Nachrichtenplattform Daily Mail und The Sun ab, aber auch bei deutschen Medien besteht dringend Handlungsbedarf. Sie gehören zu den Internetseiten mit den meisten Barrieren, allen voran n-tv.de.

Das Nachrichtenportal weist einen sehr geringen Kontrast zwischen Text- und Hintergrundfarben auf, fehlende Alternativtexte und über 800 sonstige Fehler, ergeben das insgesamt schlechte Ergebnis von 5,25 Punkten. Auch der Spiegel glänzt nicht gerade mit seinem Kontrast und zdf.de und chip.de könnten an der Stelle ebenfalls mit wenig Einsatz viel verbessern.

Website Fehler beim Kontrast Leere Überschriften Fehlender Alternativtext Null/leerer Alternativtext Andere Probleme beim Text Gesamtpunktzahl
welt.de 26 2 4 20 83 8,67
zdf.de 154 1 1 0 286 8,48
chip.de 159 1 0 28 190 8,08
web.de 102 1 3 51 6 8,08
tagesschau.de 5 8 3 0 112 7,84
spiegel.de 140 1 7 3 511 7,73
t-online.de 83 0 28 1 367 7,63
focus.de 21 0 41 5 411 7,14
n-tv.de 422 0 2 47 839 5,25

Sozialen Medien überraschend zugänglich

Unter den sozialen Plattformen scheidet Facebooks Messenger als barrierefreiste Plattform für sehbeeinträchtigte Nutzer ab. Abgesehen von wenigen Problemen beim Kontrast und Ankertexten, die bei den Nutzern von Screenreadern für Verwirrung sorgen können, erzielte der Instant Messenger in fast jeder Kategorie eine perfekte Wertung und insgesamt 9,98 Punkte.

Überraschend gut schlagen sich auch Discord, Pinterest, Tmblr, die russische Plattform VK sowie TikTok mit 9,86 Punkten gegenüber den Konkurrenten Facebook, Twitter, LinkedIn und Instagram. Insgesamt schneiden aber alle sozialen Plattformen in einem guten oberen Bereich ab.

Website Fehler beim Kontrast Leere Überschriften Fehlender Alternativtext Null/leerer Alternativtext Andere Probleme beim Text Gesamtpunktzahl
messenger.com 3 0 0 3 1 10
discord.com 6 0 0 5 5 9,9
pinterest.com 1 0 0 7 19 9,9
tumblr.com 12 0 0 0 4 9,9
vk.com 11 0 0 6 14 9,9
tiktok.com 7 0 5 10 14 9,9
facebook.com 15 0 2 18 9 9,8
zhihu.com 31 0 0 1 1 9,8
whatsapp.com 17 1 6 0 11 9,8
linkedin.com 1 0 22 6 16 9,8
twitter.com 18 1 0 16 25 9,7
instagram.com 39 0 1 0 33 9,7
ok.ru 29 0 24 2 65 9,5
reddit.com 147 0 0 28 112 8,9
line.me 16 0 0 640 396 7,3

20 beliebte deutsche Websites unter der Lupe

Auch 20 beliebte deutsche Internetseiten untersuchte Lenstore und fand heraus, dass Google.de mit zur Spitze der barrierefreisten Internetseiten mit deutscher Domainendung gehört. Mit 9,63 von 10 Punkten weist die Website eine nahezu perfekte Wertung auf – die einzigen Probleme sind Fehler beim Kontrast sowie fehlende Alternativtexte.

Auf dem zweiten Platz liegt das Logistikunternehmen GLS mit 8,64 Punkten, knapp gefolgt von eBay mit 8,42 Punkten.

Website Fehler beim Kontrast Leere Überschriften Fehlender Alternativtext Null/leerer Alternativtext Andere Probleme beim Text Gesamtpunktzahl
google.de 7 0 0 5 5 9,63
gls-pakete.de 8 0 0 23 12 8,64
ebay.de 5 0 0 12 77 8,42
amazon.de 2 0 1 2 146 7,88
idealo.de 46 0 0 17 21 7,84
dhl.de 4 2 0 1 82 7,72
bild.de 10 3 1 0 33 7,41
immobilienscout24.de 19 0 8 1 33 7,36
wetteronline.de 33 0 4 8 51 7,33
ebay-kleinanzeigen.de 72 0 3 37 11 5,65

Fünf Tipps von Lenstore zur Verbesserung der Web Accessibility:

  1. Sorgen Sie dafür, dass der Alternativtext den Inhalt und die Funktion des Bildes präzise und kurz und bündig widerspiegelt. Das Alt-Attribut sollte gleichwertig, präzise und kurz und bündig sein.
  2. Einige sehbeeinträchtigte Nutzer – vor allem jene, die eine Kombination aus Tastatur und Screenreader verwenden – navigieren anhand von Überschriften. Eine leere Überschrift auf Ihrer Website bietet diesen Nutzern keine Informationen und stiftet Verwirrung.
  3. Legen Sie die Sprache der Website oder des Seitenabschnitts fest. Dadurch können die Screenreader den Inhalt verstehen, den sehbeeinträchtigte Nutzer abrufen möchten.
  4. Erhöhen Sie den Kontrast zwischen der Textfarbe im Vordergrund und der Hintergrundfarbe. Großer Text, beispielsweise größer als 18 oder 14 Punkt oder fett, benötigt nicht so viel Kontrast wie kleiner Text.
  5. Verlinkte Bilder können bei Nutzern, die mit Screenreadern auf Internetseiten zugreifen, für Verwirrung sorgen. Fügen Sie einem Bild innerhalb eines Links einen angemessenen Alternativtext bei, um sicherzustellen, dass die Funktion und der Zweck des Links sowie der Inhalt des Bildes verständlich sind.

Lesen Sie noch mehr zum Thema Barrierefreiheit: Inclusive Design: Darauf kommt es an! oder das Interview mit Dr. Tom Bieling zu Universaldesign.

Wie sich Websites nicht nur analysieren, sondern die Ergebnisse auch noch wunderbar visualisieren lassen, zeigt Daniela Hach mit ihrer Chrome-Extention für Web-Accessibility »Zugangsformen«.

Dieser Beitrag ist erstmals am 8. Dezember 2021 erschienen.

Kommentare zu diesem Artikel

  1. Haben Sie vielen Dank für Ihre anschauliche Erklärung, Frau Simonis! Als u. a. auch Mediengestalter ist mir die Verwendung dieser h-tags natürlich bekannt; ich wäre allerdings nie auf die Idee gekommen, solche zu setzen, ohne auch die entsprechenden Überschriftentexte einzufügen, weshalb ich hier auf dem Schlauch stand. Weit verbreitet ist dieses Phänomen laut dieser Tabellen ja auch nicht – außer interessanterweise bei den deutschen News-Websites.

  2. Hallo Herr F., das ist die Headline

    in HTML zeichnet man Überschriften mit einem < h >-tag aus, damit sie u.a. für Screenreader einen erkennbaren Syntax in den Artikel bringen – visuelle Überschriften/Fettungen/Schriftgröße/Farbe funktionieren nicht.

    Beispiel an < h2 >:

    < h1 > hier steht die Headline < /h1 > – lasse ich nun bei den folgenden Zwischenhaedlines < h2 > … < / h2 > den Bereich zwischen den tags leer, ist das eine leere Überschrift, die auch vom Screenreader als leer vorgelesen wird und so werden den Nutzer:innen auch leere Absätze ausgegeben. Syntax: < p > …< /p >

    Zur Veranschaulichung in < h3 >:

    finden Sie hier einige erläuterte Barrieretestergebnisse von öffentlichen Websites, bei denen diese leeren Überschriften vorkommen. https://testen.bitv-test.de/index.php?a=eb&iid=29

  3. Frage: Was ist mit „leere Überschriften“ gemeint? Die verlinkte Webseite von Lenstore, die i. Ü. auch nicht so toll ist (bei den Tabellen sind bei mir sämtliche rechten Spalten abgeschnitten!), bietet hierzu selbst keine Erklärung. Entweder setze ich in meinen Beiträgen Überschriften oder nicht, aber mit „leere Überschriften“ kann ich gar nichts anfangen.

Schreibe einen Kommentar

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

Das könnte dich auch interessieren