BassHum | Agentur Plietsch

BassHum.de

Auf BassHum.de finden Hobby- und Profigärtner der Region Qualitätskompost und andere hochwertige Gartenprodukte. Ab jetzt haben so viele Menschen Zugriff auf die Produktpalette der Humus-Vermarktungs-GmbH wie nie zuvor: Denn wir implementierten nicht nur einen Online-Shop auf der Website, sondern machten sie auch gemäß dem 2025 in Kraft tretenden Barrierefreiheitsstärkungsgesetz barrierefrei.

Barrierefreie Websites

Eine barrierefreie Website kann von allen Menschen genutzt werden, ohne dass jemand auf Inhalte oder Funktionen verzichten muss. Auch NutzerInnen mit Beeinträchtigungen erhalten so vollen Zugang. Barrierefreie Websites haben darum zwei klare Vorteile: Sie erreichen mehr Menschen und sind grundsätzlich einfacher zu bedienen. Das fördert die Zufriedenheit aller Nutzer. Darüber hinaus steigt die Website auch im organischen Suchmaschinenranking, denn Google belohnt barrierefreie Seiten.

Das Barrierefreiheitsstärkungsgesetz (BFSG) gilt ab 28. Juni 2025 und verpflichtet Websites und Apps dazu, allen Menschen Zugang zu ihren Produkten und Dienstleistungen zu gewähren.

CMS-Umzug & Shop

Die Webseite befand sich zu Beginn des Projekts noch in einem überholten Content-Management-System. Der erste Schritt war deshalb der Umzug in das vom Kunden global genutzte CMS Contao. Dazu bauten wir die Seite eins zu eins nach und konnten gleichzeitig die unten beschriebenen Barrierefreiheitsmaßnahmen direkt umsetzten.

Außerdem modernisierten wir dabei den Bestellprozess. Bisher konnten Produkte nur per E-Mail bestellt werden. Dieser Vorgang sollte vereinfacht und automatisiert werden: Deshalb implementierten wir einen vollständigen Online-Shop inklusive Warenkorb und Online-Bezahlfunktion.

Navigation

Damit sich jeder einfach auf der Website zurechtfinden kann, ist eine unkomplizierte Navigation wichtig. Darum richteten wir Skip Links ein, die es Besuchern ermöglichen, leichter zwischen Bereichen zu navigieren. Davon profitieren z.B. sehbeeinträchtigte Menschen, aber auch Nutzer, die keine Maus bedienen können. Außerdem passten wir die Slider und das Menü an, sodass diese jetzt ebenfalls mit der Tastatur bedienbar sind.

Text & Formulare

Um die Texte für Screenreader lesbar zu machen, definierten wir die HTML-Überschriften und Zwischenüberschriften neu und strukturierten die Texte gemäß ihrem natürlichen Aufbau. Menschen mit Sehbehinderung können jetzt leichter durch die Inhalte navigieren. Darüber hinaus erhöhten wir an einigen Stellen den Kontrast zwischen Text und Hintergrund für eine bessere Lesbarkeit.

Im Text integrierte Links haben wir zusätzlich zur farbigen Markierung durch Unterstreichung gekennzeichnet. Redundante Links wurden entfernt. Außerdem setzten wir Label in den Formularen, die an den Screenreader weitergeben, welche Inhalte in welchem Formularfeld gefragt sind.

Grafik von Tablet mit eingesteckten Kopfhoerern

Bilder & Videos

Damit auch seh- und hörbeeinträchtigte Menschen Zugriff zu allen Informationen haben, fügten wir dem auf der Homepage eingebetteten Video ein Transkript hinzu, das je nach Bedarf statt des Videotons gelesen oder vom Screenreader vorgelesen werden kann. Außerdem überarbeiteten wir die alternativen Texte (Alt-Tags) der in der Seite integrierten Bilder. Im HTML-Bereich der Seite ist jetzt für jedes Bild eine differenzierte Beschreibung des dargestellten Inhalts hinterlegt, die vom Screenreader erfasst und vorgelesen werden kann.