Filter auf der Website

Vom Filter zur passenden Trefferliste

Kästchen, Auswahlliste, Zurücksetzen: drei Stellen in Ihrem Filter.

Website prüfen
Beispiel im Prüfbericht Markierter Befund
Markierter Befund · Kritisch · WCAG 4.1.2Linke Ortsauswahl ohne Namen

Filter unter der Haube

Eine Auswahl verändert Liste, Reihenfolge und Ansage zugleich

Ein belastbarer Website-Filter hält vier Oberflächen synchron: Felder, sichtbare Ergebnisse, Sortierung und die Statusmeldung für assistive Technik.

Sechs Produkte gehen hinein, zwei passende kommen heraus

Konzeptionelle Darstellung eines Produktfilters. Im Beispiel bleiben nach „Schuhe“ und „Sofort verfügbar“ zwei von sechs Einträgen; „Preis aufsteigend“ ordnet nur diese Treffer.

QuelleKatalog · 6

  • SchuheLaufschuh119 € · verfügbar
  • JackenRegenjacke149 € · verfügbar
  • SchuheWanderschuh89 € · verfügbar
  • JackenWinterjacke179 € · nicht verfügbar
  • SchuheSandale59 € · nicht verfügbar
  • ZubehörTrinkflasche24 € · verfügbar
Der Katalog fließt in den Filter Sechs Linien werden vor dem Filter zu einer Linie gebündelt.

RegelnProduktfilter

Kategorie

Schuheausgewählt

Jackennicht ausgewählt

Verfügbarkeit

Sofort verfügbarausgewählt

SortierungPreis aufsteigend

Filter zurücksetzen

Der Filter gibt zwei Treffer weiter Eine Linie teilt sich nach dem Filter in zwei Ergebnislinien.

Ausgabe2 von 6

  1. 1
    Wanderschuh89 € · verfügbar
  2. 2
    Laufschuh119 € · verfügbar
ausgeblendet

Regenjacke · Winterjacke · Sandale · Trinkflasche

Filter geändertrole="status"

Polite Ansage „2 von 6 Produkten“ – der Fokus bleibt am Kästchen.

Filtern, Sortieren und Melden haben getrennte Aufgaben

AGruppe benennen

fieldset und legend geben den Kästchen den gemeinsamen Kontext.

BTreffer ausblenden

hidden entfernt unpassende Einträge aus Darstellung und Zugänglichkeitsbaum.

CTreffer ordnen

Die Sortierung ändert die Reihenfolge der sichtbaren Einträge, nicht ihre Anzahl.

DErgebnis melden

role="status" kündigt die neue Anzahl höflich an, ohne den Fokus zu versetzen.

HTML: Namen, Gruppe und Status zuerst

<form id="filter">
  <fieldset>
    <legend>Kategorie</legend>
    <label>
      <input type="checkbox" name="kategorie" value="schuhe">
      Schuhe
    </label>
    <label>
      <input type="checkbox" name="kategorie" value="jacken">
      Jacken
    </label>
  </fieldset>

  <label>
    <input type="checkbox" name="verfuegbar">
    Sofort verfügbar
  </label>

  <label for="sortierung">Sortierung</label>
  <select id="sortierung" name="sortierung">
    <option value="name">Name A bis Z</option>
    <option value="preis">Preis aufsteigend</option>
  </select>

  <button type="reset">Filter zurücksetzen</button>
</form>

<p id="trefferzahl" role="status">3 von 3 Produkten</p>
<ul id="ergebnisse">
  <li data-kategorie="schuhe" data-preis="119"
    data-name="Laufschuh" data-verfuegbar>
    Laufschuh, 119 Euro
  </li>
  <li data-kategorie="jacken" data-preis="149"
    data-name="Regenjacke" data-verfuegbar>
    Regenjacke, 149 Euro
  </li>
  <li data-kategorie="schuhe" data-preis="59"
    data-name="Sandale">
    Sandale, 59 Euro
  </li>
</ul>

JavaScript: ein Durchlauf, ein Ergebnis

const form = document.querySelector('#filter');
const liste = document.querySelector('#ergebnisse');
const status = document.querySelector('#trefferzahl');
const produkte = [...liste.children];

function anwenden() {
  const daten = new FormData(form);
  const kategorien = daten.getAll('kategorie');
  const nurVerfuegbar = daten.has('verfuegbar');
  const nachPreis = daten.get('sortierung') === 'preis';

  for (const produkt of produkte) {
    const kategoriePasst = kategorien.length === 0
      || kategorien.includes(produkt.dataset.kategorie);
    const verfuegbarPasst = !nurVerfuegbar
      || produkt.hasAttribute('data-verfuegbar');
    produkt.hidden = !(kategoriePasst && verfuegbarPasst);
  }

  const sichtbar = produkte.filter(produkt => !produkt.hidden);
  sichtbar.sort((a, b) => nachPreis
    ? Number(a.dataset.preis) - Number(b.dataset.preis)
    : a.dataset.name.localeCompare(b.dataset.name, 'de'));
  liste.replaceChildren(...sichtbar, ...produkte.filter(p => p.hidden));
  status.textContent =
    sichtbar.length + ' von ' + produkte.length + ' Produkten';
}

