Barrierefreiheit – Konzept

Warum Barrierefreiheit wichtig ist

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.

§

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.

~20%

Reichweite

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.

SEO+

Qualität & Sichtbarkeit

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.

Ally – Barrierefreiheit von Elementor

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:

Nutzer-Widget: Besucher passen die Darstellung selbst an – Textgröße, Kontrast, Graustufen, Links hervorheben, Animationen pausieren, Lesemaske, gut lesbare Schrift.
Barrierefreiheits-Erklärung: Ally generiert die rechtlich empfohlene Erklärung (Accessibility Statement) und verlinkt sie im Widget.
Positionierung & Branding: Farbe und Position des Widget-Buttons passen wir an das Stöhr-CI an (Tyrian Purple, Position unten links – wie bereits auf der Startseite platziert).

Ansichten des Nutzer-Widgets

So präsentiert sich das Ally-Widget den Besuchern von stoehr-logistik.de (Darstellung im Stöhr-CI):

Barrierefreiheit✕

AaTextgröße

◐Kontrast

▦Graustufen

⌁Links hervorheben

⏸Animationen stoppen

▭Lesemaske

Barrierefreiheits-Erklärung · Einstellungen zurücksetzen

Screen 1 – Übersicht: Das Panel öffnet sich über den Widget-Button unten links. Alle Funktionen sind per Tastatur erreichbar.

Barrierefreiheit✕

Textgröße120 %

AaGut lesbare Schrift

↕Zeilenabstand

Änderungen wirken sofort auf die ganze Seite

Screen 2 – Text & Lesbarkeit: Stufenlose Textvergrößerung, alternative Schrift und mehr Zeilenabstand – ohne Layoutbruch.

Barrierefreiheit✕

◑Hoher Kontrast

◐Invertiert

▦Graustufen

☀Heller Modus

Kontrastmodi erfüllen WCAG-Anforderung 1.4.3

Screen 3 – Kontrastmodi: Besucher mit Sehschwäche wählen den für sie passenden Farbmodus, z. B. hoher Kontrast oder Graustufen.

Worauf technisch zu achten ist

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):

Bereich	Anforderung	Kriterium
Alternativtexte	Jedes informative Bild erhält ein aussagekräftiges `alt`-Attribut; dekorative Bilder ein leeres (`alt=""`).	1.1.1
Kontraste	Text mindestens 4,5:1 zum Hintergrund (3:1 ab 24 px). Weißer Text auf Fotos erhält Overlay oder Schlagschatten – wie im Hero der Startseite.	1.4.3
Tastatur	Alle Funktionen (Menü, Akkordeons, Scroll-to-top) sind ohne Maus bedienbar; sichtbarer Fokusring wird nie per CSS entfernt.	2.1.1 · 2.4.7
Struktur	Genau eine `h1`, logische Überschriften-Hierarchie, Landmark-Elemente (`header`, `nav`, `main`, `footer`).	1.3.1
Video	Hero-Video ist stummgeschaltet, loopt dezent und lässt sich über das Widget pausieren; kein Autoplay mit Ton.	1.4.2 · 2.2.2
Formulare & Links	Labels sind programmatisch verknüpft; Linkzweck ist aus dem Linktext erkennbar („zu den Stellenangeboten" statt „hier klicken").	2.4.4 · 3.3.2
Sprache & Titel	`<html lang="de">` ist gesetzt, jede Seite trägt einen eindeutigen `<title>`.	3.1.1 · 2.4.2
Zoom & Reflow	Seite bleibt bei 200 % Zoom und 320 px Breite nutzbar; keine feste Schriftgröße in `px` an kritischen Stellen ohne Skalierungsmöglichkeit.	1.4.4 · 1.4.10

So sieht barrierefreier Quelltext aus

1 · Bilder mit Alternativtext

✓ Richtig

<!-- informatives Bild -->
<img src="lkw-flotte.jpg"
     alt="Stöhr-Lkw-Flotte auf dem
          Betriebshof Rottenacker">

<!-- dekoratives Bild -->
<img src="s-wasserzeichen.svg" alt="">

✗ Falsch

<!-- alt fehlt komplett -->
<img src="lkw-flotte.jpg">

<!-- nichtssagend / Dateiname -->
<img src="IMG_4711.jpg"
     alt="Bild">

2 · Bedienbare Elemente: echte Buttons statt Klick-Divs

✓ Richtig

<button type="button"
        aria-expanded="false"
        aria-controls="submenu-unternehmen">
  Unternehmen – Untermenü öffnen
</button>
<ul id="submenu-unternehmen" hidden>…</ul>

✗ Falsch

<!-- nicht fokussierbar, kein Name,
     für Screenreader unsichtbar -->
<div onclick="toggle()">
  <img src="pfeil.svg">
</div>

3 · Sichtbarer Fokus & Sprunglink

✓ Richtig

/* 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>

✗ Falsch

/* Fokusring global entfernt –
   Tastaturnutzer sind orientierungslos */
*:focus { outline: none; }

4 · Bewegtbild rücksichtsvoll einsetzen

✓ Richtig

<video autoplay muted loop playsinline>
  <source src="hero.mp4">
</video>

/* Systemeinstellung respektieren */
@media (prefers-reduced-motion: reduce) {
  video { display: none; }
}

✗ Falsch

<!-- Autoplay mit Ton, keine
     Pausiermöglichkeit -->
<video autoplay>
  <source src="hero.mp4">
</video>

Umsetzung auf der neuen Startseite

Der aktuelle Nachbau der Startseite berücksichtigt diese Prinzipien bereits – hier der Stand mit Anmerkungen:

umgesetztHero: Video stumm & geloopt, Titel mit Schlagschatten für Kontrast, Menü-Button als echter <button> mit aria-label.

Teaser-Bereich mit vier Icon-Kacheln Unternehmen, Spedition, Logistik, Karriere — umgesetztTeaser: Icons dekorativ (leeres `alt`), Titel als Überschriften, ganze Kachel verlinkt mit klarem Linktext.

Aktuelles-Bereich mit drei News-Karten — umgesetztNews-Karten: Bild, Tag und „Weiterlesen"-Link in semantischer Reihenfolge; Karten-Schatten dient nur der Optik, die Information liegt im Text.

Footer mit Adressen, Copyright-Zeile und Social-Media-Icons; unten links Barrierefreiheit-Widget, unten rechts Nach-oben-Pfeil — umgesetztFooter & Widget: Ally-Button unten links im CI-Lila, Nach-oben-Button mit `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
im Web

Warum Barrierefreiheit wichtig ist

Gesetzliche Pflicht

Reichweite

Qualität & Sichtbarkeit

Ally – Barrierefreiheit von Elementor

Ansichten des Nutzer-Widgets

Worauf technisch zu achten ist

So sieht barrierefreier Quelltext aus

1 · Bilder mit Alternativtext

✓ Richtig

✗ Falsch

2 · Bedienbare Elemente: echte Buttons statt Klick-Divs

✓ Richtig

✗ Falsch

3 · Sichtbarer Fokus & Sprunglink

✓ Richtig

✗ Falsch

4 · Bewegtbild rücksichtsvoll einsetzen

✓ Richtig

✗ Falsch

Umsetzung auf der neuen Startseite

Zugänglich. Passgenau.