9.2.3 Machen Sie Sortierung und Filter mit Tastatur und Screenreader bedienbar

Hintergrund

Manchmal sind Sortierungsmöglichkeiten nur mit der Maus bedienbar, z.B. wenn Tabellenheader ausschließlich über mausabhängige JavaScript Eventhandler gesteuert werden, und keinen Tastaturfokus erhalten können.

In den meisten Fällen landen Screenreader- oder TastaturnutzerInnen nach dem Neusortieren oder Filtern wieder am Seitenbeginn und müssen sich erst wieder zur Produktliste durcharbeiten.

Maßnahmen

  • Verwenden Sie HTML Elemente, die mit Tastatur ansteuerbar sind und EventHandler, die mit Tastatur bedienbar sind.
  • Versehen Sie Selectboxen zur Sortierung möglichst mit einem Submit Button und machen Sie die Auswahl mit der Tastatur bedienbar.
  • Verwenden Sie onSubmit, nicht onChange als Eventhandler, da sonst in manchen Browsern Probleme bei der Tastaturbedienung auftreten können.
  • Markieren Sie den Tastaturfokus deutlich.
  • Machen Sie Klickflächen groß genug.
  • Versehen Sie Filterkategorien mit korrektem semantischem Markup (Headline, Liste….)
  • Setzen Sie beim Neuladen der Seite nach Umsortierung oder Filterung den Fokus wieder zur Produktliste oder zum Kategoriefilter, nicht an den Anfang der Seite. Alternativ dazu können entsprechende Sprungmarken am Seitenanfang angeboten werden.
  • Werden Inhalte dynamisch verändert oder nachgeladen, müssen Screenreader über diese Änderungen der Inhalte informiert werden. Die eleganteste Möglichkeit bietet dazu WAI-ARIA, das aber noch nicht von allen Browsern und Screenreadern unterstützt wird.

Wer profitiert davon

  • blinde NutzerInnen
  • NutzerInnen mit motorischen Einschränkungen

Beispiel

Geizhals Suchergebnis Screenreader

geizhals.at: Der Screenshot zeigt die Produktansicht für MP3 Player, wie sie mit einem Screenreader vorgelesen wird (Darstellung mit Webformator, der dem Screenreader Virgo vorgeschalten wird). In der linearisierten Ansicht wird klar, wie wichtig gute Strukturierung im Quellcode ist. Die Sortierung ist bedienbar.