INHALTSVERZEICHNIS

• Was ist Sinn und Zweck des BFSG?
• Diese Funktionalitäten setzt Libri um:
  • Kontrastanpassung
  • Slider pausieren
  • Tastaturbedienbarkeit mittels „Tabstopp“-Taste der Tastatur
  • Screenreader-Kompatibilität
• Hier müssen Sie aktiv werden:
  • Barrierearme Gestaltung von Bildern und Bannern
    • Vermeidung von Text auf Bannern
    • Hochkontrastige Bild-Gestaltung
  • Eigene Texte möglichst in einfacher Sprache formulieren
  • Alt-Texte (Bildbeschreibung)
    • … selbst schreiben
    • … mit KI generieren
  • Vorteilslogos, Footer-Links und Gutscheinmotive in den Grundeinstellungen anpassen
• Diese Elemente liegen in Ihrer Eigenverantwortung:
  • Vorschaltseiten
  • HTML-Module
  • Eigenes CSS
• Hilfreiche Tools
• Weitere Fragestellungen

Was ist Sinn und Zweck des BFSG?

„Eine inklusive Gesellschaft, in der alle Menschen ein selbstbestimmtes Leben führen, ist unser Ziel – in Deutschland und Europa. Ein wichtiger Schritt dorthin ist die Barrierefreiheit. Soweit es um Produkte und Dienstleistungen geht, fördert das Barrierefreiheitsstärkungsgesetz (kurz: BFSG) die gleichberechtigte und diskriminierungsfreie Teilhabe von Menschen mit Behinderungen, Einschränkungen und älteren Menschen. Mit dem BFSG wird die EU-Richtlinie zur Barrierefreiheit (European Accessibility Act, kurz: EAA) umgesetzt.“

Quelle: https://www.bmas.de/DE/Service/Gesetze-und-Gesetzesvorhaben/barrierefreiheitsstaerkungsgesetz.html

Das Barrierefreiheitsstärkungsgesetz (BFSG) tritt am 28.06.2025 in Kraft. In Deutschland sind etwa 15 % der Bevölkerung auf barrierefreie Websites angewiesen. Knapp 10 % der Bevölkerung haben eine anerkannte Schwerbehinderung. Der Bevölkerungsanteil, der durch das Gesetz unterstützt werden soll, wächst zudem nicht unbeträchtlich durch die alternde Gesellschaft. Barrierefreie Inhalte müssen wahrnehmbar, bedienbar, verständlich und robust, d.h. technologieunabhängig, sein.

Zur Verdeutlichung folgende Beispiele: 

Die Notwendigkeit, digitale Produkte so zu gestalten, dass sie für alle zugänglich und nach individuellen Bedürfnissen anpassbar sind, ist gegeben und wird durch das BFSG gefördert. Das Gesetz bietet Ihnen somit die Chance, neue Zielgruppen anzusprechen oder Ihren eShop für Bestandskund*innen benutzerfreundlicher zu gestalten. Zusätzlich wirkt sich eine barrierefreie Gestaltung Ihrer Website positiv auf Ihr SEO-Ranking in den Suchmaschinen aus.

Aber keine Sorge: Libri kümmert sich! Libri schafft die Grundlagen für die barrierefreie Nutzung über alle Geräte sowie für die BFSG-konforme Content-Pflege für Libri und Sie als Buchhändler*innen. Dazu wurde die HTML-Struktur der Shops grundlegend überarbeitet und neue Funktionalitäten umgesetzt.

Unser Anspruch ist, dass Sie sich mit einfachen und benutzerfreundlichen Möglichkeiten im CMS auf die Ergänzung und Anpassung ihrer eigenen Inhalte konzentrieren können.  Weiterhin hat Libri mit Blick auf das BFSG neue Funktionalitäten geschaffen und bestehende ergänzt.

Diese Funktionalitäten setzt Libri um:

Kontrastanpassung

Libri.Shopline bietet den Nutzer*innen nun ein Feature zur Anpassung des Kontrastverhältnisses. Diese systemweite Funktion ermöglicht, zwischen der Standard-Darstellung und einer Version mit erhöhtem Kontrast umzuschalten. In der kontrastreichen Ansicht erscheinen die Shop-Elemente in einer klaren Schwarz-Weiß-Darstellung. Die Nutzer*innen können diese Option über eine klar erkennbare Schaltfläche im Shop aktivieren, wobei die Einstellung während der gesamten Sitzung aktiv bleibt. Das Feature stellt somit eine Alternative zur Standard-Farbdarstellung Ihres Shops bereit und kann die Lesbarkeit der Inhalte für bestimmte Nutzergruppen, ohne eine grundlegende Prüfung und Anpassung Ihrer spezifischen Buchhandlungs-Corporate-Identity, verbessern. 

