Barrierefreie Website BFSG 2026: Technische Anforderungen & Code-Beispiele

<header>
  <nav aria-label="Hauptnavigation">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/ueber-uns">Über uns</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h1>Artikel-Überschrift</h1>
    <p>Artikeltext...</p>
  </article>
</main>

<footer>
  <p>&copy; 2025 Wendermedia</p>
</footer>

<h1>Hauptüberschrift</h1>
<h2>Unterüberschrift Ebene 2</h2>
  <h3>Unterüberschrift Ebene 3</h3>
  <h3>Weitere Ebene 3</h3>
<h2>Weitere Ebene 2</h2>

<button type="button" id="open-modal">Öffnen</button>

<script>
document.getElementById('open-modal').addEventListener('click', function() {
  openModal();
});

// Escape-Taste zum Schließen
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape' && modalIsOpen) {
    closeModal();
  }
});
</script>

a:focus, button:focus, input:focus {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
}

/* Modernes Focus-visible (nur Tastatur) */
a:focus-visible, button:focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.2);
}

<a href="#main-content" class="skip-link">
  Zum Hauptinhalt springen
</a>

<header>...</header>

<main id="main-content">
  <!-- Hauptinhalt -->
</main>

<style>
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  z-index: 9999;
}
.skip-link:focus { top: 0; }
</style>

<label for="name">Name *</label>
<input type="text" id="name" name="name" required
       aria-required="true" aria-describedby="name-hint">
<span id="name-hint" class="hint">
  Bitte Vor- und Nachname eingeben
</span>

<label for="email">E-Mail-Adresse *</label>
<input type="email" id="email" name="email"
       aria-invalid="true"
       aria-describedby="email-error">
<span id="email-error" role="alert" class="error">
  ⚠️ Bitte geben Sie eine gültige E-Mail-Adresse ein
</span>

/* Kontrast 7.0:1 - WCAG AAA konform */
.text {
  color: #333333;
  background: #ffffff;
}

/* Kontrast 4.6:1 - WCAG AA konform */
.text-inverted {
  color: #ffffff;
  background: #0066cc;
}

<p class="error">
  <span aria-hidden="true">⚠️</span>
  <span class="sr-only">Fehler:</span>
  Fehler aufgetreten
</p>

<p class="success">
  <span aria-hidden="true">✅</span>
  <span class="sr-only">Erfolg:</span>
  Erfolgreich gespeichert
</p>

<!-- Informatives Bild -->
<img src="team.jpg"
     alt="Unser Team von 5 Mitarbeitern im Büro bei der Arbeit">

<!-- Dekoratives Bild -->
<img src="decoration.svg" alt="" role="presentation">

<!-- Logo -->
<img src="logo.png" alt="Wendermedia - Webdesign aus Halle">

<!-- Komplexes Diagramm -->
<img src="sales-chart.png" alt="Umsatzentwicklung 2024"
     aria-describedby="chart-description">
<div id="chart-description">
  <p>Der Umsatz stieg von 100.000€ im Januar
     auf 250.000€ im Dezember 2024.</p>
</div>

<!-- Dekoratives Icon -->
<svg aria-hidden="true" focusable="false">...</svg>

<!-- Icon-Button mit Label -->
<button aria-label="Suchen">
  <svg aria-hidden="true" focusable="false">
    <!-- Icon-Pfade -->
  </svg>
</button>

<!-- SVG mit Titel und Beschreibung -->
<svg role="img" aria-labelledby="icon-title icon-desc">
  <title id="icon-title">Erfolgreich</title>
  <desc id="icon-desc">Grüner Haken</desc>
  <!-- Icon-Pfade -->
</svg>

<!-- aria-expanded für Accordions -->
<button aria-expanded="false" aria-controls="menu">
  Menü
</button>
<ul id="menu" hidden>
  <li>Item 1</li>
</ul>

<!-- aria-live für dynamische Inhalte -->
<div role="status" aria-live="polite" aria-atomic="true">
  <p id="status-message"></p>
</div>

<!-- aria-current für Navigation -->
<nav>
  <a href="/" aria-current="page">Home</a>
  <a href="/blog">Blog</a>
</nav>

/* Fluid width */
.container {
  max-width: 1200px;
  width: 100%;
  padding: 0 20px;
  margin: 0 auto;
}

/* Mobile First */
@media (min-width: 768px) {
  .container {
    padding: 0 40px;
  }
}

/* rem-basiert - skaliert mit Browser-Einstellungen */
html {
  font-size: 100%;
}

body {
  font-size: 1rem;     /* 16px */
  line-height: 1.5;    /* Mindestens 1.5 für Lesbarkeit */
}

h1 {
  font-size: 2.5rem;   /* 40px */
  line-height: 1.2;
}