Punkte: 98,75 von 100 (sehr gut zugänglich)
Geprüft wird die Seite "Suchergebnisse" nach Eingabe von "Personalausweis" im Suchfeld auf Startseite und Aktivieren der Suche.
Mit Prüfung der Fehlermeldungen bei unvollständiger und falscher Eingabe.
Der Alternativtext "button" auf dem grafischem Suchen-Schalter ist nicht hilfreich. IN FF/NVDA kein großes praktisches Problem, denn ein sinnvoller Alternativtext wird dann über title ("Suche ausführen") vermittelt. Dieser kann aber ggf. (je nach Screenreadereinstellung und Browser) auch nicht ausgegeben werden, wenn alt als accessible name verwendet wird und deshlb title nicht ausgegeben wird (so bei Nutzung von IE / NVDA). Durch die ausreichende Beschriftung des unmittelbar vorangehenden Suchfeldes entsteht für die meisten nicht-visuellen Nutzer wohl kein erhebliches praktisches Problem.
"Icon Suche schließen": Icon ist im Alternativtext überflüssig.
Hinweis: bei Nutzung von IE (/ NVDA wird aud dem Suche schließen-Icon bei Fokussierung nur "blank" ausgegeben. (Evtl. ein Bug oder Folge einer spezifischen Situation der Testumgebung).
Vergl. allgemeine Anmerkung.
Vergl. allgemeine Anmerkung.
Vergl. allgemeine Anmerkung.
Vergl. allgemeine Anmerkung.
Vergl. allgemeine Anmerkung.
Punktabzug: 0,75 Punkte
Einige Mängel in der clientseitigen Fehlerbehandlung:
1. Wenn man mehrere Fehler gemacht hat, wird nur der erste Fehler ausgegeben, man muss das Formular erst wieder abschicken, um den zweiten Fehler mitzukriegen und zu "erkennen".
2. Das Label wird nicht mit ausgegeben. Man kann also das Feld nicht optimal "erkennen". Der Nutzer muss erst aus dem Formularmodus, um dann mit den Pfeiltasten das Label zu erkunden.
3. Die clientseitige Fehlererkennung prüft die erforderliche Semantik von Email-Adressen nicht vollständig und führt damit ggf. zu falschen Schlüssen. Eingaben ohne Toplevel-Domain wie aaa@ddd werden z.B. nicht beanstandet - stattdessen wird eine Meldung wird gezeigt, die impliziert, dass die Nachricht erfolgreich übermittelt wurde, was klar nicht der Fall sein kann.
4. Die temporäre browerseitige Fehlermeldung wird abhängig von der Höhe des Viewports über dem position:fixed-Headerbereich angezeigt und ist deshalb visuell ggf. nicht zuzuordnen. Sie verschwindet, wenn man die Seite scrollt, um zu sehen, auf welches Feld sie sich bezieht. Besser wären permanent sichbare Fehlermeldungen, die sich auch nach Scrollen visuell zuordnen lassen, oder zumindest eine konkrete Benennung des nicht ausgefüllten Pflichtfeldes "Nachname" in der Fehlermeldung.
5. Die visuelle Hervorhebung nicht oder nicht vollständig ausgefüllter Felder nach dem Abschicken des Formulars ist nicht einheitlich: Das select "Anrede" wird bei fehlender Eingabe rot unrahmt, nicht jedoch die Pflichtfelder Nachname und E-Mail.
Punktabzug: 0,5 Punkte
Die Nachrichten-Einträge unter der h3 "Aktuelle Nachrichten" sind visuell als Überschriften kenntlich. Sie sind als dt-Einträge einer Definition List dl ausgezeichnet, sollten aber besser mit dem konventionell erwarteten Überschriften-Markup (#h4#) ausgezeichnet sein, das der visuellen Umsetzung entspräche. Das Konstrukt dt - dl ist für Glossar-Einträge und ähnliche Definitionen vorgesehen und für Nachrichten weniger brauchbar.
Die Social-Media Links sollten auch als Liste ausgezeichent sein.
Vergl Hinweise zu Prüfschritt 1.3.1a (Überschriften).
Die Inhaltsbox Ausschreibungen auf der Startseite unter der Überschrift Nützlich und wissenswert enthält einen hervorgehobenen Text, der in allen anderen Boxen korrekt mit strong ausgezeichnet ist. In dieser Box über b. Flüchtigkeitsfehler.
Das sup Element ist für die Einbindung von Hinweisen zu Formularfeldern nicht vorgesehen. Laut HTML Spec ist es vorgesehen für hochgestellten Text, etwa Potenzen von Zahlen.
Fehlermeldung "Das Formular ist nicht gültig, da das Sicherheitstoken falsch oder abgelaufen ist. Sie müssen das Formular neu laden. Formular jetzt neu laden", schwarz auf braunrot) hat einen Kontrast von nur 3,3:1 (SOLL: 4,5:1).
Besser wäre ggf. Suchergebnisse | Meerbusch.
Zwei unsichtbare Fokuspositionen auf der (ausgeblendeten) Suche.
Beachte aber allgemeine Anmerkung.
Beachte aber allgemeine Anmerkung.
Beachte aber allgemeine Anmerkung.
Beachte aber allgemeine Anmerkung.
Beachte aber allgemeine Anmerkung.
Hinweis: Die hellblaue 5px Outline (#D7E4EF) zur Fokushervorhebung auf Logo Such-Icon, und grafischem Such-Schalter hat bei den ersten beiden einen Kontrast von nur 1.3:1 (Hellblau auf Weiß).
Zusätzlicher Hinweis: Diese Hervorhebung würde die kommende Anforderung in WCAG 2.1 (1.4.11 Non-text Contrast) nicht erfüllen. Kein Problem, wenn der Hintergrund der Menüeinträge diese Farbe annimmt, da hier Links zusätzlich unterstrichen werden.
Responsive Ansicht:
Tastatur-Fokushervorhebung auf dem wichtigen Hamburger-Iclon nur über Systemkranz (Farbwechsel bei Maus-Fokussierung - von schwarz zu blau - unwesentlich deutlicher).
Vergl. aber allgemeinen Hinweis.
Vergl. aber allgemeinen Hinweis.
Vergl. aber allgemeinen Hinweis.
Vergl. aber allgemeinen Hinweis.
Vergl. aber allgemeinen Hinweis.
Vergessen: Englischer Bestandteil der Veranstaltungsüberschrift "SAM: strings & more - pure celtic sound.." wurde nicht ausgezeichnet. Kein großes praktisches Problem.
Die Eingabehinweise über das title Attribut von sup-Elementen wird (zumindest in FF/NVDA) nicht ausgegeben. Das sup-Element ist vorgesehen für hochgestellten Text, etwa Potenzen von Zahlen.
Zwei "Bitte wählen"-Optionen im selectAnrede.