Mit dieser Funktion kommen wir nicht nur den Anforderungen des BFSG nach, sondern möchten vor allem den Endkund*innen ein angenehmes und barrierearmes Einkaufserlebnis ermöglichen. 

Bitte beachten Sie, dass sich der Hochkontrast-Modus nicht auf Bilder und andere hochgeladene Medien auswirkt. Diese bleiben in ihrer ursprünglichen Farbdarstellung erhalten, weshalb es besonders wichtig ist, bei der Auswahl und Gestaltung dieser Elemente auf ausreichende Kontraste und gute Lesbarkeit zu achten.

Mehr Infos zur barrierearmen, kontrastreichen Gestaltung von Medien finden Sie hier.

Slider pausieren

Das Modul „XL-Banner als Slider“ wird um eine Pause-Funktion erweitert. Der neu integrierte Pause-Button ermöglicht es den Nutzer*innen des Shops, die automatische Bildabfolge des Sliders nach Bedarf anzuhalten. Auch dieses Feature verbessert die Zugänglichkeit Ihres Shops, da die präsentierten Inhalte nun für einen selbstgewählten Zeitraum betrachtet und gelesen werden können. 

Die Pause-Funktion ist seit dem 09.04.25 standardmäßig im „XL-Banner als Slider”-Modul integriert und erfordert keine zusätzliche Konfiguration Ihrerseits.

Tastaturbedienbarkeit mittels „Tabstopp“-Taste der Tastatur

 Die Nutzer*innen Ihres Shops können durch wiederholtes Drücken der Tab-Taste alle interaktiven Elemente des Online-Shops in einer logischen Reihenfolge ansteuern und bedienen. Dies umfasst Menüpunkte, Suchfelder, Produktkategorien, Artikel-Auswahl, Bestellprozesse und Co. Die Tab-Navigation ermöglicht es, ohne Verwendung einer Maus durch den gesamten Shop zu navigieren. Jedes angewählte Element wird dabei visuell hervorgehoben (durch einen schwarzen Rahmen), um die aktuelle Position klar erkennbar zu machen. Eingabefelder und -aufforderungen, wie beispielsweise die Suchfunktion oder der Bestellprozess, können vollständig per Tastatur ausgefüllt und abgesendet werden.

Diese Verbesserung der Tastaturbedienbarkeit erhöht die Zugänglichkeit des Shops für Menschen mit eingeschränkter Mobilität oder für Nutzer*innen, die aus anderen Gründen keine Maus verwenden können oder möchten.

Screenreader-Kompatibilität

Um die Barrierefreiheit zu verbessern, wurde die Kompatibilität des Shop-Systems mit Screenreadern optimiert. Screenreader sind Hilfsprogramme, die von Menschen mit Sehbehinderungen genutzt werden, um digitale Inhalte zu erfassen. 

Die Verbesserung der Screenreader-Kompatibilität des Shop-Systems versteht sich als fortlaufender Prozess und wird insbesondere durch das Einfügen von Alternativ-Texten  (Alt-Texte) für Bilder und Grafiken begünstigt, welche fortlaufend auch durch Sie zu ergänzen sind. Diese Textalternativen ermöglichen es Screenreadern, den Inhalt von visuellen Elementen zu erfassen und an die Nutzer*innen weiterzugeben. Mehr Infos zur Pflege der Alternativtexte finden Sie hier.

Des Weiteren umfasst die Optimierung der Screenreader-Kompatibilität Aspekte wie: 

• unsichtbare sog. Skip-Links und Landmarks, die einen schnellen Sprung zu den Hauptinhalten der Seite und der Suche ermöglichen
• Information an den Screenreader beim Ändern der Seiteninhalte
• verbesserte Seitentitel, die vom Browser in der Tab-Überschrift angezeigt werden
• detaillierte Screenreader-Beschreibungen für Links und Buttons

  
  

Hier müssen Sie aktiv werden:

Barrierearme Gestaltung von Bildern und Bannern

Vermeidung von Text auf Bannern

