Umsetzung Barrierearmut

Stand: Dienstag, 19. März 2024

Um sicherzustellen dass Menschen mit unterschiedlichen Fähigkeiten und Beeinträchtigungen problemlos auf die Informationen der Webseite verwaltungsgemeinschaft-rain.de zugreifen können, werden folgende Punkte im Sinne einer barrierearmen (nicht barrierefreien) Webseite bei der Gestaltung berücksichtigt:

1. Textverständlichkeit

Inhaltstexte werden in klarer und leicht verständlicher Sprache (nicht „Leichte Sprache“) angelegt. Dabei wird darauf geachtet lange und komplexe Sätze zu vermeiden damit v.a. Screenreader die Sätze verständlich vorlesen können. Unterseiten werden mit Überschriften, Absätzen und Listen strukturiert.

2. semantisches HTML

Das Thema „barrierefreie Webseite“ wird bereits von den Entwicklern des verwendeten Style-Theme ‚BeTheme‘ aus dem Hause Muffin Group berücksichtigt. Soweit es das Style-Theme also erlaubt wird darauf geachtet so gut wie möglich semantische HTML-Tags zu verwenden und dadurch die Usability zu erhöhen.
»Beispiel Seitentitel: <title>Öffnungszeiten Rathaus</title>
»Beispiel Überschriften-Hierarchie <h1> bis <h6>: <h1>Öffnungszeiten Rathaus</h1>
»Beispiel Formatierungen: Verwendung von <strong> anstatt <span style="font-weight:bold">
Dieser Punkt ist dahingehend wichtig weil Screenreader sich wichtige Informationen aus dem Quellcode der Webseite suchen und diese v.a. sehbehinderten Menschen vorlesen. Wenn der HTML-Code falsch ausgezeichnet ist, erschwert das also den Zugang zur Webseite unnötig während ein semantisch korrekter HTML-Code das Navigieren deutlich verbessert und erleichtert.

3. Alternativtexte für Bilder

Für Menschen mit Sehbehinderungen werden bei allen relevanten Bildern (Fotos und Grafiken) alternative Texte durch das sogenannte ALT-Attribut hinzugefügt. Dieser Tag beschreibt den Inhalt des Bildes und kann von Screenreadern ausgelesen werden. Rein dekorative Bilder (Schmuckelemente) bleiben ohne ALT-Attribut.
»Beispiel: <img src="kindergarten.jpg" alt="Kindergarten Rain von außen">

4. Hyperlinks

Hyperlinks, egal ob reine Text-Links oder als Button, werden mit einer Beschriftung sowie einem aussagekräftigen Link Titel versehen.
»Beschriftung: Mehr Info …
»Link Titel: title="Mehr Informationen zum Thema XY"
»Beispiel: <a href="#info" title="Mehr Informationen zum Thema XY">Mehr Info ...</a>

5. Sprungmarken (Anker Links)

Wichtige Elemente und Abschnitte sind mit einem eindeutigen Namen gekennzeichnet und durch eine Sprungmarke erreichbar.
»Anker setzen: id="suche"
»Verweis auf Anker: <a href="#suche">zur Suche …</a>

6. Navigation

Es wird auf eine klare Menüstruktur sowie benutzerfreundliche Links geachtet. Alle Unterseiten sind durch sogenannte lesbare Seiten-URLs (sprechende URLs) erreichbar.
»Beispiel: https://www.verwaltungsgemeinschaft-rain.de/rathaus/oeffnungszeiten/
Unterstützend zur Navigation gibt es im Header-Bereich sogenannte Breadcrumbs (Brotkrümelnavigation). Durch diese Textzeile wir dem Besucher anzeigt in welcher Verzweigung er sich innerhalb der Webseite befindet.
»Beispiel: Start > Gemeinde Perkam > Verwaltung > Bürgermeister

7. Tastatursteuerung

Die Webseite kann auch ohne Maus durch sogenanntes Tab‐Browsing gesteuert werden. Dabei wird auf einen gut sichtbaren Tastatur-Fokus (Markierung) geachtet. Hyperlinks werden mit einer eindeutigen Beschriftung über die Zielseite dargestellt.
»Beispiel: Zu den Öffnungszeiten des Rathaus.

8. Formulare

Pflichtfelder in Formularen werden eindeutig gekennzeichnet. Allgemein gilt aber der Grundsatz der Datensparsamkeit. Formularfelder werden eindeutig benannt und können somit von Screenreadern erkannt werden. »Beispiel: Telefonnummer: <input type="tel" name="Telefonnummer" placeholder "Telefonnummer für Rückruf eingeben" />
Auf einen CAPTCHA-Test (Spam-Schutz) wird verzichtet da dieser von Screenreadern nicht lesbar ist.

9. Responsive Design

Durch ein für mobile Endgeräte optimiertes Webdesign wird sichergestellt dass die Webseite auf verschiedenen Geräten sauber angezeigt wird und dass alle Funktionen auch auf mobilen Geräten zugänglich sind.
Bei der gewählten Schriftart wird auf eine angemessene Größe und Form der Buchstaben geachtet sowie ausreichende Abstände zwischen den Buchstaben.

10. Bewegtbild

Um Probleme von neurologischen Erkrankungen wie z.B. epileptische Anfälle zu vermeiden wird auf blinkende oder sich schnell bewegende Elemente verzichtet (Flash, Slideshows, ... ). Auch stellen Slider eine erhöhte Fehlerquelle im Hinblick auf Screenreader dar. Daher wird auf diese Elemente verzichtet.

11. Farbkontraste

Um die Webseite auch für Menschen mit Sehbehinderungen gut lesbar zu machen wird auf ausreichenden Kontrast zwischen Inhaltstexten, Links und Hintergrund geachtet.

12. Cookie Consent Tool

Grundsätzlich sollen so gut wie keinerlei externe Tools und Plugins verwendet werden die Cookies beim Besucher setzen. Dadurch ist es nicht notwendig ein Cookie Consent Tool zu verwenden.
Sollte es doch notwendig sein dann wird darauf geachtet dass das Consent Tool als erstes beim Seitenbesuch auswählbar ist und durch die Tastatursteuerung bedienbar ist.

13. Erklärung zur Barrierefreiheit bzw. Barrierearmut

Es wird eine eigene Unterseite angelegt und in der Fußzeile der Webseite verlinkt. Der Inhalt beschreibt die oben genannten Punkte zur Umsetzung der Barrierearmut und enthält einen Kontakt für Feedback und Probleme. Auf der Unterseite wird auch eine Liste dargestellt die alle Punkte darstellt die nicht barrierefrei sind.

Es ist wichtig zu beachten, dass Barrierearmut bzw. Barrierefreiheit ein fortlaufender Prozess ist und regelmäßig (mind. einmal pro Jahr) überprüft werden sollte. Auch sollte darauf geachtet werden dass nur entsprechend qualifizierte Redakteur:innen mit der Betreuung der Webseite beauftragt sind.

Die oben aufgelisteten Punkte für eine barrierearme Webseite beruhen auf der 'Verordnung über die Barrierefreiheitsanforderungen für Produkte und Dienstleistungen nach dem Barrierefreiheitsstärkungsgesetz (Verordnung zum Barrierefreiheitsstärkungsgesetz – BFSGV)' sowie Erfahrung aus früheren Webprojekten. Alle Punkte wurden nach bestem Wissen und Gewissen recherchiert und mit anderen offiziellen Webseiten abgeglichen.