form.addEventListener('change', anwenden);
form.addEventListener('reset', () => requestAnimationFrame(anwenden));
anwenden();

So prüfen Sie den vollständigen Zustand

1

Tastatur: Tab erreicht jedes Feld und den sichtbaren Zurücksetzen-Text.

2

Liste: Unpassende Einträge verschwinden; Sortieren ändert nur die Reihenfolge.

3

Status: Die neue Trefferzahl wird gemeldet, der Fokus bleibt am ausgelösten Feld.

4

Reset: Alle Ausgangswerte, Ergebnisse und die Trefferzahl kehren gemeinsam zurück.

Verlässliche Referenzen

W3C WAI: Formularfelder gruppieren · WCAG 4.1.3: Statusmeldungen · MDN: role=status

Aus dem Prüfbericht

Drei Stellen, drei Befunde

Kritisch Das Kreuz zum Zurücksetzen hat keinen Namen Regel button-name

Die Schaltfläche neben den Filtern zeigt nur ein Kreuz. „Filter zurücksetzen“ als Text oder aria-label nennt die Aktion.

Anleitung: Schaltflächen zugänglich beschriften

Zum Mitnehmen

Der Filter, korrigiert

Drei Änderungen im HTML. Die Filterlogik bleibt unberührt.

Korrektur in 3 Schritten ansehen

  1. Die Kategorieliste benennen

    Aus dem span wird ein label mit for. Der sichtbare Text bleibt gleich und ist zugleich der Name der Auswahlliste.

    KorrekturvergleichSchritt 1 · HTML

    Vorher

    <span>Kategorie</span>
<select id="kategorie" name="kategorie">
  <option value="alle">Alle</option>
</select>

    Nachher

    <label for="kategorie">Kategorie</label>
<select id="kategorie" name="kategorie">
  <option value="alle">Alle</option>
</select>

    Markierte Zeilen wurden geändert

    So prüfen Sie es Klicken Sie auf das Wort „Kategorie“. Springt der Fokus in die Liste, ist der Name verbunden.

  2. Das Filterkästchen beschriften

    Das label mit for macht den Text zum Namen des Kästchens und nebenbei zur Klickfläche.

    KorrekturvergleichSchritt 2 · HTML

    Vorher

    <input type="checkbox" name="verfuegbar" value="1">
<span>Sofort verfügbar</span>

    Nachher

    <input id="verfuegbar" type="checkbox" name="verfuegbar" value="1">
<label for="verfuegbar">Sofort verfügbar</label>

    Markierte Zeilen wurden geändert

    So prüfen Sie es Klicken Sie auf den Text „Sofort verfügbar“. Das Kästchen schaltet um.

  3. Dem Zurücksetzen einen Namen geben

    Das Kreuz bleibt sichtbar und für Vorleseprogramme verborgen. aria-label nennt die Aktion, die die Schaltfläche auslöst.

    KorrekturvergleichSchritt 3 · HTML

    Vorher

    <button type="reset" class="filter-reset">
  <span aria-hidden="true">✕</span>
</button>

    Nachher

    <button type="reset" class="filter-reset" aria-label="Filter zurücksetzen">
  <span aria-hidden="true">✕</span>
</button>

    Markierte Zeilen wurden geändert

    So prüfen Sie es Gehen Sie mit der Tabulatortaste auf das Kreuz. Ein Vorleseprogramm sagt „Filter zurücksetzen, Schaltfläche“.

Markierter BefundKalibrierseite 0025 · Konzertplanung
Bild 1 von 6
Konzertplaner mit drei Gewichtungsreglern links und Ergebnis rechts. Der erste Regler unter „Vokaler Schwerpunkt“ ist als Befund markiert. Volle Auflösung wird geladen …

WCAG 4.1.2

Verstoß

MarkierungDie Markierung zeigt das geprüfte Element im Seitenkontext. Technische Barrieren können im Bild selbst unsichtbar bleiben.

ÄndernVerknüpfen Sie „Vokaler Schwerpunkt“ programmatisch mit dem Regler.

Werbung

Kostenloser Website-Barrierefreiheits-Check

Website auf Barrierefreiheit prüfen.

Technische WCAG-Warnsignale erkennen. Kritische Stellen zuerst prüfen.

Werbung

Ein letzter Schritt

Prüfen, bevor Sie gehen.

Finden Sie automatisch erkennbare Barrieren auf Ihrer eigenen Website.

Website prüfen

Kostenlos starten · keine Installation

Automatisches Screening. Tastaturbedienung und Screenreader bleiben manuelle Prüfung.