Um die Barrierefreiheit Ihres Shops zu verbessern, empfehlen wir, Text auf Bannern und Grafiken möglichst zu vermeiden, da dieser von Screenreadern nicht erfasst werden kann. 

Sollte die Verwendung von Text in Bildern und auf Bannern unvermeidbar sein, ist es zwingend erforderlich, aussagekräftige Alt-Texte für diese Banner und Grafiken bereitzustellen.

Hochkontrastige Bild-Gestaltung

Da das Hochkontrast-Feature des Shops keine Bilder einschließt, ist es wichtig, bei der Erstellung und Auswahl von Bildern und Grafiken ein besonderes Augenmerk auf Kontrast und Lesbarkeit zu legen. 

Verwenden Sie möglichst Bilder mit klaren Konturen und deutlichen Farbunterschieden. Für Grafiken und Infobilder empfiehlt sich von vorherein die Verwendung kontraststarker Farbkombinationen, wie Schwarz auf Weiß oder dunkle Farben auf hellem Hintergrund. Vermeiden Sie Pastelltöne oder ähnliche Farbnuancen nebeneinander. 

Wenn Text in Bildern unvermeidbar ist, wählen Sie große, klare Schriftarten und stellen Sie einen starken Kontrast zum Hintergrund sicher.

Eigene Texte möglichst in einfacher Sprache formulieren

Einfache Sprache ist ein wirkungsvolles Mittel, um Inhalte zugänglich und verständlich zu machen. Hier sind einige Tipps zur Formulierung ihres Contents in einfacher Sprache:

1. Kurze Sätze: Verwenden Sie kurze und prägnante Sätze, die direkt den Kern der Botschaft treffen.
2. Verständliche Wörter: Vermeiden Sie Fachbegriffe. Falls notwendig, erläutern Sie diese in einfachen Worten.
3. Aktive Sprache: Nutzen Sie aktive statt passive Formulierungen, um Ihre Texte lebendiger und direkter zu gestalten.
4. Übersichtliche Struktur: Gliedern Sie Ihre Texte klar, beispielsweise durch Absätze und Überschriften, um die Informationen logisch zu präsentieren.
5. Direkte Ansprache: Sprechen Sie Ihre Leser direkt an und ermutigen Sie Fragen, um Unklarheiten zu vermeiden.
6. Konzentration auf Wesentliches: Fokussieren Sie sich auf das Wesentliche und überladen Sie Ihre Texte nicht mit Informationen.

Einfache Sprache ist respektvoll und zielgerichtet, und trägt dazu bei, dass Ihre Botschaft klar und deutlich verstanden wird.

Alt-Texte (Bildbeschreibung)

Für eine effektive Umsetzung empfehlen wir folgendes Vorgehen:

1. Bei allen neu hinzugefügten Bildern und Bannern sollten Sie stets aussagekräftige Alt-Texte einfügen.
2. Für bereits bestehende Bilder im Shop sollten die Alt-Texte schrittweise nachgepflegt werden.

… selbst schreiben

Wenn Sie im Shop Bilder in Module hochladen, haben Sie sicher schon das Feld „Alt-Text“ gesehen. Diesem kommt durch das BFSG eine gestärkte Bedeutung zu. Ein guter Alt-Text macht den Inhalt für alle Nutzer*innen zugänglich, unabhängig davon, ob sie das Bild sehen können oder nicht.

Um einen idealen Alt-Text für ein Bild oder Banner kurz und knackig zu schreiben, hier einige Tipps:

1. Seien Sie präzise und beschreibend: Erfassen Sie das Wesentliche des Bildes in wenigen Worten.
2. Halten Sie sich kurz: Ziel sind etwa 125 Zeichen oder weniger.
3. Fokussieren Sie sich auf relevante Details: Beschreiben Sie, was für den Kontext und Inhalt wichtig ist.
4. Verwenden Sie natürliche Sprache: Schreiben Sie, als würden Sie jemandem das Bild beschreiben.
5. Verzichten Sie auf "Bild von" oder "Foto zeigt": Beginnen Sie direkt mit der Beschreibung.
6. Wenn Text-Elemente im Bild vorhanden sind, erwähnen Sie diese in der Bildbeschreibung.

