6 von 6 Seiten BITV-konform
60 Prüfschritte prüfen 50 Anforderungen der BITV.
Das Seitenlogo (class="header-logo") ist auf Unterseiten verlinkt. Die SVG-Grafiken soll laut Prüfbeschreibung das Attribute role="img" bekommen.
Der Link zurück zur Startseite lautet zudem nur "Go back" bzw. title="Go back to last visited page" – allerdings führt der Logo-Link, wie auch üblich, immer auf die Startseite, nicht auf die zuvor als letztes besuchte Seite.
Siehe allgemeine Anmerkungen.
Siehe allgemeine Anmerkungen.
Siehe allgemeine Anmerkungen.
Siehe allgemeine Anmerkungen.
Siehe allgemeine Anmerkungen.
Siehe allgemeine Anmerkungen.
Hinweis ohne negative Bewertung: die Alternativtexte sind teilweise mit 300 und mehr Zeichen extrem lang. Optimal sind in der Regel maximal 80 Zeichen inklusive Leerzeichen – es sei denn es handelt sich um erklärungsbedürftige Grafiken, wie Diagramme, etc.
Das Seitenlogo (SVG-Grafiken) mit der Klasse "header-logo" soll laut Prüfschrittbeschreibung das Attribute role="img" bekommen.
Hinweis ohne negative Bewertung: Alternativtexte sind für hauptsächlich für blinde Menschen gedacht. Insofern muss man mit Informationen, wie (from left to right) oder (In the Background) oder ähnlichem in Alternativtexten aufpassen. Allerdings nutzen auch Menschen mit starker Sehbehinderung manchmal zur Unterstützung Screenreader, sodass diese Info ggf. nicht komplett sinnbefreit ist.
Das Bild beim Teaser "CBM in Numbers" hat den Alternativtext alt="Trachoma Prevention Control Programm", was nicht dem Inhalt des Bildes entspricht.
Hinweis ohne Bewertung: Die Bilder im Slider oben auf der Startseite sind mit aria-hidden="true" und leerem alt-Attribut versehen, was auch der Empfehlung aus dem entwicklungsbegleitenden Test entspricht. Letztendlich ist es immer Interpretationssache, ob es sich hier um Schmuckgrafiken handelt. Für die Funktion bzw. Verständlichkeit des Sliders ist die aktuelle Lösung besser.
Hinweis ohne negative Bewertung: die SVG-Grafiken im Counter "Your donations support CBM around the world. In 2018 you helped achieve" sollen das Attribute role="img" bekommen.
Siehe allgemeine Anmerkungen.
Siehe allgemeine Anmerkungen.
Siehe allgemeine Anmerkungen.
Siehe allgemeine Anmerkungen.
Siehe allgemeine Anmerkungen.
Siehe allgemeine Anmerkungen.
Hinweis ohne negative Bewertung: Die SVG-Grafiken im Counter "Your donations support CBM around the world. In 2018 you helped achieve" sind eigentlich Schmuckggrafiken und brauchen neben role="img" dann eigentlich auch aria-hidden.
Hinweis oder negative Bewertung: Hier könnte man noch anregen, dass die FAQ-Liste zusätzlich in ein Listen-HTML gepackt werden könnte. Siehe dazu beispielsweise Demo 4 auf der Seite https://scottaohara.github.io/a11y_accordions/
Hinweis ohne negative Bewertung: im Footer ist der Copyright-Hinweis [span]© CBM International[/span] nicht in einem Absatz-Element gegliedert.
Hinweis ohne negative Bewertung: die Versalschreibweise sollte man zur Texthervorhebung vermeiden. Zumal der gleiche Text ja bereits mit [strong]MORE AT-RISK[/strong] hervorgehoben ist. Es gibt Screenreader, die bei Worten in Versalschreibweise in den Buchstabiermodus verfallen. Das macht dann solche Texte ziemlich unverständlich.
Hinweis ohne negative Bewertung: der Zurück-Button und der Spenden-Button am Seitenende überlagern in dieser Ansicht ziemlich viel Content. Trotzdem ist die Seite dadurch nicht grundsätzlich beeinträchtigt. Eine Nutzung ist möglich.
Siehe allgemeine Anmerkungen.
Siehe allgemeine Anmerkungen.
Hinweis ohne negative Bewertung: die weißen Texte in den Social Media-Sharing Buttons werden teilweise aus dem Bad hinausgeschoben und sind so nicht mehr gut lesbar. Aufgrund der Button-Größe und der bekannten Logos von Facebook und Twitter eher ein untergeordnetes Problem.
Siehe allgemeine Anmerkungen.
Hinweis ohne negative Bewertung: die weißen Texte in den Social Media-Sharing Buttons werden teilweise aus dem Bad hinausgeschoben und sind so nicht mehr gut lesbar. Aufgrund der Button-Größe und der bekannten Logos von Facebook und Twitter eher ein untergeordnetes Problem.
Siehe allgemeine Anmerkungen.
Siehe allgemeine Anmerkungen.
Hinweis ohne negative Bewertung: zu lange Optionen im Select-Element führen zu Problemen in der 400 % Zoomansicht. Das betrifft zum Beispiel den Options-Eintrag „2030 Agenda / Sustainable Development Goals". Das Select-Auswahlfenster nimmt sich die Breite des längsten Texteintrages. Wenn möglich sollte man hier also mit eher kürzeren Select-Optionen arbeiten.
Siehe allgemeine Anmerkungen.
Captions mit Copyright-Hinweisen stehen am unteren Teil der Bilder in den Teaser-Boxen immer auf einem leicht transparenten Balken. Im schlechtesten Fall ergibt sich bei einem schwarzen bzw. fast schwarzen Hintergrund ein Kontrastverhältnis von 4,4:1 – notwendiges Minimum wäre 4,5:1. Bitte noch nachbessern.
Im Firefox ist die Feld-Vorbelegung (Placeholder) mit einem Kontrastverhältnis von 2,2:1 zu schwach. Zwar wurde ihm der Farbwert #666 zugewiesen. Dies wäre an sich ausreichend. Jedoch gibt es einen Browser default von opacity. Wäre der Browser-default genutzt worden, wäre der Testschritt erfolreich gewesen. Leider wurde der Placeholder per css angepasst. Wirklich problematisch ist es bei der Suche, wo das Placeholder das einzig sichtbare Label ist.
Siehe allgemeine Anmerkungen.
Siehe allgemeine Anmerkungen.
Siehe allgemeine Anmerkungen.
Siehe allgemeine Anmerkungen.
Siehe allgemeine Anmerkungen.
Siehe allgemeine Anmerkungen.
Hinweis ohne negative Bewertung: bei sehr langen Brotkrümelpfaden rutschen die Trenner-Pfeile aus den Wort-Zwischenräumen raus und bilden eine eigene Kette, was ziemlich irritierend aussieht.
Siehe allgemeine Anmerkungen.
Siehe allgemeine Anmerkungen.
Siehe allgemeine Anmerkungen.
Siehe allgemeine Anmerkungen.
Siehe allgemeine Anmerkungen.
Siehe allgemeine Anmerkungen.
Hinweis zur Verbesserung: Mehrere WAI-ARIA Document Landmarks sind irreführend. Es gibt mehrere Landmarks desselben Typs ohne Label; z. B. complementary. Zusätzlich ist das Hauptmenü unnötig mit zwei ineinander verschachtelten Navigation Landmarks ausgezeichnet; wobei das innere auch kein Label trägt. Das sollten Sie optimieren.
Hinweis ohne negative Bewertung: Im Mobile-View kann man aus der aufgeklappten Navigation heraus am Ende wieder in die Seite tabben, ohne das mobile Menü aktiv zu verlassen. Das ist für blinde Nutzer schwierig. Der Fokus sollte besser im geöffneten Menü zirkulieren, bis man da Menü aktiv verlässt.
Beim Kommentar-Formular fehlt ein Legend-Element für das Fieldset. Ein [legend]Please leave a comment.[/legend] würde beim Verständnis helfen.
Hinweis ohne negative Bewertung: Eine Überschrift oder ein Fieldset mit Legend-Element um den bzw. über dem Filter würde die Funktionen des Filters von vorneherein auch blinden Menschen etwas deutlicher machen.
Das Kommentar-Formular besteht aus drei Feldern, die allesamt Pflichtfelder sind. Das notwendige required-Attribut ist vorhanden. Für sehende Nutzer wird allerdings nur mit einem Sternchen darauf hingewiesen. Die Bedeutung des Sternchens wird erst nach dem Formularfeld erläutert. Der Hinweis sollte vor dem ersten Formularfeld erscheinen. Aufgrund des geringen Formular-Umfangs eher zu vernachlässigen. Sollte aber noch geändert werden.
