„Auswahl ändern“-Modalfenster barrierefreier

[NinaG]

Wenn man z.B. in einer Seite vom Typ „Interne Weiterleitung“ auf den „Auswahl ändern“-Button klickt, öffnet sich ein Modalfenster. Es gibt damit für Screenreader gleich mehrere Probleme:

1. Technisch gesehen ist das Modalfenster einfach ein Teil der schon geöffneten Seite und befindet sich im Quellcode ganz am Ende. Nach dem Klick auf den Button ist es für Screenreader-Nutzer nicht klar, dass sich irgendwo ein Modalfenster geöffnet hat und wie sie hinkommen. Es wäre gut, wenn Contao automatisch nach dem Klick auf den „Auswahl ändern“-Button den Fokus auf den Rahmen des Modalfensters legt. Ergänzend sollte das Modalfenster eine passende Seitenregion + ARIA-Label haben: <div class="simple-modal" id="simple-modal" role="region" aria-labelledby="simple-modal-title">...<h1 id="simple-modal-title">Weiterleitungsseite</h1>...</div>

2. Das Suchfeld im Modalfenster hat kein Label. Es wäre gut, wenn das Label (ggf. mit der Klasse "invisible") ergänzt wird.

3. Die Radioboxen haben keine Labels. Es wäre gut, wenn die Seitennamen die jeweils passenden Labels zugewiesen bekommen. Falls das zuviel Stress mit dem Backend macht, sollten die Radioboxen zumindest die entsprechenden aria-label="" Attribute (als Inhalt jeweils der Seitenname) erhalten, so dass sie klar zuordenbar sind.

4. Es ist für Screenreader-Nutzer sehr irritierend, dass die visuellen „Schließen“- und „Anwenden“-Buttons technisch gesehen einfache Links sind. Das ist semantisch unpassend und für Screenreader-Nutzer so nicht zu erwarten. Es wäre sehr gut, wenn das auch technisch echte <button> wären.