5 von 5 Seiten BITV-konform
60 Prüfschritte prüfen 50 Anforderungen der BITV.
Bereich Kontakt: Foto von Jaak Beil sollte diese Info ("Foto Jaak Beil") im Alternativtext tragen.
Das Foto mit alt="Mehr als 60 Teilnehmende beim 3. Runden (Online-) Tisch" zeigt etwas völlig anderes (zwei Arme, die sich fassen). Das Bild hat eher Schmucklbildcharakter, sollte besser leeres alt-Attribut tragen.
Hierarchiesprung: Die h3 Ergebnisse als Landkarte sollte auf Ebene h2 stehen.
Möglichkeit für eine konsistentere Ergebnisdarstellung: Eine versteckte h2-Überschrift "Ergebnisse als Liste" hinzufügen und alle Ergebnisse eine Ebene tiefer als h3 auszeichnen.
Die h2 Datenschutz könnte deutlicher auch visuell als Überschrift hervorgehoben sein.
Navigation Barrierefreiheits-Optionen nicht als Liste umgesetzt - sollte mit ul und li umgesetzt werden.
Vergl. allgemeine Anmerkungen.
Vergl. allgemeine Anmerkungen.
Vergl. allgemeine Anmerkungen.
Vergl. allgemeine Anmerkungen.
Vergl. allgemeine Anmerkungen.
Startesite, Aktuelles:
"Behindertenhilfe und Sport-Aktive Partner vor Ort 04.12.2020" und weitere Texte in Cards unter Überschriften sind als div-Elemente ausgezeichnet.
Siehe allgemeine Anmerkung.
Die Fehlermeldung "Bitte klicken Sie dieses Kästchen an, um fortfahren zu können." sollte mit aria-describedby vom Feld aus referenziert werden.
Auch bei den anderen eher generischen Fehlermeldungen wäre ggf. ein Anbindung über aria-describedby sinnvoll.
Vergl. auch Hinweise zu 3.3.3a Korrekturvorschläge.
Usabiity-Hinweis ohne Punktabzug:
Für kognitiv beeinträchtigte Menschen (hier eine wichtige Nutzergruppe) wäre ein expliziter Suchen-Schalter hilfreich.
Vergleiche die Diskussion auf https://webaim.org/discussion/mail_thread?thread=7063
Klicken Sie hier um ein Dokument hochzuladen: Dokument abgeschnitten, aber Funktion insgesamt wohl noch verständlich brauchbar.
Die Checkbox "Ich stimme zu" hat im unchecked-Zustand kein ausreichendes Kontrastverhältnis (IST: 1,9:1 - SOLL: 3:1).
Links in :visited-Zustand haben keine fest definierte Vordergrundfarbe und lassen sich ändern (im Gegensatz zum Hintergrund)
Empfehlung: Vordergrundfarbe von a:visited definieren.
Beim kleineren Viewport (z.B. 1024px breit) ist der Suchen-Button bei größeren Textabständen nicht mehr sichtbar.
Empfehlung: Umbruch ermöglichen, ähnlich wie bei der blauen Leiste auf der Startseite (Kontrast, Schriftgröße, ...), und Abschneiden vermeiden.
Vergl. allgemeine Anmerkung.
Vergl. allgemeine Anmerkung.
Vergl. allgemeine Anmerkung.
Vergl. allgemeine Anmerkung.
Vergl. allgemeine Anmerkung.
Elemente in der Pagination haben keine definierte Vordergrundfarbe und daher bei Nutzung eigener Farbschemata ggf. kein ausreichendes Kontrastverhältnis (IST: 1,3:1 - SOLL: 3:1).
Die "Vor- und Zurück-Navigation" hat keine definierte Vordergrundfarbe und erfüllt daher und daher bei Nutzung eigener Farbschemata ggf. kein ausreichendes Kontrastverhältnis (IST: 1,3:1 - SOLL: 3:1).
Ausklapp-Karte:
Die Popups zu Vereinen auf der Karte können selbst nicht über die Tastatur aufgerufen werden, die Liste darüber dient jedoch als eine tastaturbedienbare Alternative (auch wenn die angebotenen Sportarten erst nach Folgen des Links "Details anzeigen" verfügbar ist, während diese Info schon in den Karten-Popups geboten wird).
In den Popups sind die Links "Details anzeigen" mit role=button tastaturbedienbar, ebenso das Schließen-Icon. Es wäre zu überlegen, die Positionsmarker auf der Karte dann auch tastaturaktivierbar zu machen, sobald die Karte ausgeklappt wird - die Marker bräuchten dann einen zugänglichen Namen (der jeweilige Vereinsname über aria-label ). Die Popups müssten dann entsprechend auch mit role="dialog" und aria-modal="true" ausgezeichnet werden. Erforderlich ist dies wegen der verfügbaren tastaturbedienbaren Alternative jedoch nicht.
In der jetzigen Umsetzung sollte auch der Button "Karte anzeigen" für Screenreader-Nutzer versteckt sein.
Die eckigen Klammern werden vom Screenreader störend ausgegeben und sollten aus den title entfernt werden.
Siehe allgemeine Anmerkung.
Siehe allgemeine Anmerkung.
Siehe allgemeine Anmerkung.
Siehe allgemeine Anmerkung.
Siehe allgemeine Anmerkung.
Für Erhöhung des Kontrastes gibt es ein Bedienelement, die Bezeichnung wäre besser "Kontrast erhöhen".
Die durchgehend gleichen Links "Details anzeigen" werden nur über das title-Attribut differenziert. Diese werden aber nicht in allen Browser/Screenreader-Kombinationen ausgegeben, z.B. nicht in der wichtigen Kombi Edge/Sprachausgabe.
Die Anforderung ist aber erfüllt über die vorgängige h2-Überschrift mit dem Vereinsnamen.
Besser wäre die Einbeziehung des Vereinsnamens über aria-label. Dessen Wert auf dem Link "Details anzeigen" könnte dann zuerst den Vereinsnamen enthalten, gefolgt von "Details anzeigen". Auch eine Umsetzung mittels aria-labelledby mit Verweis auf die vorgängige Überschrift ist möglich, dazu bräuchten die h2 dann eindeutige id Attribute.
Der Begriff "Webseiten Erklärung" ist für manche Nutzer sicher nicht bekannt. Besser benannt wäre der Schalter ggf. mit "Webseite vorlesen".
Die Karte mit den Standorten lässt sich auf dem Smartphone nur mit einer Spreizgeste zoomen. Es gibt keine alternativen Buttons fürs Zoomen, die Karte lässt sich aber als Medienalternative zur Listenansicht betrachten.
Die h2 Save the date im Bereich Aktuelles ist ohne Sprachauszeichnung.
Der Verein "Hannover United e.V."hat ein anderssprachiges Wort ("United"). Empfehlung: "United" in span-Element einschließen und um das Attribut lang="en" ergänzen.
Zu englischsprachigen Blätterbuttons der Pagination vergl. Bewertung in Prüfschritt 1.1.1a.
Bei Eingabe lediglich der ersten Zahlen einer Postleitzahl wäre es hilfreich, die Eingabe dennoch zu verarbeiten und alle Ergebnisse anzuzeigen, die mit der eingegebenen Zahl beginnen. Zurzeit kommt nur die ggf. irreführende Meldung "KEINE Ergebnisse".
Die eingeblendeten Hilfstexte wie "Bitte halten Sie sich an das vorgegebene Format" oder "Bitte füllen Sie dieses Feld aus" sollten mittels aria-describedby von dem Feld referenziert werden, zu dem sie gehören. Vergl. auch Prüfschritt 2.4.6a (Aussagekräftige Beschriftungen) zu Beschriftungen wie PLZ.
Falls wirklich die Eingabe der gesamten Postleitzahl mit fünf Stellen zwingend ist, wäre es hilfreich, bei kürzeren Eingaben auf diese Tatsache klar hinzuweisen, etwa "Bitte geben Sie die komplette Postleitzahl mit fünf Stellen ein." Vergl. aber auch Hinweise in Prüfschritt 3.3.1a "Fehlererkennung".
Die Fehlermeldungen könnten aussagekräftiger sein, z.B. bei Postleitzahl nicht "Bitte halten Sie sich an das vorgegebene Format" sondern "Bitte geben Sie eine gültige Postleitzahl mit 5 Ziffern ein", oder nach Eingabe einer nicht validen E-Mail-Adresse, "Bitte geben Sie eine valide E-Mail-Adresse ein."
Fußbereich: die Rolle contentinfo bzw. das native footer sollte nur einmal gesetzt werden.
Usability-Hinweis ohne Punktabzug:
Eine generierte Statusmeldung mit der Anzahl der gefundenen Einträge am Beginn der Ergebnisse und mit role="status" ausgezeichnet würde die nicht-visuelle Nutzung besser unterstützen.