… mit KI generieren

 Zum Generieren von Alt-Texten können auch ChatGPT und andere KI-Tools genutzt werden. Dazu muss einfach das Bild hochgeladen und ein kurzer Befehl (z.B. „Schreibe mir für das Bild einen kurzen Alt-Text zum direkt kopieren ohne Hinweise wie „Alt-Text:“) mitgegeben werden und innerhalb kürzester Zeit liegt eine Bildbeschreibung vor, die direkt in den Shop eingefügt werden kann.

Vorteilslogos, Footer-Links und Gutscheinmotive in den Grundeinstellungen anpassen

Im Rahmen der Barrierefreiheit sind auch die Grundeinstellungen Ihres Shops von Relevanz. Hier können Sie zukünftig an mehreren Stellen Alternativ-Texte pflegen, um die Zugänglichkeit Ihres Online-Shops zu verbessern.

Diese Elemente liegen in Ihrer Eigenverantwortung:

Während wir zentral viele Aspekte der Barrierefreiheit im Shop-System umsetzen, gibt es Bereiche, die in Ihrer Verantwortung als Shop-Betreiber liegen. Dies betrifft insbesondere

• Vorschaltseiten
• HTML-Module
• Ihr eigenes CSS

Vorschaltseiten

Vorschaltseiten sind nicht Teil des standardisierten Shop-Systems und werden daher nicht von den zentralen Barrierefreiheitsanpassungen erfasst. Sollten Sie eine Vorschaltseite nutzen, liegt es in Ihrer Verantwortung sicherzustellen, dass diese den Anforderungen des BFSG entspricht. Es empfiehlt sich, diese Seiten regelmäßig auf ihre Barrierefreiheit zu überprüfen und gegebenenfalls bei Ihrem Hosting-Anbieter anzupassen. Achten Sie hier unter anderem auf:

• Korrekte Verwendung von Überschriften-Hierarchien (H1, H2, H3 etc.)
• Aussagekräftige Alt-Texte für Bilder
• Sinnvolle Beschriftungen für Links und Buttons
• Ausreichende Farbkontraste für Text und Hintergrund

HTML-Module

Wenn Sie benutzerdefinierte HTML-Module in Ihrem Shop verwenden, müssen Sie sicherstellen, dass diese den Richtlinien für Barrierefreiheit entsprechen. Berücksichtigen Sie auch hier unter anderem:

• Korrekte Verwendung von Überschriften-Hierarchien (H1, H2, H3 etc.)
• Aussagekräftige Alt-Texte für Bilder
• Sinnvolle Beschriftungen für Links und Buttons
• Ausreichende Farbkontraste für Text und Hintergrund

Eigenes CSS

Falls Sie eigenes CSS zur Anpassung Ihres Shop-Designs verwenden, beachten Sie bitte:

• Vermeiden Sie absolute Schriftgrößen, um die Skalierbarkeit zu gewährleisten
• Stellen Sie sicher, dass Ihre Farbkombinationen ausreichende Kontraste bieten
• Testen Sie Ihr CSS mit verschiedenen Bildschirmgrößen und Zoomstufen

Hilfreiche Tools

Die Barrierefreiheit Ihrer eigenen Inhalte können Sie jederzeit selbst prüfen. Folgende Beipiele für Erweiterungen von Drittanbietern für Ihren Browser können Ihnen eine Hilfe sein, um sich Aspekte anzuschauen wie:

• Kontrastverhältnis der Website oder auch einzelner Bilder, Textelemente und Co.
• Fehlende Alt-Texte
• Simulation von Fehlsichtigkeit

Die Liste dient zu Ihrer Unterstützung und erhebt keinen Anspruch auf Vollständigkeit. Wir bitten um Verständnis, dass Libri keinen Einfluss auf die Verfügbarkeit der Drittanbieter-Erweiterungen hat und keinerlei Gewähr für die Funktion der Drittanbieter-Erweiterungen übernehmen kann.

Weitere Fragestellungen

Der Börsenverein des Deutschen Buchhandels hat auf seiner Website eine Vielzahl an Informationen zu den Themen digitale Barrierefreiheit und BFSG zusammengestellt, z.B.:

• Barrierefreiheit - Börsenverein
• Gesetzliche Anforderungen und Standards für Verlagsprodukte und -dienstleistungen - Börsenverein
• Leitfaden zur Barrierefreiheit von Webseiten - Börsenverein

Zur Klärung weiterführender Fragen wenden Sie sich bitte an den Börsenverein. Libri kann Ihnen keine Rechtsberatung anbieten, aber der Börsenverein steht Ihnen mit umfassender Unterstützung zur Seite.