Migros Accessibility Guidelines & Standards

Semantisches HTML

Korrektes, semantisches HTML ist die Grundlage jeder barrierefreien Website. Bevor ARIA eingesetzt wird, muss geprüft werden, ob ein natives HTML-Element die Aufgabe erfüllt.

Landmarks Muss

Jede Seite muss die folgenden Landmark-Bereiche definieren:

<header>   – Kopfbereich (banner)
<nav>      – Navigation
<main>     – Hauptinhalt (genau einer pro Seite)
<footer>   – Fussbereich (contentinfo)
<aside>    – Ergänzende Inhalte (complementary)
<section>  – Thematische Gruppierung (mit aria-label oder Heading)

Überschriften-Hierarchie Muss

Überschriften bilden eine logische Gliederung. Die Reihenfolge darf nicht übersprungen werden.

Richtig

<h1>Seitentitel</h1>
  <h2>Abschnitt</h2>
    <h3>Unterabschnitt</h3>
  <h2>Nächster Abschnitt</h2>

Falsch

<h1>Seitentitel</h1>
  <h3>Abschnitt</h3>  <!-- h2 übersprungen! -->
  <h4>Noch ein Abschnitt</h4>

Sprache Muss

Das lang-Attribut muss auf dem <html>-Element gesetzt sein. Fremdsprachige Textpassagen erhalten ein eigenes lang-Attribut.

<html lang="de">
  ...
  <p>Der <span lang="en">Screen Reader</span> liest den Text vor.</p>

Listen Muss

Aufzählungen und Navigationsmenüs müssen als <ul>, <ol> oder <dl> ausgezeichnet werden – nicht als aneinandergereihte <div>-Elemente.

Links vs. Buttons Muss

Verwendung von Links und Buttons
Element Verwendung Beispiel
<a href> Navigation zu einer anderen Seite oder einem Anker «Mehr erfahren», «Zum Warenkorb»
<button> Aktionen auslösen (ohne Seitenwechsel) «Hinzufügen», «Menü öffnen», «Filter anwenden»

Tabellen Muss

Datentabellen müssen korrekt semantisch ausgezeichnet werden:

<table>
  <caption>Kursangebot Frühling 2026</caption>
  <thead>
    <tr>
      <th scope="col">Kurs</th>
      <th scope="col">Startdatum</th>
      <th scope="col">Preis</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Yoga</td>
      <td>15. April 2026</td>
      <td>CHF 280.–</td>
    </tr>
  </tbody>
</table>

Layouttabellen vermeiden. Falls unvermeidbar: role="presentation" setzen, damit Screenreader sie nicht als Datentabelle interpretieren.

Visually Hidden Muss

Texte, die nur für Screenreader bestimmt sind (visuell nicht sichtbar, aber im Accessibility Tree vorhanden), müssen mit einem bewährten CSS-Pattern versteckt werden:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Nicht verwenden:

Anwendungsbeispiele