EHNES Hub
EHNES Hub
Warum digitale Barrierefreiheit für stoehr-logistik.de relevant ist, wie wir sie mit Ally – dem Barrierefreiheit-Tool von Elementor – umsetzen und welche technischen Anforderungen wir im Detail beachten.
Digitale Barrierefreiheit bedeutet: Alle Menschen können die Website nutzen – unabhängig von Sehvermögen, Motorik, Gehör oder kognitiven Fähigkeiten. Das ist kein Nischenthema, sondern betrifft einen erheblichen Teil der Besucher und ist seit dem 28. Juni 2025 durch das Barrierefreiheitsstärkungsgesetz (BFSG) für viele Unternehmen gesetzliche Pflicht.
Das BFSG setzt den European Accessibility Act um. Maßstab ist die EN 301 549 bzw. WCAG 2.1 Stufe AA. Verstöße können abgemahnt und mit Bußgeldern belegt werden.
Rund ein Fünftel der Bevölkerung lebt mit einer dauerhaften Einschränkung – dazu kommen situative Barrieren: Sonnenlicht auf dem Display, laute Umgebung, eine Hand am Lenkrad.
Semantisches HTML, Alt-Texte und klare Struktur verbessern zugleich Suchmaschinen-Ranking, Ladeverhalten und Wartbarkeit – Barrierefreiheit ist ein Qualitätsmerkmal.
Für Stöhr Logistik heißt das: Bewerber, Kunden und Partner erreichen alle Inhalte – vom Stellenportal bis zur Kontaktaufnahme – ohne Hürden. Das stärkt die Arbeitgebermarke und minimiert rechtliche Risiken beim Relaunch.
Wir setzen auf Ally (Web Accessibility by Elementor). Das Tool ergänzt die technisch saubere Umsetzung um ein sichtbares Bedienfeld auf der Website und unterstützende Werkzeuge im Hintergrund:
So präsentiert sich das Ally-Widget den Besuchern von stoehr-logistik.de (Darstellung im Stöhr-CI):
Ein Widget allein macht keine Seite barrierefrei – die Basis ist sauberer, semantischer Quelltext. Diese Punkte prüfen und erfüllen wir im Detail (Referenz: WCAG 2.1 AA):
alt-Attribut; dekorative Bilder ein leeres (alt="").1.1.1h1, logische Überschriften-Hierarchie, Landmark-Elemente (header, nav, main, footer).1.3.1<html lang="de"> ist gesetzt, jede Seite trägt einen eindeutigen <title>.3.1.1 · 2.4.2px an kritischen Stellen ohne Skalierungsmöglichkeit.1.4.4 · 1.4.10<!-- informatives Bild --> <img src="lkw-flotte.jpg" alt="Stöhr-Lkw-Flotte auf dem Betriebshof Rottenacker"> <!-- dekoratives Bild --> <img src="s-wasserzeichen.svg" alt="">
<!-- alt fehlt komplett --> <img src="lkw-flotte.jpg"> <!-- nichtssagend / Dateiname --> <img src="IMG_4711.jpg" alt="Bild">
<button type="button" aria-expanded="false" aria-controls="submenu-unternehmen"> Unternehmen – Untermenü öffnen </button> <ul id="submenu-unternehmen" hidden>…</ul>
<!-- nicht fokussierbar, kein Name, für Screenreader unsichtbar --> <div onclick="toggle()"> <img src="pfeil.svg"> </div>
/* Fokus deutlich sichtbar machen */ a:focus-visible, button:focus-visible { outline: 3px solid #69243E; outline-offset: 2px; } <!-- Sprunglink als erstes Element --> <a class="skip-link" href="#main"> Zum Inhalt springen </a>
/* Fokusring global entfernt – Tastaturnutzer sind orientierungslos */ *:focus { outline: none; }
<video autoplay muted loop playsinline> <source src="hero.mp4"> </video> /* Systemeinstellung respektieren */ @media (prefers-reduced-motion: reduce) { video { display: none; } }
<!-- Autoplay mit Ton, keine Pausiermöglichkeit --> <video autoplay> <source src="hero.mp4"> </video>
Der aktuelle Nachbau der Startseite berücksichtigt diese Prinzipien bereits – hier der Stand mit Anmerkungen:
<button> mit aria-label.
alt), Titel als Überschriften, ganze Kachel verlinkt mit klarem Linktext.
aria-label; Social-Icons mit Textalternativen.Nächste Schritte: Ally-Widget produktiv einbinden und konfigurieren (Farbe #69243E, Position unten links), Barrierefreiheits-Erklärung generieren und im Footer verlinken, anschließend Prüfung mit Tastatur, Screenreader (NVDA) und dem Ally-Scanner vor dem Go-live.
Barrierefreiheit ist bei Stöhr Logistik kein Nachtrag, sondern Teil des Qualitätsversprechens – rechtssicher nach BFSG, technisch sauber nach WCAG 2.1 AA und für alle Besucher spürbar komfortabler.
www.ehnes-digital.de