Umsetzung

• 

  Fokusreihenfolge ist logisch nachvollziehbar

  Beim Durchtabben der Bedienelemente sollte die Reihenfolge im Wesentlichen der visuellen Anordnung folgen. Der Fokus darf nicht willkürlich springen, etwa vom Header zum Footer und zurück.

  Elemente, die gerade visuell verdeckt sind – wie Links in zugeklappten Navigationsmenüs – dürfen auch per [TAB] nicht erreichbar sein.

   

  WCAG-Technik(en) in Englisch:

  • G59: Platzieren Sie die interaktiven Elemente in einer Reihenfolge, die den Sequenzen und Beziehungen innerhalb des Inhalts folgt

• 

  Eingeblendete Inhalte sind bedienbar

  Werden durch Eingabe oder Klick neue Elemente eingeblendet, sollten diese im Quellcode direkt unter dem auslösenden Element stehen. Das muss deswegen so sein, weil man mit der Tab-Taste immer linear durch die Webseite navigiert.

  Beispiel:

  Erscheinen nach dem Ausfüllen eines Formularfelds neue Felder, dürfen diese nicht oberhalb des ausgefüllten Felds eingeblendet werden, sonst bemerkt ein Screenreader-Nutzer sie nicht. Er müsste sich dafür »rückwärts« bewegen. Wenn eine Aktion ein Modal einblendet, gilt:

  • Beim Öffnen muss der Fokus auf das eingefügte Modal verschoben werden. Best Practice ist es, den Fokus auf den Schließen-Button zu legen.
  • Beim Schließen muss der Fokus auf das auslösende Element (Button) zurückverschoben werden.

  Endet eine Liste von Suchergebnissen mit einem Button »Mehr laden«, soll der Tastaturfokus nach dem Auslösen des Buttons auf das erste neu geladene Element gesetzt werden.

  WCAG-Technik(en) in Englisch:

  • SCR26: Einfügen dynamischer Inhalte in das Dokumentobjektmodell unmittelbar nach dem Triggerelement