KKJPD – Barrierefreier Webauftritt mit indualCMS

03.07.2025

Über dieses Projekt

Für die KKJPD habe ich den neuen Webauftritt basierend auf einem gelieferten Webdesign mit dem indualCMS technisch umgesetzt. Der Fokus lag dabei auf Barrierefreiheit nach Stufe AA (WCAG 2.1), einer klaren Inhaltsstruktur sowie einer speziellen Seitenführung über eine vertikale Navigation. Ergänzend wurde eine individuelle Tabellenvorlage für die Mitgliederübersicht realisiert.

Projekt ansehen

Vertikale Navigation für klare Struktur

Benutzerführung über die Seitenleiste

Statt einer klassischen Top-Navigation wurde eine seitenweise Navigation auf der linken Seite umgesetzt. Sie bleibt auf grösseren Viewports sichtbar und unterstützt so eine strukturierte Inhaltsführung über mehrere Ebenen hinweg – besonders wichtig bei einem komplexen Inhaltsaufbau wie bei der KKJPD.

Barrierefreiheit nach Stufe AA

Inhalt zugänglich für alle Menschen

Die Seite erfüllt zentrale Anforderungen der Barrierefreiheitsstufe AA. Umgesetzt wurden unter anderem: Access Keys, Skip Links, klare Fokusführung für Tastaturbedienung, strukturierte Inhaltsgliederung mit h1–h3, verständliche Linktexte, semantisch korrekte Formulare und barrierefreie Navigation. Das Design wurde konsequent auf Kontrast- und Lesbarkeit geprüft.

Spezielle Komponenten-Ausrichtung

Flexible Struktur trotz striktem Designraster

Das Layout beinhaltet bewusst gesetzte Elemente, die sich nicht an klassisch zentrierte Spaltenraster halten. Besondere Abstände, Textblöcke mit gezielter Flächennutzung und modulare Inhaltsblöcke erforderten eine saubere Umsetzung mit individueller Komponentenlogik innerhalb des CMS.

Sonderseiten-Vorlage: Mitgliederliste

Tabellenansicht mit differenzierter Gliederung

Für die Unterseite Mitglieder wurde eine eigene Seitenvorlage erstellt. Diese zeigt eine mehrspaltige Tabelle mit Kantonen und Kontaktdaten, inklusive Filtermöglichkeiten und semantischer Tabellenstruktur.

Custom Button-Animation

Subtiles Feedback mit eigener Bewegung

Die Buttons auf der KKJPD-Webseite wurden mit einer eigens erstellten Hover-Animation versehen. Beim Überfahren mit der Maus bewegen sich Pfeil-Icons leicht nach rechts, kombiniert mit einem sanften Farbwechsel. Die Animation wurde so gestaltet, dass sie dezent, barrierefrei und trotzdem spürbar ist – ohne die Lesbarkeit oder Bedienbarkeit einzuschränken.

Projektabschluss

Technik trifft auf strukturiertes Informationsdesign

Das Projekt bot die Möglichkeit, komplexe Anforderungen in ein benutzerfreundliches und zugängliches System zu überführen. Die Kombination aus barrierefreier Umsetzung, speziellem Designraster und Navigation in indualCMS zeigte, wie flexibel sich funktionale Anforderungen mit stilistischer Präzision verbinden lassen.

Zurück zur Projektübersicht