Die HeiReS WordPress-Webseite wurde hin zu Barrierefreiheit überarbeitet
Die Herausforderung
Die Webseite der HeiReS GmbH besteht seit über 13 Jahren und ist mit dem Unternehmen gewachsen, komplex in Struktur und Design, tief verwurzelt in WordPress. Ursprünglich stand Barrierefreiheit dabei nicht im Fokus. Mit wachsendem Bewusstsein war bald klar: Ein einfaches „nebenher barrierefrei“ reicht nicht aus.
Doch wie setzt ein kleines Unternehmen mit weniger als zehn Mitarbeitenden eine rundum barrierefreie Webseite um, ohne das Projekt finanziell oder personell zu überfrachten?
HeiReS stellte sich der Herausforderung mit begrenzten Ressourcen ein funktionierendes, modernes und barrierefreies digitales Schaufenster zu schaffen.
Die Lösung
Priorisierung statt Perfektion
Statt Barrierefreiheit als Zusatz zu behandeln, wurde sie zum Leitmotiv des Relaunchs. Der Fokus lag auf dem Machbaren also niederschwellige Maßnahmen, die große Wirkung zeigen. So konnten trotz geringer Honorarstunden wichtige Verbesserungen erzielt werden.
Konflikte mit CI & Design auflösen
Die bestehende Gestaltung kollidierte an vielen Stellen mit den Anforderungen an Kontrast, Lesbarkeit und Benutzerführung. Durch ein gezieltes Redesign, inkl. Anpassung des Farbsets, neuer barrierefreier Typografie und klareren visuellen Elementen entstand ein inklusives, modernes Design, das weiterhin zum Markenbild passte.
Technik pragmatisch neu gedacht
Technische Barrieren wie nicht tastaturbedienbare Slider oder ein unzugänglicher Cookie-Dialog wurden systematisch identifiziert und ausgetauscht. Viel Eigenrecherche, gezielte Eingriffe ins Theme und CSS sowie eine klare Trennung dekorativer und funktionaler Inhalte machten die Seite strukturell robust und zugänglich.
Bestehendes nutzen
Statt die gesamte Website neu zu bauen, wurden vorhandene Inhalte intelligent überarbeitet: Alt-Texte ergänzt, Überschriftenhierarchien korrigiert, dekorative Bilder ausgeblendet. Frühzeitige BITV-Audits (bereits 2021) lieferten eine belastbare Grundlage, die konsequent weiterentwickelt wurde.
Verantwortung anerkennen
Als Unternehmen mit Online-Shop erkannte HeiReS die rechtliche Verpflichtung zur Barrierefreiheit an und setzte auf Transparenz statt Ausreden. Die Barrierefreiheitserklärung wurde regelmäßig aktualisiert und kommuniziert.
Der Weg dorthin
Früher strategischer Schritt: Wechsel auf ein barrierefreies WordPress-Theme
Bereits ganz zu Beginn des Prozesses wurde entschieden, das bisherige, in die Jahre gekommene Theme gegen ein moderneres, barrierefreieres WordPress-Theme auszutauschen. Dieser Schritt schuf die notwendige technische Grundlage und war ein entscheidender Hebel für die spätere Barrierefreiheit, um viele spätere Anpassungen überhaupt sinnvoll umsetzen zu können.
Das neue Theme ermöglichte:
- bessere Kontrolle über Schriftgrößen und Kontraste
- strukturierteren HTML-Code
- verbesserten Umgang mit Tastatursteuerung und Screenreadern
BITV-Tests als Wegweiser
Die erste Überprüfung im August 2021 zeigte deutliche Defizite: 30 von 92 Prüfkriterien wurden nicht erfüllt. Zu den größten Problemen zählten fehlende Alt-Texte, zu niedrige Kontraste, eine fehlerhafte Überschriftenstruktur und nicht tastaturbedienbare Komponenten. Drei weitere Tests folgten, der Letzte am 28. Juni 2025 mit 98 Kriterien. Von diesen Kriterien sind 17 noch nicht ganz erfüllt, aber das meiste sind tatsächlich nur noch Kleinigkeiten, sodass man mit Fug und Recht behaupten kann, dass diese Website weitgehend vereinbar mit der BITV 2.0 ist.
Schlüsse: Technische Komponenten mussten überarbeitet, das Layout barrierefrei gestaltet und Inhalte strukturell optimiert werden.
Re-Design mit Inklusion im Blick
- Farbkontraste verbessert: Die Hauptfarbe Orange wurde von einem Kontrastverhältnis von 2.8:1 auf 3:1 optimiert.
- Typografie überarbeitet: Ein neues, gut lesbares Schriftsystem wurde entwickelt.
- Links werden konsequent unterstrichen.
- Bedienelemente wurden vergrößert und farblich klarer abgegrenzt.
Technische Anpassungen im Theme
- Schriftgrößen und Farbwerte wurden global barrierefrei angepasst.
- CSS wurde gezielt genutzt, um visuelle Probleme zu beheben, die das Theme verursachte.
Funktionale Verbesserungen
- Austausch des Cookie-Dialogs durch eine tastaturbedienbare Alternative.
- Der Slider und weitere Elemente wurden ersetzt oder barrierefrei gestaltet.
- Die Seitenstruktur wurde überarbeitet (z. B. sinnvolle Überschriftenhierarchie, Alt-Texte ergänzt).
- Dekorative Elemente wurden aus dem Accessibility Tree entfernt, um Screenreader nicht zu stören.
Erklärung zur Barrierefreiheit
Die Erklärung wurde sorgfältig erstellt und aktualisiert:
- Dokumentation der BITV-Tests (inkl. Datum, Ergebnis, Nicht-Erfüllungen)
- Auflistung nicht barrierefreier Inhalte
- Möglichkeit zur Barriere-Meldung über ein Formular
- Letzter Stand: 28.06.2025
Der Nutzen für HeiReS
- Rechtssicherheit durch klare Nachweise der Barrierefreiheit
- Verbesserte Sichtbarkeit durch bessere Suchmaschinenplatzierung
- Positive Außendarstellung als Vorreiterin digitaler Inklusion
- IAAP-Mitgliedschaft untermauert Kompetenz im Thema
- Neue Schulungen & Kundenprojekte durch Expertise-Zuwachs
- Mehr Zugriffe und bessere Nutzung der Website durch eine größere Zielgruppe
Zusammengefasst
Die barrierefreie WordPress-Webseite von HeiReS zeigt eindrucksvoll: Auch kleine Unternehmen mit begrenzten Mitteln können Barrierefreiheit ernst nehmen und damit rechtliche, technische und gesellschaftliche Vorteile verbinden. Entscheidend sind der Wille, klare Prioritäten und der Mut zur Veränderung.
I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Jahr: 2021-25
Leistungen:
- Technisches Konzept
- UI-ReDesign
- Umsetzung in WordPress
- BITV-Test
- Erklärung zur Barrierefreiheit
Brache: IT
Verwendete Technologie:
- WordPress
- Figma
- Illustrator
