Eine Übersicht der Projekt-Webseiten des Börsenvereins des Deutschen Buchhandels und der Stiftung Buchkultur und Leseförderung des Börsenvereins des Deutschen Buchhandels.
Einleitung
Leitfaden für Online-Buchhandlungen und Websites
1. Überschriften-Hierarchie (H1, H2, H3)
2. Aussagekräftige Meta-Tags
3. Layout von Websites
4. Vorlesefunktion
5. Videos
6. Audios
7. Einbindung von Fremdinhalten
8. Produktsuche und Produktdarstellung
9. Tastaturbedienbarkeit interaktiver Elemente
10. Fokus interaktiver Elemente
11. Eingabefelder
12. Fehlermeldungen in Formularen
13. Vergrößerung
14. Checkout & Warenkorb
15. Werkzeuge für Website-Tests
16. Hinweise zu Apps
Quellen & hilfreiche Links
Der demografische Wandel und die Digitalisierung gehören zu den entscheidenden Entwicklungen, die unsere Gesellschaft prägen. Hinsichtlich der kulturellen und gesellschaftlichen Teilhabe kommt in diesen Prozessen der digitalen Barrierefreiheit eine grundlegende Bedeutung zu.
Die EU-Richtlinie „European Accessibility Act (EAA)“ aus dem Jahr 2019 dient dazu, der Durchsetzung barrierefreier Produkte und Dienstleistungen den Weg zu ebnen. Die Richtlinie wurde mit dem „Barrierefreiheitsstärkungsgesetz“ im Mai 2021 in deutsches Recht überführt. Der Buchhandel, Buchgroßhandel, Aggregatoren und Verlage teilen das Ziel einer inklusiven Gesellschaft, in der alle Menschen – mit und ohne Behinderungen – ein selbstbestimmtes Leben führen. Daher sollen sie ihre Produkte in deren ganzer Vielfalt allen Menschen in gleicher Weise zugänglich machen. Dies ist Anspruch und Ziel der „Task Force Barrierefreiheit“ im Börsenverein des Deutschen Buchhandels. Der Börsenverein wie auch die Teilnehmenden in der Task Force wollen die Branche bis 2025 und darüber hinaus auf dem Weg zur Barrierefreiheit begleiten. Die gut 30 Expertinnen und Experten geben konkrete Empfehlungen und Hilfestellungen. Der Börsenverein des Deutschen Buchhandels koordiniert in Zusammenarbeit mit dem Deutschen Zentrum für barrierefreies Lesen (dzb lesen) die Arbeit der Task Force, nimmt am nationalen Gesetzgebungsprozess aktiv teil und gewährleistet den Austausch mit den internationalen Partnern.
Neben dem Handbuch “E-Books ohne Barrieren” bereitet die Task Force drei weitere Leitfäden für die Publikationsbereiche „PDF“, „EPUB“ und den hier vorliegenden Leitfaden „Web“ vor. Mit dieser Veröffentlichung zum Teilgebiet barrierefreier Webgestaltung mit dem Fokus Buchmarkt gibt die Task Force einen Überblick und benennt wesentliche Aspekte des barrierefreien Zugangs zu Inhalten über vorbildhafte Webshops.
In der Theorie gestatten die heutigen digitalen Möglichkeiten Menschen mit und ohne Behinderung, Inhalte durch entsprechende technologische Unterstützung leicht aufzunehmen. Allerdings entstehen gerade bei der Produktion digitaler Publikationen unbewusst Hürden, die auch Benutzer*innen ohne vermeintliche Beeinträchtigung situativ behindern. Die allgemeine Annahme, dass Barrierefreiheit in digitalen Dokumenten oder Produkten ausschließlich Menschen mit Behinderung oder Menschen im fortgeschrittenen Alter betrifft, ist eine falsche. Die prominenteste Personengruppe, die sich unzugänglichen Inhalten gegenübersieht, sind seh- und lesebehinderte Menschen wie auch Menschen mit einer altersbedingten Seheinschränkung. Jedoch werden weitaus mehr Personen vom Zugang zu Inhalten ausgenommen. In Deutschland geht man derzeit von rund acht Millionen schwerbehinderten Menschen aus. Davon sind etwa 1,2 Millionen Menschen sehbehindert und davon wiederum etwa 200.000 Menschen blind, das heißt sie haben ein Sehvermögen von unter 3 Prozent (Stand 2019). Nach aktuellen Schätzungen der „European Blind Union“ leben in der EU rund 30 Mio. sehbehinderte Menschen. Aber neben blinden und sehbehinderten Menschen gehören auch Personen mit Legasthenie, einer Körperbehinderung oder geistigen Einschränkungen zu denjenigen, die von barrierefreien Produkten profitieren können. Neben dem oben beschriebenen Inklusionsziel bedeutet „Zugang für alle“ auch, dass der Branche große Zielgruppen erschlossen werden.
Erfahrungen bei der Produktion barrierefreier Produkte aus der Vergangenheit machen deutlich, dass die notwendigen Anforderungen an Zugänglichkeit bereits im Entstehungsprozess von Inhalten berücksichtigt werden müssen. Jedes Produkt, das ‘born digital’ (originär in digitaler Form produziert) ist, kann auch ‘born accessible’ (originär barrierefrei) werden. Wenn Zugänglichkeit bereits bei der Konzeption von Produkten mitgedacht wird, die wesentlichen Akteure in den Prozess einbezogen werden und so das für Zugänglichkeit notwendige Wissen aufgebaut wird, so lassen sich für fast alle Produkte barrierefreie Lösungen finden. Im Ergebnis können E-Book-Reader, Sprachassistenten, Screenreader, mobile Anwendungen und inklusive funktionale Webshops von einer deutlich größeren Zahl Lesender gut bedient werden. Der Mehrwert, auch bezogen auf den Markt, sollte für alle Beteiligten offensichtlich sein.
Die folgenden Ausführungen gelten generell für Websites, gehen an einigen Stellen aber auf Besonderheiten der Buchbranche ein. Sie bilden eine Auswahl der in WCAG 2.1 („Web Content Accessibility Guidelines“) aufgeführten Vorgaben für barrierefreie Websites und sollen damit den Zugang zum Thema vereinfachen.
Die für die Produktdarstellung und die Produktsuche barrierefreier Produkte notwendigen Informationen werden in den Metadaten der Produkte gemeldet. Die Metadatenmeldung in ONIX, dem XML-Metadatenformat der Buchbranche, stellt die Basis für die Hinweise dar, die weiter unten in Abschnitt 8 zur Produktdarstellung und Produktsuche gegeben werden. Die wichtigen ONIX-Listen für die Darstellung von Barrierefreiheit von Produkten sind die folgend genannten: Liste 175 <ProductFormDetail>, oder short tag <b333> listet Produktinformationen zu den DAISY Standards (Digital Accessible Information System) und zu Blindenschriften. Liste 79, <ProductFormFeatureType> oder short tag <b334> Informationen zu Schriftgrößen und zur Zugänglichkeit von eBooks (E-publication Accessibility), die in Liste 196 <ProductFormFeatureValue>, in short tag <b335>, näher beschrieben werden (z. B. LIA Compliance Scheme). Textliche Darstellung der Zugänglichkeit erfolgt im Freitext via tag <ProductFormFeatureDescription> bzw. short tag <b336>. In Liste 145 <EpubUsageType> oder short tag <x318> findet sich die auf Produktebene getroffene Festlegung für die Zulässigkeit der Text-to-speech-Funktionalität. Die Informationen werden zur Darstellung des Produktes herangezogen und können über die strukturierte Verwendung im Suchindex auch als Filter und Facettensuche in Shops implementiert werden.
Tipp: Zur übersichtlichen und einfachen Überprüfung der Überschriftenhierarchien auf Websites kann man die Browser-Erweiterung HeadingsMap für Google Chrome, Mozilla Firefox etc. als hilfreiches Add-on installieren und sich einen schnellen Überblick über die korrekte Strukturierung verschaffen. Empfohlen werden ausschließlich Prüfwerkzeuge, die im Web frei verfügbar sind (siehe Linkliste).
Tipp: Ein wesentlicher Aspekt digitaler Barrierefreiheit ist es, Inhalte zu strukturieren und semantisch auszuzeichnen und somit für alle Menschen zugänglich zu machen, unabhängig von der Art eines Endgerätes und der verfügbaren Benutzeroberfläche. Nicht zuletzt ist ein barrierefreier Zugang auch für das Ranking der Website für Suchmaschinen von Vorteil. Sogenannte Webcrawler ermöglichen Ihnen somit eine größere Reichweite Ihrer Produkte und Dienstleistungen.
Für die barrierefreie Gestaltung von Websites und Apps gelten die gleichen Bedingungen wie für gedruckte Dokumente. Besondere Beachtung verdienen Schriftart und Schriftgröße, Strichstärke, Schriftweite, aber auch Zeichen- und Zeilenabstand und beim Blick auf die gesamte Textseite Hervorhebungen, Kontraste und Farben.
Die Seite www.leserlich.info des Deutschen Blinden- und Sehbehindertenverbandes (DBSV) bietet alles Wissenswerte dazu in übersichtlicher, gut gegliederter, komprimierter und einfach aufbereiteter Form.
Alle Fragen rund um Schrift und Leserlichkeit von Schriften und Texten beantwortet darüber hinaus die DIN 1450:2013-04 (ein Dokument von etwa 26 Seiten).
Es gibt zumindest zwei entwickelte Piktogramme im Zusammenhang mit Barrierefreiheit: Ein Icon für die Bebilderung von Videos in deutscher Gebärdensprache und ein weiteres Icon zur Kennzeichnung einfacher Sprache (https://www.bundesfachstelle-barrierefreiheit.de/DE/Praxishilfen/Information-und-Kommunikation/Logos/logos_node.html).
Einige Lesegeräte und Lese-Apps bringen eine Vorlesefunktion mit, mit der sich Textinhalte vorlesen lassen. Dabei erscheint auf dem Bildschirm eine Art Player mit Tasten zum Starten und Stoppen des Vorlesens sowie zum Vor- und Zurückspulen (ähnlich wie man es auch von Video-Playern kennt). Diese Vorlesefunktion ist unter anderem für Menschen mit Legasthenie oder auch für sehbehinderte Menschen praktisch, die das Ausgabegerät bzw. die Leseanwendung grundsätzlich sehend bedienen können, aber Schwierigkeiten beim Lesen von Texten haben. Für blinde Menschen reicht diese Vorlesefunktion allein nicht aus, da sie die Schaltflächen des Players nicht sehen und damit auch nicht bedienen können. Sie benötigen eine Vorlesesoftware.
Eine Vorlesesoftware (auch Screenreader genannt) ermöglicht es blinden Menschen, Ausgabegeräte mit einer grafischen Benutzeroberfläche, wie Computer oder Smartphone, zu bedienen. Dazu werden sämtliche Bildschirminhalte – seien es Schaltflächen, Menüs, Texte, Abbildungen oder Ähnliches – akustisch ausgegeben. Gesteuert wird die Vorlesesoftware je nach Ausgabegerät per Tastatur, über Gesten oder andere Eingabegeräte. Der Funktionsumfang einer Vorlesesoftware bzw. eines Screenreaders geht also noch deutlich über den einer Vorlesefunktion hinaus.
Eine Vorlesefunktion für Websites oder mobile Anwendungen ist gesetzlich nicht vorgeschrieben.
Die visuellen und auditiven Inhalte eines Videos sind für Menschen mit Seh- oder Hörbehinderung und auch weitere Zielgruppen häufig nicht wahrnehmbar. Daher braucht es Alternativen, z. B. Transkription, Untertitel und/oder Audiodeskription), damit die Videoinhalte für verschiedene Zielgruppen wahrnehmbar werden. Sofern ein Video nicht allein mittels <video>-Element und zugehörigen Attributen in HTML eingebunden ist, muss weiterhin darauf geachtet werden, dass auch der Video-Player barrierefrei bedienbar ist.
Damit Inhalte einer Audio-Datei (z. B. ein Literaturpodcast) für Menschen mit Höreinschränkungen wahrnehmbar sind, muss eine Transkription bereitgestellt werden, die sämtliche auditiven Informationen (z. B. Sprache, Dialoge, Geräusche etc.) in Textform abbildet.
Achten Sie bei der Einbindung von Inhalten Dritter darauf, dass diese möglichst konkret bezeichnet werden:
Produktsuchen sind meist mittig auf einer Website platziert, Detailsuchen über den Webseiteninhalt an sich befinden sich in der Regel oben rechts auf einer Startseite.
Um eine Vorstellung davon zu erhalten, wie lesebehinderte Menschen auf Webseiten mit Barrieren bspw. Suchfunktionen nicht finden oder Formulare sowie Fehlermeldungen nicht ohne erheblichen Aufwand erschließen können, bietet ‘Access and Use’ kurze, eingängige Videoszenarien dazu an und beleuchtet ebenso Hintergründe zu den Hürden: https://accessuse.eu/de/formulare-fehlerbehandlung.html.
Produktsuchen (mit oder ohne Autovervollständigung) werden auch Kombinationsfeld oder Combobox genannt. Sie sind Bedien- bzw. Formularelemente, die die Funktionen von Eingabe- und Auswahlfeld kombinieren. Nutzer*innen haben damit die Möglichkeit, einen eigenen Suchbegriff einzugeben und/oder einen Suchbegriff aus einer Liste vorgeschlagener Möglichkeiten auszuwählen.
Je nach Funktionsweise lassen sich vier Arten der Autovervollständigung für Kombinationsfelder unterscheiden:
Bei der Umsetzung eines barrierefreien Kombinationsfeldes ist darauf zu achten, dass die Liste mit den vorgeschlagenen Auswahlmöglichkeiten auch für blinde Menschen wahrnehmbar ist. Dafür gibt es verschiedene Ansätze:
Produktbeschreibungen oder Detailansichten zu einem Produkt sollten aussagekräftig, kurz und prägnant gehalten werden und, wenn vorhanden, Bildalternativen bereithalten. Wenn es allgemeingültige Bestimmungen hinsichtlich der Metadaten zur Anzeige der Barrierefreiheit von Produkten geben wird, sollten diese hier ebenso auffindbar platziert werden. Möglich sind auch Labels (grafisch oder alternativ beschrieben) als Qualitätssiegel hinsichtlich der Produktbarrierefreiheit.
Interaktive Elemente einer Website sind meist übergeordnete Inhalte, die einfache Texte, Bedienelemente oder Multimedia-Inhalte enthalten. Sämtliche dazugehörende Schaltflächen und Formularfelder müssen über die Tabulator-Taste und ggf. Pfeiltasten erreichbar und/oder bedienbar sein. Beispiele dafür können sein:
Über die jeweils passenden HTML-Elemente sollten diese interaktiven Bedienelemente realisiert werden. Zu beachten ist auch, dass Anwendungen wie virtuelle 3D-Rundgänge einer ergänzenden bzw. zusätzlichen Medienalternative bedürfen, um dadurch reduzierter und linearer erfassbar zu werden. Das Gleiche gilt für Videoeinbindung oder geografische Karten zur Navigation.
Websites und deren Anwendungen können ebenso über Sprachein- und -ausgabe gesteuert werden. Besonders hilfreich ist diese Technik für Menschen mit Seh- oder motorischen Behinderungen, aber auch in Situationen, wo man auf Sprachsteuerung angewiesen ist, weil man beispielsweise keine Hand zur Bedienung frei hat. Die Voice Browser Working Group des W3C hat einen aktuellen Entwurf der Voice Browser Call Control: CCXML Version 1.0 veröffentlicht. CCXML ergänzt die Sprache VoiceXML.
Für die Tastaturbenutzer ist es wichtig zu sehen, wo sich der Tastaturfokus gerade befindet, welcher Link also ausgelöst wird, wenn sie die Enter-Taste drücken. Man muss erkennen können, wo man sich mit der Maus und Tabulator-Taste aktuell auf der Website befindet. Die vom Browser vorgesehene Kennzeichnung des Tastaturfokus hebt sich von dunklen Seitenhintergründen meist nicht so gut ab. Dies muss zum Beispiel durch farbige Hinterlegung des angesteuerten Links ausgeglichen werden. Hinweise zur Umsetzung in HTML finden Sie hier: https://www.einfach-fuer-alle.de/artikel/tastaturfokus/ (Mouse-Over, Highlight-Funktion; z. B. color / background-color oder outline für :hover/:focus (CSS))
Die Nutzenden von Websites sollten die Schriftgröße nach ihren Bedürfnissen einstellen können. Es ist sicherzustellen, dass bei einem Zoomfaktor von 200 % sowie auch auf kleinen Smartphones alle Funktionen bedienbar und alle Inhalte lesbar (ohne zeilenweises Hin- und Herscrollen) sind. Es darf zu keinen Überlagerungen, keinem Verschwinden von Text/Elementen kommen. Ein horizontales Scrollen innerhalb eines Seitenbereiches soll vermieden werden. Alle Buttons oder Formularelemente sollten sichtbar und nutzbar bleiben.
Hinsichtlich der Barrierefreiheit gelten für Warenkorb, Check-Out oder Bestellvorgänge auf Websites prinzipiell die gleichen Anforderungen wie für alle anderen Websitebereiche. Es muss jedoch klar erkenntlich sein, dass z. B. eine Ware im Shop in den Warenkorb gelegt oder eine genaue Anzahl Bücher der Merkliste hinzugefügt wurden. Dies wird mittels einer Statusnachricht realisiert, die eine Inhaltsveränderung anzeigt, die aber keine Kontextänderung ist. Sie gibt dem Nutzer Informationen über Erfolg/Fehler/Ergebnis einer Aktion, über den Wartestatus einer Anwendung („Bitte warten!“) oder über den Fortschritt eines Prozesses.
Wird die Statusnachricht mit einer Markup-Sprache (z. B. HTML) realisiert, wird sie über geeignete Rollen oder Eigenschaften für assistive Technologien zur Ausgabe bereitgestellt, ohne dass sie den Fokus erhält. Umgesetzt werden kann es wie folgt: https://www.w3.org/TR/wai-aria-1.1/#live_region_roles
CAPTCHAs (Mensch-Maschine-Authentifizierung) sind sogenannte Nicht-Text-Inhalte und müssen als solche durch eine Textalternative gekennzeichnet werden. Es sollten alternative Formen von CAPTCHAs für andere sensorische Wahrnehmungen bereitgestellt werden. Möglich sind auch Frage-CAPTCHAs mit einfachen und logischen Fragen. Das World Wide Web Consortium (W3C) hat in einem Artikel die generelle Sicherheit von CAPTCHAs infrage gestellt und Alternativen zu CAPTCHAs an sich aufgeführt: https://www.w3.org/TR/turingtest/
Neben einer schnellen, intuitiven, logischen und auffindbaren Platzierung essentieller Elemente (Warenkorb ist rechts oben, Suche ist oben mittig oder rechts, Registrieren, Login, Sprachwahl ebenso oben rechts etc.) sollte auch die Reihenfolge der Formularfelder während eines Kaufprozesses linear und erwartbar sein. Es muss sichergestellt werden, dass ein Onlineshop auch ohne die Verwendung einer Maus navigierbar ist.
Wenden Sie sich an Ihren Bezahldienstleister (Amazon, DKB etc.), wenn dessen Website, auf die Ihre Käufer weitergeleitet werden, nicht barrierefrei ist.
Für die Website-Tests werden nach aktuellem Stand in erster Linie die Werkzeuge verwendet, welche in der Werkzeugliste des BITV-/WCAG-Tests aufgeführt sind. Ergänzend dazu gibt es dort eine Reihe von Browser-Erweiterungen oder Bookmarklets, die man leicht implementieren und anwenden kann.
Vom W3C empfohlene Werkzeuge sind im Folgenden aufgeführt. Vielfach werden vom W3C automatische Syntax-Validatoren für HTML erwähnt, außerdem kostenpflichtige Angebote, Kontrast-Checker, Prüftools zum Leseniveau (allerdings nur für englische Sprache), nützliche Bookmarklets und allgemein Tools, die eher Webentwicklern als Prüfpersonen helfen.
Über Online-Anbieter für Accessibility Checker oder Tools, wie ‘axe’ oder ‘siteimprove’, können keine allgemeingültigen Empfehlungen ausgesprochen werden. Sie sind generell hilfreich, jedoch sollte man genau prüfen, ob alle relevanten Fehler durch die Software gemeldet werden, ob bestimmte Dinge so von der WCAG gefordert sind oder keine Fehler darstellen.
Im vorliegenden Barrierefreiheitsstärkungsgesetz der Bundesregierung werden auch auf Mobilgeräten angebotene Dienstleistungen, einschließlich mobile Anwendungen (Apps), einbezogen.
Auch hier sind – bis auf Widerruf – die Anforderungen der aktuellen WCAG 2.1 (Konformitätsstufen A und AA) wie bei Websites einzuhalten. Die zugrundeliegende europäische Norm sei hier im Detail für mobile Anwendungen verlinkt: EN 301 549, Version 3.1.1 (PDF, englischsprachig), siehe Anhang A, Tabelle A2.
Vom W3C wird derzeit für das Testen von Apps folgende Anwendung empfohlen: forapp.org. Es handelt sich hierbei um einen Online-Service, der Apps testet. Da ein persönlicher Account erforderlich ist, sollte man prüfen, ob Kosten anfallen.
Wenden Sie sich auch hier an Ihren App-Store-Anbieter, sollte dessen Website-Umgebung, auf die ggf. weitergeleitet wird, nicht barrierefrei sein.
Die Seite der Knappschaft Bahn See bietet eine erste Orientierung zu grundlegenden Fragen rund um die Zugänglichkeit von Informationen und die barrierefreie Kommunikation im Netz.
Die Seite des Deutschen Blinden- und Sehbehindertenverbandes mit allen wichtigen Praxistipps zur barrierefreien Gestaltung von Texten.
Fast alles Wissenswerte rund um die Gestaltung von Websites und Dokumenten, gut strukturiert und barrierefrei aufbereitet durch die Aktion Mensch!
Unter dem Namen BIK (barrierefrei informieren und kommunizieren) haben sich verschiedene Initiativen und Projekte zusammengeschlossen und informieren unter anderem im Rahmen des BITV-Tests über das „Verfahren zur umfassenden und zuverlässigen Prüfung der Barrierefreiheit von Websites und Webanwendungen auf Basis der BITV 2.0 / EN 301 549”.
Zahlreiche nützliche, halbautomatische Funktionen und Prüfungen auf Zugänglichkeit für Webseiten.
Werkzeug für die Prüfung von Kontrasten auf Webseiten.
Tutorial: Untertitel erstellen am Beispiel von YouTube.
Tutorial: Untertitel erstellen mit Aegisub, SRT-Untertitel-Dateien erstellen.
Tutorial: Audiodeskription erstellen mit Movie Maker.
