Wenn eine Genossenschaft digital erwachsen wird

Die Wohnungsgenossenschaft Eisenberg/Thüringen eG – kurz WGE – vermietet seit 1954 bezahlbaren Wohnraum im westlichen Teil von Eisenberg. Gegründet von zwölf Kollegen des VEB Schamottewerk, die dringend eine lebenswerte Wohnung brauchten. Das war vor über siebzig Jahren. Die Idee ist dieselbe geblieben, die digitale Realität nicht.

Die alte Website erfüllte ihren Zweck, aber sie erfüllte keine Norm. Keine Barrierefreiheit, keine strukturierten Daten, kein Konzept für die Anforderungen des Barrierefreiheitsstärkungsgesetzes (BFSG), das ab Juni 2025 greift. Formulare, die zwar funktionierten, aber für Menschen mit Einschränkungen kaum bedienbar waren.

Die Aufgabe: Eine Website, die allen offen steht. Nicht als Lippenbekenntnis, sondern als technische Realität. Mit Formularen, die per Tastatur bedienbar sind, Texten, die Screenreader verstehen, und einer Struktur, die sowohl Google als auch einen 78-jährigen Mieter mit Sehschwäche abholt.

Barrierefreies Webdesign nach WCAG 2.1 Level AA

Barrierefreiheit ist kein Feature, das man am Ende drüberlegt. Bei der WGE wurde sie von der ersten Zeile Code an mitgedacht – in jedem Template, jedem Formularfeld, jedem Button.

Konsistente ARIA-Architektur. Jeder Link auf der gesamten Website trägt ein einheitliches aria-label. WCAG 3.2.4 fordert konsistente Erkennung. Hier ist sie umgesetzt, für über 30 Navigationsziele, inklusive Telefonnummern, E-Mail-Adressen und externer Links.

Skip-Links und Fokus-Management. Tastaturnutzer können die gesamte Navigation überspringen und direkt zum Inhalt gelangen. Jedes interaktive Element ist per Tab erreichbar, der aktuelle Fokus ist jederzeit sichtbar. Kein versteckter Focus-Outline, kein CSS-Reset, der die Orientierung zerstört.

Farbkontraste und Lesbarkeit. Alle Text-Hintergrund-Kombinationen erfüllen das Kontrastverhältnis 4,5:1 nach WCAG 1.4.3. Informationen werden nie ausschließlich durch Farbe vermittelt – Icons und Textbeschriftungen ergänzen einander.

Barrierefreiheits-Widget. Ein eigens entwickeltes Widget ermöglicht Nutzern individuelle Anpassungen: Schriftgröße, Zeilenabstand, Buchstabenabstand, Kontrastmodus, Legasthenie-Schrift, Graustufen, invertierte Farben, Lesehilfe-Linie, Cursor-Vergrößerung, Animationsstopp. Alles clientseitig, alles ohne Reload.

Plugin-Entwicklung: Maßgeschneidert statt Konfektionsware

Für die WGE wurden WordPress-Plugins von Grund auf entwickelt. Kein Plugin-Baukasten, kein Page Builder, kein Third-Party-Formular mit zwanzig ungenutzten Features. Jedes Plugin macht genau das, was es soll – nicht mehr, nicht weniger.

WGE Kontaktformular. Barrierefreies Kontakt- und Reparaturanfrageformular mit vollständiger ARIA-Integration. Felder mit aria-required, aria-invalid und aria-describedby. Live-Validierung bei Fokusverlust, Fehler-Zusammenfassung am Formularkopf, Screen-Reader-Announcements über aria-live-Regionen. Honeypot-Feld statt aggressivem CAPTCHA. UTF-8-kodierter E-Mail-Versand über wp_mail() mit HTML-Templates, die selbst in Outlook barrierefrei dargestellt werden.

Mieter-Selbstauskunft. Das umfangreichste Formular der Website: über zwanzig Felder in fünf Sektionen – persönliche Daten, Wohnsituation, Einkommen, Miethistorie, Einverständniserklärungen. Jede Sektion ein eigenes <fieldset> mit <legend>. Progressive Disclosure für sensible Bereiche. Mathematisches Rechen-CAPTCHA mit Zeitlimit. PDF-Generierung der eingereichten Daten. Vollständige Tastatur-Navigation und Screen-Reader-Unterstützung.

WGE FAQ Plugin. Barrierefreies Akkordeon-FAQ mit Schema.org FAQPage-Markup für Google Rich Results. Über 30 Fragen und Antworten zu Mitgliedschaft, Wohnungssuche, Mietrecht, Genossenschaftsanteilen, Service und Kontakt. Jede Frage per Tastatur bedienbar, mit aria-expanded, aria-controls und korrektem Fokus-Management beim Öffnen und Schließen.

Strukturierte Daten und technisches SEO

