Technische Details

1. Strukturierte und Semantische HTML

Verwende semantische HTML-Elemente, um Inhalte zu strukturieren. Screenreader nutzen diese Strukturen, um die Seite zu verstehen und für Nutzer besser zugänglich zu machen.

Beispiel:

<header>
  <h1>Website-Titel</h1>
</header>
<nav aria-label="Hauptnavigation">
  <ul>
    <li><a href="#home">Startseite</a></li>
    <li><a href="#about">Über uns</a></li>
    <li><a href="#contact">Kontakt</a></li>
  </ul>
</nav>
<main>
  <article>
    <h2>Beitrags-Titel</h2>
    <p>Beitragstext...</p>
  </article>
</main>
<footer>
  <p>&copy; 2023 Website-Name</p>
</footer>

2. WAI-ARIA-Attribute für zusätzliche Informationen

Verwende ARIA-Attribute (aria-*), um zusätzliche Informationen bereitzustellen, besonders wenn Standard-HTML nicht ausreicht.

  • aria-label: Beschriftet ein Element für Screenreader.

  • aria-labelledby: Verknüpft ein Element mit einem anderen beschriftenden Element.

  • aria-hidden: Versteckt Inhalte vor Screenreadern, wenn diese nicht relevant sind.

Detailliertere Informationen findest Du hier: WAI-ARIA-Attribute

Beispiel für ein Formular:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" aria-required="true">
  
  <button type="submit" aria-label="Formular absenden">Absenden</button>
</form>

3. ACF und Barrierefreiheit

Falls du eigene ACF-Felder erstellt hast, solltest du sicherstellen, dass jedes Feld mit einem label-Tag versehen ist und dass bei dynamisch generierten Inhalten immer ein entsprechendes HTML-Element zur besseren Verständlichkeit vorhanden ist.

Beispiel für ein ACF Textfeld:

<label for="acf_text"><?php echo esc_html(get_field('textfeld_label')); ?></label>
<input type="text" id="acf_text" value="<?php echo esc_attr(get_field('textfeld')); ?>" aria-label="<?php echo esc_attr(get_field('textfeld_label')); ?>">

4. Alternativtexte für Bilder

Verwende für Bilder in Gutenberg-Blöcken oder über ACF-Felder immer alt-Texte. Ein beschreibender alt-Text ist für blinde Nutzer oder Screenreader essentiell.

Beispiel:

<?php 
$image = get_field('bild_feld');
if( $image ) : ?>
  <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" aria-hidden="false">
<?php endif; ?>

5. Links zugänglich machen

Jeder Link (<a>-Tag) sollte ein aussagekräftiges Attribut title oder einen passenden Ankertext besitzen. Außerdem sollten Links per Tastatur erreichbar sein.

Beispiel:

<a href="https://example.com" title="Weitere Informationen zu Beispielseite">Mehr erfahren</a>

6. Fokus-Management und Tastaturbedienbarkeit

Stelle sicher, dass interaktive Elemente wie Buttons, Links und Formulare auch per Tastatur bedient werden können. Dafür sollten sich diese Elemente im „Fokus“ befinden, was automatisch durch <button> und <a>-Tags gewährleistet ist.

<button onclick="doSomething()">Klicken Sie hier</button>

7. JavaScript und ARIA-Live-Regionen

Wenn JavaScript-Inhalte dynamisch nachgeladen werden, informiere Nutzer durch ARIA-Live-Regionen.

Beispiel:

<div aria-live="polite">
  <p id="dynamic-content">Inhalt wird dynamisch geladen...</p>
</div>

8. Farbkontraste und Lesbarkeit

Auch wenn du dich nicht auf Design fokussierst, ist es wichtig, genügend Kontrast zwischen Text und Hintergrundfarbe zu gewährleisten. Nutze ein Online-Tool wie WebAIM Contrast Checker zur Kontrolle.

9. Skip-Links für schnellere Navigation

Ermögliche Nutzern die Möglichkeit, durch sogenannte Skip-Links direkt zum Hauptinhalt zu springen, ohne durch die komplette Navigation scrollen zu müssen.

Beispiel:

<a href="#maincontent" class="skip-link">Zum Hauptinhalt springen</a>
<main id="maincontent">
  <h1>Willkommen auf unserer Webseite</h1>
</main>

10. Formulare und Validierung

Jedes Eingabefeld sollte mit einem label verknüpft sein, und Formular-Validierungen sollten gut kommuniziert werden. Zusätzlich sollten Fehler- oder Erfolgsnachrichten klar angezeigt werden und für Screenreader zugänglich sein.

Beispiel:

<form onsubmit="return validateForm()" aria-describedby="error-message">
  <label for="email">E-Mail-Adresse:</label>
  <input type="email" id="email" required aria-required="true">
  <span id="error-message" role="alert" style="display:none;">Bitte geben Sie eine gültige E-Mail-Adresse ein.</span>
  <button type="submit">Absenden</button>
</form>

<script>
  function validateForm() {
    var email = document.getElementById("email").value;
    if (!email.includes("@")) {
      document.getElementById("error-message").style.display = "block";
      return false;
    }
    return true;
  }
</script>

Zusammenfassung

Eine barrierefreie Webseite zu erstellen bedeutet, sowohl die Struktur, die Bedienbarkeit als auch die technischen Anforderungen für Nutzer mit Einschränkungen zu beachten. Wichtig ist dabei:

  1. Semantische Struktur für gute Lesbarkeit und Navigierbarkeit.

  2. ARIA-Attribute zur Ergänzung der HTML-Struktur.

  3. Barrierefreie Formularfelder mit klaren Labels.

  4. Alternativtexte für Bilder und aussagekräftige Beschriftungen.

  5. Tastaturfreundliche Navigation und Skip-Links.

  6. Barrierefreies Feedback durch ARIA-Live-Regionen und Fokus-Management.

Wenn du diese Techniken integrierst, erreichst du eine solide Basis für Barrierefreiheit und machst deine Seite für eine breitere Nutzergruppe zugänglich. Viel Erfolg!

VorherigeEinleitungNächsteWAI-ARIA-Attribute

Zuletzt aktualisiert