Barrierefreiheitsbericht

Breadcrumbs implementieren:

<nav aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li><a href="/">Home</a></li>
    <li><a href="/kategorie">Kategorie</a></li>
    <li aria-current="page">Aktuelle Seite</li>
  </ol>
</nav>

Überschriftenhierarchie korrigieren:

• Sicherstellen, dass jede Seite genau eine H1-Überschrift hat
• Überschriften logisch strukturieren (H1 → H2 → H3 usw.)
• Keine Ebenen überspringen
• Überschriften nach Inhalt und nicht nach visuellem Erscheinungsbild verwenden

Sitemap erstellen:

• Eine HTML-Sitemap für Nutzer erstellen
• Eine XML-Sitemap für Suchmaschinen bereitstellen

Alt-Texte für alle Bilder hinzufügen:

<!-- Vorher -->
<img src="produkt.jpg">

<!-- Nachher -->
<img src="produkt.jpg" alt="Bio-Bettwäsche aus Baumwolle in Farbe Mauve">

• Für dekorative Bilder leere Alt-Attribute verwenden: alt=""
• Für funktionale Bilder (z.B. in Links) den Zweck beschreiben

Zeilenabstand verbessern:

/* Vorher - zu geringer Zeilenabstand */
p {
  line-height: 1.2;
}

/* Nachher - verbesserter Zeilenabstand */
p {
  line-height: 1.5;
}

Labels für Formularelemente hinzufügen:

<!-- Vorher -->
<input type="text" name="suche">

<!-- Nachher - mit sichtbarem Label -->
<label for="suche">Suche</label>
<input type="text" id="suche" name="suche">

<!-- Oder mit ARIA-Label (wenn visuelles Label nicht möglich) -->
<input type="text" name="suche" aria-label="Suche">

Dropdown-Menüs verbessern:

<!-- Zugängliches Dropdown-Menü -->
<div class="dropdown">
  <button aria-expanded="false" aria-controls="dropdown-menu">
    Menü
  </button>
  <ul id="dropdown-menu" role="menu" hidden>
    <li role="menuitem"><a href="#">Option 1</a></li>
    <li role="menuitem"><a href="#">Option 2</a></li>
  </ul>
</div>

// JavaScript für Tastaturunterstützung
const button = document.querySelector('.dropdown button');
const menu = document.getElementById('dropdown-menu');

button.addEventListener('click', () => {
  const expanded = button.getAttribute('aria-expanded') === 'true';
  button.setAttribute('aria-expanded', !expanded);
  menu.hidden = expanded;
});

// Tastaturnavigation innerhalb des Menüs
menu.addEventListener('keydown', (e) => {
  const items = Array.from(menu.querySelectorAll('[role="menuitem"]'));
  const index = items.indexOf(document.activeElement);
  
  if (e.key === 'ArrowDown') {
    e.preventDefault();
    items[(index + 1) % items.length].focus();
  } else if (e.key === 'ArrowUp') {
    e.preventDefault();
    items[(index - 1 + items.length) % items.length].focus();
  } else if (e.key === 'Escape') {
    button.focus();
    button.click();
  }
});

Responsive Design verbessern:

• Sicherstellen, dass die Website bei 200% Zoom benutzbar bleibt
• Inhalte bei verschiedenen Bildschirmgrößen anpassen
• Touch-Ziele ausreichend groß gestalten (mindestens 44x44px)

Formulare optimieren:

• Fehleridentifikation und -beschreibung verbessern
• Automatische Fehlerkorrektur anbieten
• Kontexthilfen bereitstellen