Google versteht eine Website besser, wenn sie strukturiert spricht. Für die WGE wurde eine Schema.org-Architektur implementiert, die jede Seite mit den passenden Markups versorgt – ohne Duplikate, ohne Konflikte.

Die Startseite trägt Organization und LocalBusiness mit vollständigen Kontaktdaten, Öffnungszeiten und Einzugsgebiet. Die FAQ-Seite liefert valides FAQPage-Markup, das über 30 Fragen direkt als Rich Results in den Suchergebnissen anzeigen kann. Die Veranstaltungsseite nutzt Event-Markup für den „Treff“ – den Gemeinschaftsraum, in dem die WGE regelmäßig Veranstaltungen für ihre Mitglieder organisiert.

Jede Schema-Quelle wurde isoliert und konsolidiert. Das Ergebnis: Null Fehler im Google Rich Results Test.

Straffung des Erscheinungsbildes

Im Rahmen der Gestaltung der Website wurde das Erscheinungsbild gestrafft. Die Logo-Typografie findet sich in Überschriften ersten Ranges wieder. Das Logo wurde vereinfacht und von einem generischen Icon befreit. Die Hausschrift wurde definiert und konsequent integriert, Visitenkarten, Formulare und PDFs neu gestaltet. Dieser Prozess begann bereits mit der Marketing-Kampagne für die Genossenschaft.

Marketing-Kampagne: Mit dem Aufzug zum Aufstieg

Neben der technischen Arbeit entstand eine Sponsoring-Kampagne für die Partnerschaft der WGE mit dem SV Klengel-Serba 09. Der lokale Fußballverein wollte aufsteigen. Die Genossenschaft hat Aufzüge. Der Slogan lag auf der Hand: „Mit dem Aufzug zum Aufstieg.“

Die Kampagne umfasste Videoschnitt, Bannerwerbung, Sportbekleidung und Social-Media-Inhalte. Authentisch statt aufgesetzt. Regional statt generisch. Eine Partnerschaft auf zwei Jahre, die beide Seiten sichtbar macht – den Verein bei den Mietern, die Genossenschaft auf dem Sportplatz.

Content-Strategie und Seitenstruktur

Die gesamte Website wurde nach dem Prinzip „Eine Seite, ein Thema, eine Suchintention“ strukturiert. Jede Landingpage bedient ein konkretes Nutzerbedürfnis:

Die Wohnungsseite zeigt alle fünf Standorte mit Grundrissen und Lageinformationen – Biberacher Straße, Zeilbäume, Mendener Straße, Stadthäger Straße, Ludwig-Jahn-Straße. Die Serviceseite bündelt alle Formulare und Downloads. Die Vorteile-Seite erklärt, warum genossenschaftliches Wohnen eine Alternative zum privaten Mietmarkt ist. Die Historie-Seite erzählt die Geschichte von 1954 bis heute. Jede Seite mit korrekter H1-H2-Hierarchie, optimierten Meta-Tags und internen Verlinkungen.

Technische Umsetzung

Die Website basiert auf WordPress mit einem maßgeschneiderten Theme. Alle Formulare und interaktiven Elemente wurden als eigenständige Plugins entwickelt – sauber getrennt von Theme-Funktionen, aktualisierbar und wartbar.

Technische Eckdaten: vollständiges UTF-8-Encoding auf allen Ebenen, responsives Mobile-First-Design, optimierte Ladezeiten durch Lazy Loading und Bildoptimierung, saubere URL-Struktur mit sprechenden Slugs, 301-Redirects für migrierte Inhalte, serverseitiges Caching.

Kundin

Wohnungsgenossenschaft Eisenberg/Thüringen eG, Eisenberg

Leistungen

• Webdesign und Entwicklung Konzeption und Gestaltung der barrierefreien Website. Theme-Entwicklung und -Anpassung auf WordPress-Basis. Responsives Mobile-First-Design. Content-Strategie und Textkonzeption.
• Plugin-Entwicklung Kontaktformular mit Reparaturanfrage. Mieter-Selbstauskunft mit PDF-Generierung. FAQ-System mit Schema.org-Integration. CookieConsent mit DSGVO-konformem Management. Barrierefreiheits-Widget mit individuellen Anpassungsmöglichkeiten.
• Barrierefreiheit WCAG 2.1 Level AA auf allen Seiten. Konsistente ARIA-Architektur. Tastatur-Navigation und Screen-Reader-Unterstützung. Barrierefreiheitserklärung mit Feedback-Formular.
• SEO und strukturierte Daten Schema.org-Markup (Organization, LocalBusiness, FAQPage, Event). Meta-Optimierung für lokale Suchintentionen. Seitenstruktur nach dem Ein-Thema-Prinzip.
• Marketing Sponsoring-Kampagne „Mit dem Aufzug zum Aufstieg“ für SV Klengel-Serba 09. Videoschnitt, Bannerwerbung, Sportbekleidung.