Barrierefreiheit

Barrierefreiheit im MATE Theme (ab Version 3.5.0)

Mit der Version 3.5.0 wurde das MATE Theme umfassend im Hinblick auf Barrierefreiheit überarbeitet und auf CSS-Variablen umgestellt.
Um diese Funktionen zu nutzen, ist beim Update von einer älteren Version (< 3.5.0) auf eine neuere Version (≥ 3.5.0) ein manueller Zwischenschritt notwendig.
➡️ Anleitung: Update auf CSS-Variablen

1. Icons im Header für Kontrastmodus und Schriftgröße

Die Version 3.2.0 bringt zusätzliche Bedienelemente im Header mit, um:

  • den Kontrastmodus (hoher Kontrast) umzuschalten
  • die Schriftgröße anzupassen (verlinkt standardmäßig auf die Zugänglichkeitserklärung)

Einstellungen vornehmen

  1. In der Seitenstruktur die Root-Seite (Seiten-Startpunkt) bearbeiten.
  2. Unter WCAG-Einstellungen (Web Content Accessibility Guidelines) findest du zwei Checkboxen:
    • „Umschalten in den Modus mit hohem Kontrast zulassen“
    • „Anzeige des Icons für das Ändern der Schriftgröße zulassen“
      Diese Optionen sind in einer frischen Installation standardmäßig aktiv.

Falls du das Theme neu installiert hast

Wenn du MATE Theme ab Version 3.2.0 installierst und die Demo importierst, sind die Icons im Header bereits vorhanden.

Falls du eine bestehende Installation hast

  1. Artikel anlegen
    • Unter Artikel einen neuen Artikel anlegen, z. B. „01/06 contrast and size“ unter
      Nature Theme Elemente -> 01_Header.
    • In den Artikeleinstellungen unter Template-Einstellungen den Theme Helper Tag MATE01/06 auswählen.
    • Dem Artikel die CSS-Klasse contrast-size-switcher hinzufügen

  1. Inhalt hinzufügen
    • Im Artikel ein Textelement mit folgendem Inhalt anlegen: 
      {{comp::contrast}} {{comp::size::barrierefreiheit.html#fontSize}}
    • Die CSS-Klasse wcag hinzufügen.

  1. Einbindung ins Template
    • Der Artikel mit dem Theme Helper Tag MATE01/06 wird automatisch über das Navigations-Template eingebunden.
    • Falls du ein eigenes mod_navigation_nature.html5 angepasst hast, füge den Inserttag dort manuell ein.
<?php if($this->showMobileMenu == 1): ?>
  <ul id="mobile-menu<?= $this->id ?>" class="mobile-menu sidenav hc-bg-black-ter <?= $this->level ?>">
    <?= $this->mobileNav ?>
    <li>
      <!-- contrast and size switcher -->
      {{theme::content::MATE01/06}}
    </li>
  </ul>
<?php endif; ?>

2. Neue barrierefreie Templates (ab Version 3.5.0)

Um redundante Links zu vermeiden (z. B. Bild, Überschrift und Button verlinkt), reicht es, nur den Button zu verlinken.
Das verbessert die Tastaturnavigation für Nutzer.

Für verschiedene Inhaltselemente wie Teaserbox, Contentbox usw. stehen angepasste Templates zur Verfügung.
Diese Templates haben die Endung _bf (für „barrierefrei“).

3. Allgemeine Hinweise zur Barrierefreiheit

Bei der Erstellung von Inhalten solltest du auf folgende Punkte achten:

  • Alternativtexte (Alt-Tags) für Bilder vergeben
  • Aussagekräftige Linktexte verwenden (nicht nur „hier klicken“)
  • Kontraste beachten (Textfarbe/Hintergrundfarbe)
  • Überschriften hierarchisch korrekt einsetzen
  • Tabellen nur für tabellarische Daten verwenden (nicht fürs Layout)
  • Formulare mit Label-Elementen versehen

4. Tools zum Testen der Barrierefreiheit