60 Prüfschritte prüfen 50 Anforderungen der BITV.
-
Seite 1: BITV-konform
- Anmerkungen ohne Punktabzug: Unter der Überschrift "DAS KÖNNTE SIE AUCH INTERESSIEREN" hat das Bild über "Staatliche Schlösser und Gärten" einen leeren Alternativtext, was richtig ist, da es so als dekorativ markiert ist. Allerdings sollte es dementsprechend auch kein title-Attribut enthalten.
- Anmerkungen ohne Punktabzug: Die Bilder unter der Überschrift "Social Media" haben, wenn man unten den Reiter / den Tab in der
tablist "Instagram" ausgewählt hat, keine Alternativtexte. Hier sollten entweder leere oder sinnvolle Alternativtexte vergeben werden. Unter den anderen Social Media Reitern / Tabs wurden korrekt leere oder sinnvolle Alternativtexte vergeben. - Nur Anmerkung: Bilder bei "Impressionen": Informationen zum Bild sind sowohl im title als auch im Alternativtext vorhanden. Man könnte im Alternativtext Informationen zum Bild bennenen und im title die Klick-Aktion, also "Bild vergrößern". Betrifft alle interaktiven Bildelemente auf der Seite.
- Bei den drei Youtube Videos liest der Screenreader jeweils "Youtube Video in Lightbox" vor. Der eigentliche Alternativtext wie "'Startbildschirm des Filmes "Die wahren Schätze der Staatlichen Schlösser und Gärten Baden-Württemberg, Teil 1" wird durch das aria-label "Youtube Video in Lightbox" überschrieben. Die aria-label müssen hier entfernt werden.
Seite 9: BITV-konform
- Anmerkungen ohne Punktabzug: Das Bild "Modernes Catering in historischem Ambiente in Residenzschloss Ludwigsburg" hat als aria-label "Bild in Lightbox: Modernes Catering in historischem Ambiente in Residenzschloss Ludwigsburg". Besser wäre "Vergrößerte Bildansicht: Modernes Catering in historischem Ambiente in Residenzschloss Ludwigsburg". Analog zu dem Bild darüber.
Seite 2, 3, 4, 5, 6, 7, 8: BITV-konform
-
Seite 1: BITV-konform
- Das Bild "GESCHLOSSEN" in der Rubrik "Aktuelles" enthält einen nicht aussagekräftigen Alternativtext "Motiv der Staatlichen Schlösser und Gärten Baden-Württemberg". Da das Bild zu dem nebenstehenden Text keine weiterführenden Informationen enthält sollte ein leerer
alt-Tag gesetzt werden.
Seite 6: BITV-konform
- Unter der Überschrift: "SYMBOLE – WAS STECKT DAHINTER?" sind verschiedene Kacheln zu sehen. Wenn man auf den Button rechts unten auf einer der Kacheln draufklickt, dann öffnet sich eine Art kleines Fenster, das ein Bild und einen Text enthält. Die Bilder in diesen Fenstern habe alle keine Alternativtexte, stattdessen sollte entweder ein leerer Alternativtext, um es als dekorativ zu markieren, oder ein sinnvoller Alternativtext vergeben werden. In diesem Fall wäre vermutlich ein sinnvoller Alternativtext besser.
- Das Bild "Zitate" enthält einen nicht aussagekräftigen Alternativtext "Illustration: points. Gesellschaft für digitale Informationssysteme mbH". Das Bild kann als nicht informationstragend betrachtet werden und sollte einen leeren alt-Tag erhalten.
- Das Bild "Themenjahr-Broschüren" enthält einen nicht aussagekräftigen Alternativtext "Motiv der Staatlichen Schlösser und Gärten". Das Bild kann als nicht informationstragend betrachtet werden und sollte einen leeren alt-Tag erhalten.
- Das Bild des Videos "Unendlich schön" enthält einen nicht aussagekräftigen Alternativtext "Motiv der Staatlichen Schlösser und Gärten". Das Bild kann als nicht informationstragend betrachtet werden und sollte einen leeren alt-Tag erhalten.
Seite 9: BITV-konform
Das Bild "Barockschloss Mannheim, Gartensaal" enthält den falschen Alternativtext "Barockschloss Mannheim, Rittersaal". Es müsste "Barockschloss Mannheim, Gartensaal" heißen.
Seite 2, 3, 4, 5, 7, 8: BITV-konform
-
Die icon-fonts im Footer-Bereich (Social Media, Druckersymbol etc.) sollten mit aria-hidden="true" vor Screenreadern versteckt werden.
Seite 1: BITV-konform
- Siehe allgemeine Anmerkungen.
- Die dekorativen Pfeil-Icons "icon icon-arrow-down" sollten mit aria-hidden="true" vor Screenreadern
versteckt werden.
Seite 4: BITV-konform
- Siehe allgemeine Anmerkungen.
- Das dekorative Icon "icon-schloesser" bei "Themen der Rubrik" sollte mit aria-hidden="true" vor Screenreadern versteckt werden.
Seite 5: BITV-konform
- Siehe allgemeine Anmerkungen.
Seite 6: BITV-konform
- Siehe allgemeine Anmerkungen.
- Die dekorativen Pfeil-Icons "icon icon-arrow-down" sollten mit aria-hidden="true" vor Screenreadern versteckt werden.
Seite 8: BITV-konform
- Siehe allgemeine Anmerkungen.
Seite 9: BITV-konform
- Siehe allgemeine Anmerkungen.
Seite 2: BITV-konform
- Siehe allgemeine Anmerkungen.
Seite 3: BITV-konform
- Siehe allgemeine Anmerkungen.
Seite 7: BITV-konform
- Siehe allgemeine Anmerkungen.
- Das "Dummy"-Bild für Elke Ziegler dient rein dekorativen Zwecken und sollte deswegen mit einem leeren
#alt#-Attribut ausgezeichnet werden. - Das dekorative Icon "icon-schloesser" bei "Themen der Rubrik" sollte mit
aria-hidden="true" vor Screenreadern versteckt werden.
-
Seite 1: BITV-konform
- Die 3 Videos "Die schönsten Monumente in Baden-Württemberg" und "Die wahren Schätze" Teil 1 und 2 unter der Überschrift "DAS KÖNNTE SIE AUCH INTERESSIEREN" enthalten nur automatisch generierte Untertitel und keine anderen Textalternativen wie beispielsweise eine Transkription. Die automatische Generierung der Untertitel durch YouTube erzeugt manchmal Fehler, z.B. wird für "Monument" --> "moment" eingeblendet. Aber funktioniert größtenteils gut.
- Das Gleiche gilt für die Videos unter der Überschrift "Social Media" unter dem Reiter / Tab in der
tablist "YouTube".
Seite 2, 3, 4, 5, 6, 7, 8, 9: nicht anwendbar
-
Seite 1: BITV-konform
- Die Videos unter der Überschrift "Social Media" unter dem Reiter "YouTube" sind ohne visuelle Inhalte teilweise nicht verständlich. Es sind jedoch, wenn man das Video in YouTube öffnet Volltextalternativen vorhanden.
- Die in den Videos eingeblendeten Texte wie z.B. "EWIGKEIT" werden nicht gesprochen.
Seite 2, 3, 4, 5, 6, 7, 8, 9: nicht anwendbar
-
Seite 1: BITV-konform
Seite 2, 3, 4, 5, 6, 7, 8, 9: nicht anwendbar
-
Seite 3: BITV-konform
- Bei den Suchergebnissen ist die braune Schrift unter den Datumsangaben als
h3 Überschrift ausgezeichnet. Die graue Überschrift über dem Datum hat keine Überschriftenauszeichnung. Man weiß somit nicht, um welches Schloss oder Kloster es sich handelt. Hier sollte die graue Überschrift mit h3 und die braune Überschrift dann mit h4 ausgezeichnet werden.
Seite 4: BITV-konform
- Die
h2 Überschrift "Wählen Sie hier den passenden Raum für Ihren Anlass aus" hat keinen Inhalt. Daher ist es sinnvoller, die nachfolgenden h2 Überschrift "Finden Sie das richtige Ambiente für Ihre Veranstaltung" als h3 Überschrift auszuzeichnen. Alternativ könnte man eine der Überschriften komplett rausnehmen. - Im Formular fehlt die
h2 Überschriftenauszeichnung bei "Weitere Filter". - Anmerkung ohne Punktabzug: Da die Ergebnisse der Suche untergeordnet zum Suchformular
H2 "Finden Sie das richtige Ambiente für Ihre Veranstaltung" gehören, sollte die H2 Überschrift "134 Treffer" eine H3 Überschrift sein und die Suchergebnisse selbst dann eine H4 Überschrift (aktuell als H3 ausgezeichnet).
Seite 6: BITV-konform
- Die Überschrift "Symbole – was steckt dahinter?" ist als
h1 Überschrift ausgezeichnet. Sollte als H2 Überschrift ausgezeichnet werden. - Eine
h1 Überschrift sollte ergänzt werden, die den Inhalt der Seite beschreibt, am besten: "Themenjahr" oder ähnliches. - Bei den vier Bildern mit der Dame (unter "Aktuelles") scheint die Überschriftenauszeichnung zu fehlen. Es ist unklar zu was die Bilder gehören.
- Der sich öffnende modale Dialog bei Klick auf einen der Einträge unter "Symbole - was steckt dahinter" ist mit einer h4 Überschrift ausgezeichnet. Dies sollte mit h2 ausgezeichnet sein.
Seite 9: BITV-konform
- "Weitere Filter" sollte als
h2- oder h3-Überschrift ausgezeichnet werden, da es visuell nach einer Überschrift aussieht und die Checkboxen darunter dadurch gegliedert werden. Momentan ist diese nur durch das Attribut class="headline" gekennzeichnet. - Überschriften wie "Mannheim & Umgebung" oder "Ostalb & Göppingen" über den Details der Suchergebnisse sollten als
h4-Überschriften (oder gegebenenfalls h3) implementiert werden, diese sind momentan mit keinen nativen HTML-Strukturelementen sondern mit dem Attribut class="headline" implementiert. - Anmerkung ohne Punktabzug: Da die Ergebnisse der Suche untergeordnet zum Suchformular
H2 "Finden Sie das richtige Ambiente für Ihre Veranstaltung" gehören, sollte die H2 Überschrift "134 Treffer" eine H3 Überschrift sein und die Suchergebnisse selbst dann eine H4 Überschrift (aktuell als H3 ausgezeichnet).
Seite 1, 2, 5, 7, 8: BITV-konform
-
Seite 1: BITV-konform
- Die Elemente des Image-Karussells sollten als Liste ausgezeichnet werden, vergleiche https://www.w3.org/WAI/tutorials/carousels/structure/.
- Die Kacheln unter "Highlights" stellen eine Liste dar und sollten demnach als Liste implementiert werden.
- Die vier Einträge unter "Führungen und Veranstaltungen" stellen eine Liste dar und sollte als Liste ausgezeichnet werden.
Seite 6: BITV-konform
- Die vier Bilder mit der Dame stellen eine Liste dar und sollten somit als Liste ausgezeichnet werden.
Seite 2, 3, 4, 5, 7, 8, 9: BITV-konform
-
Seite 1: BITV-konform
- Die inpage-Navigation "Impressionen", "Hightlights", ist mit i anstelle von em ausgezeichnet.
Seite 4: BITV-konform
- Absätze werden teilweise mit einer Kombination von leeren
p-Elementen erzeugt, hier sollten stattdessen CSS-Techniken wie padding oder margin verwendet werden.
Seite 6: BITV-konform
- Die inpage-Navigation "Impressionen", "Hightlights", ... ist mit i anstelle von em ausgezeichnet.
Seite 9: BITV-konform
- Absätze werden teilweise mit einer Kombination von
p-Elementen und erzeugt, hier sollten stattdessen CSS-Techniken wie padding oder margin verwendet werden. - Es existiert ein leeres p Element direkt nach der h1 Überschrift "...VERANSTALTER" sowie nach dem nachfolgenen Textabschnitt. Diese sollten entfernt werden.
Seite 2, 3, 5, 7, 8: BITV-konform
-
Seite 2: BITV-konform
- Die
fieldset-Elemente werden an den falschen Stellen eingesetzt, einmal ist statt Formularelementen nur ein p-Element vorhanden und ein weiteres mal wurde ein komplett leeres fieldset-Element verwendet. - Diese am besten entfernen.
Seite 1, 3, 4, 5, 6, 7, 8, 9: BITV-konform
-
Seite 1: BITV-konform
- Inhaltsbereich "Impressionen": Am besten man setzt die TABS (Reiterleiste) oben über den Inhalt - man liest die Informationen von oben nach unten und nicht umgekehrt. Die jetzige Implementierung wirkt verwirrend.
Seite 2, 3, 4, 5, 6, 7, 8, 9: BITV-konform
-
Seite 8: BITV-konform
- Der Text "Mit einem Klick auf die Bezeichnungen im unten stehenden Organigramm ..." sollte umformuliert werden. Ein Screenreadernutzer wird mit "untenstehendem Organigramm" nichts anfangen können, zumal das Organigramm unten nicht mit einer Überschrift "Organigramm" o.ä. ausgezeichnet ist.
Seite 1, 2, 3, 4, 5, 6, 7, 9: BITV-konform
-
Seite 1, 2, 3, 4, 5, 6, 7, 8, 9: BITV-konform
-
Seite 2: BITV-konform
Seite 1, 3, 4, 5, 6, 7, 8, 9: nicht anwendbar
-
Seite 1: BITV-konform
- Bei einer Viewportbreite von 332 pixel wird die Karte nicht mehr angezeigt.
Seite 2, 3, 4, 5, 6, 7, 8, 9: BITV-konform
-
Seite 1, 2, 3, 4, 5, 6, 7, 8, 9: BITV-konform
-
- Anmerkung ohne Punktabzug: bei einer Bildschirmauflösung von 1024x768 und einer der Anpassung der Zeilenhöhe auf das 1,5-fache der Textgröße, des Abstands nach Absätzen auf das 2-fache der Textgröße, von Buchstabenabständen auf das 0,12-fache der Textgröße und von Wortabständen auf das 0,16-fache der Textgröße überlappt in der Navigation oben im Banner "Themenjahr 2021" leicht mit dem Symbol für die deutsche Sprache.
Seite 1: BITV-konform
- Siehe "allgemeine Anmerkungen".
Seite 2: BITV-konform
- Siehe "allgemeine Anmerkungen".
Seite 3: BITV-konform
- Siehe "allgemeine Anmerkungen".
Seite 4: BITV-konform
- Siehe "allgemeine Anmerkungen".
Seite 5: BITV-konform
- Siehe "allgemeine Anmerkungen".
Seite 6: BITV-konform
- Siehe "allgemeine Anmerkungen".
Seite 7: BITV-konform
- Siehe "allgemeine Anmerkungen".
Seite 8: BITV-konform
- Siehe "allgemeine Anmerkungen".
Seite 9: BITV-konform
- Siehe "allgemeine Anmerkungen".
-
Seite 1, 2, 3, 4, 5, 6, 7, 8, 9: BITV-konform
-
Seite 1: BITV-konform
- Karte: Wenn man den Kartenfilter (Unsere Regionen) einsetzt, werden angezeigte Monumente nur durch
die andere Farbe von nicht "aktiven" Monumenten unterschieden. Als Lösung könnte man z.B. die
Namen der Monumente anzeigen, um die "aktiven" Monumente von "inaktiven" besser zu
unterscheiden oder einen Rahmen um die aktiven Monument-Icons einblenden.
Seite 5: BITV-konform
- Karte: Wenn man den Kartenfilter (Unsere Regionen) einsetzt, werden angezeigte Monumente nur durch
die andere Farbe von nicht "aktiven" Monumenten unterschieden. Als Lösung könnte man z.B. die
Namen der Monumente anzeigen, um die "aktiven" Monumente von "inaktiven" besser zu
unterscheiden oder einen Rahmen um die aktiven Monument-Icons einblenden.
Seite 2, 3, 4, 6, 7, 8, 9: BITV-konform
-
Seite 1: BITV-konform
Anmerkung: Das Kontrastverhältnis zwischen Vorder- und Hintergrundfarbe bei Stadtnamen auf der Landkarte wie z.B. Freiburg liegt bei 1,8:1." Da rechts noch eine Liste der Locations in ausreichendem Kontrast ist, ist es in Ordnung.
Seite 5: BITV-konform
Anmerkung: Das Kontrastverhältnis zwischen Vorder- und Hintergrundfarbe bei Stadtnamen auf der Landkarte wie z.B. Freiburg liegt bei 1,8:1." Da rechts noch eine Liste der Locations in ausreichendem Kontrast ist, ist es in Ordnung.
Seite 2, 3, 4, 6, 7, 8, 9: BITV-konform
-
Seite 1: BITV-konform
- Anmerkung ohne Punktabzug: Bei Vergrößerung auf 200% und Reduzierung der Bildschirmbreite auf 1280 pixel erscheinen zwei neue Inhalte "Besuchsinformationen" und "Impressionen".
Seite 2, 3, 4, 5, 6, 7, 8, 9: BITV-konform
-
Seite 1: BITV-konform
- Unter der Überschrift "Aktuelles" befindet sich eine Schriftgrafik mit der Beschriftung "geschlossen". Da sich darunter Logos/Symbole befinden ist es ein Grenzfall, aber im Normalfall sollte die Schriftgrafik durch eine echte Schrift mit der dort verwendeten Schriftfarbe und -Art ersetzt werden und die Logos/Symbole darunter als Bild dargestellt werden. Der Grund ist, dass die Schriftgrafiken Vergrößerung verpixelt werden und Nutzer mit ihren assistiven Technologien die Schriftfarbe- und Form nicht anpassen können.
Seite 2, 3, 4, 5, 6, 7, 8, 9: BITV-konform
-
Seite 1, 2, 3, 4, 5, 6, 7, 8, 9: BITV-konform
-
Seite 1, 2, 3, 4, 5, 6, 7, 8, 9: BITV-konform
-
Seite 1, 2, 3, 4, 5, 6, 7, 8, 9: BITV-konform
-
Seite 1, 2, 3, 4, 5, 6, 7, 8, 9: BITV-konform
-
Seite 1, 2, 3, 4, 5, 6, 7, 8, 9: BITV-konform
-
Seite 1, 2, 3, 4, 5, 6, 7, 8, 9: BITV-konform
-
Seite 1: BITV-konform
- Die Sprunglinks auf der Mitte der Seite mit den Namen: "Impressionen", "Highlights", "Regionen", "Aktuelles" und "Auch interessant" sind mit der Tastatur nicht sinnvoll nutzbar, da zwar zu den entsprechenden Stellen hingesprungen wird, aber der Fokus nicht verschoben wird. Als Beispiel, wenn man mit der Tastatur auf den Sprunglink "Regionen" klickt, scrollt zwar der Browser zu der entsprechenden Stelle hin, aber wenn man ein weiteres Mal Tab drückt, dann geht der Fokus stattdessen auf den nächsten Sprunglink "Aktuelles" weiter, anschließend auf "Auch interessant" und danach statt dass der Fokus wie erwartet auf den nächsten Inhalt unter der Überschrift "Regionen" springt, springt dieser zu dem ersten Inhalt nach der Überschrift "Impressionen", da dieser in der Tabreihenfolge nach der Sprunglinknavigation drankommt.
- Es gibt zwei mit
section definierte Regionen, die beide keine Beschriftung haben. aria-label ist hier leer. Damit man die beiden Regionen voneinander unterscheiden kann sollten sie eine entsprechend unterschiedliche Beschriftung haben.
Seite 7: BITV-konform
- Es gibt zwei mit
section definierte Regionen "Kontaktliste", die beide die gleiche Beschriftung haben. Damit man die beiden Regionen voneinander unterscheiden kann sollten sie eine entsprechend unterschiedliche Beschriftung haben. In diesem Fall könnte die Region auch komplett entfernt werden, da die Elemente über eine Überschriftenauszeichnung verfügen.
Seite 2, 3, 4, 5, 6, 8, 9: BITV-konform
-
Seite 1, 2, 3, 4, 5, 6, 7, 8, 9: BITV-konform
-
Seite 1, 2, 3, 4, 5, 6, 7, 8, 9: BITV-konform
-
- Anmerkung ohne Punktabzug: Es sollte vermieden werden, dass die title-Attribute eines Links und der Linktext selbst identisch sind - die Texte werden dann von manchen Screenreadern doppelt ausgegeben. Beispiel "Startseite": Links im Bereich "Unsere Regionen im Überblick".
Seite 1: BITV-konform
- Siehe "allgemeine Anmerkungen".
Seite 2: BITV-konform
- Siehe "allgemeine Anmerkungen".
Seite 3: BITV-konform
- Siehe "allgemeine Anmerkungen".
Seite 4: BITV-konform
- Siehe "allgemeine Anmerkungen".
Seite 5: BITV-konform
- Siehe "allgemeine Anmerkungen".
Seite 6: BITV-konform
- Siehe "allgemeine Anmerkungen".
Seite 7: BITV-konform
- Siehe "allgemeine Anmerkungen".
Seite 8: BITV-konform
- Siehe "allgemeine Anmerkungen".
Seite 9: BITV-konform
- Siehe "allgemeine Anmerkungen".
-
-
Seite 1, 2, 3, 4, 5, 6, 7, 8, 9: BITV-konform
-
Seite 5: BITV-konform
- Im Firefox ist der Fokus auf den Symbolen innerhalb der Karte schlecht zu sehen, hier wäre ein deutlicherer Fokus von Vorteil.
Seite 6: BITV-konform
- Der Fokus unter der Überschrift "SYMBOLE – WAS STECKT DAHINTER?" auf den Sanduhrsymbolen ist je nach Hintergrundbild schlecht zu sehen. Hier wäre ein deutlicherer Fokus von Vorteil.
Seite 1, 2, 3, 4, 7, 8, 9: BITV-konform
-
Seite 1, 6: BITV-konform
Seite 2, 3, 4, 5, 7, 8, 9: nicht anwendbar
-
Seite 1, 2, 3, 4, 5, 6, 7, 8, 9: BITV-konform
-
Seite 1, 2, 3, 4, 5, 6, 7, 8, 9: BITV-konform
-
Seite 1, 2, 3, 4, 5, 6, 7, 8, 9: BITV-konform
-
- Anmerkung ohne Punktabzug: der Sprunglink zu Beginn der Seite "Skip to main" sollte am besten übersetzt werden, beispielsweise: "Zu Hauptinhalt springen". Falls "Skip to main" bleiben sollte, müsste es allerdings mithilfe des
lang-Attributs ausgezeichnet werden. - Anmerkung ohne Punktabzug (da nicht im Scope der Überprüfung): "Header"/"Footer" und Hauptinhalt-Bereiche: Obwohl der Webauftritt in Englisch oder Französisch benutzt
werden kann, wird der Text "Staatliche Schlösser und Gärten Baden-Württemberg" immer in Deutsch angezeigt, ohne dass er mit dem lang-Attribut ausgezeichnet wurde.
Seite 1: BITV-konform
- Siehe "allgemeine Anmerkungen".
Seite 2: BITV-konform
- Siehe "allgemeine Anmerkungen".
Seite 3: BITV-konform
- Siehe "allgemeine Anmerkungen".
Seite 4: BITV-konform
- Siehe "allgemeine Anmerkungen".
Seite 5: BITV-konform
- Siehe "allgemeine Anmerkungen".
Seite 6: BITV-konform
- Siehe "allgemeine Anmerkungen".
Seite 7: BITV-konform
- Siehe "allgemeine Anmerkungen".
Seite 8: BITV-konform
- Siehe "allgemeine Anmerkungen".
Seite 9: BITV-konform
- Siehe "allgemeine Anmerkungen".
-
Seite 1, 2, 3, 4, 5, 6, 7, 8, 9: BITV-konform
-
Seite 1, 2, 3, 4, 5, 6, 7, 8, 9: BITV-konform
-
-
-
Seite 2: BITV-konform
- Anmerkung ohne Punktabzug: Wenn fehlerhafte Eingaben abgeschickt werden, lädt die Seite neu und zeigt die Fehlermeldung am Eingabefeld an. Wünschenswert wäre, wenn die Fehlermeldung direkt nach dem Neuladen vorgelesen wird.
Seite 1, 3, 4, 5, 6, 7, 8, 9: nicht anwendbar
-
Seite 1, 2, 3, 4, 5, 6, 7, 8, 9: BITV-konform
-
Seite 2: BITV-konform
Seite 1, 3, 4, 5, 6, 7, 8, 9: nicht anwendbar
-
Seite 2: BITV-konform
Seite 1, 3, 4, 5, 6, 7, 8, 9: nicht anwendbar
-
Seite 1, 2, 3, 4, 5, 6, 7, 8, 9: BITV-konform
-
- Beide Navigations-Elemente oben auf der Seite:
aria-haspopup und aria-expanded sollten auf Ebene der a Elemente sein und nicht auf Ebene der li Elemente. Siehe auch https://www.w3.org/WAI/tutorials/menus/flyout/. - Da sowohl das
aria-haspopup als auch das aria-expanded Attribute nicht ausgegeben werden, wissen Screenreader Nutzer nicht, dass Untermenüs vorhanden sind. - Anmerkung ohne Punktabzug: Mit dem Screenreader NVDA kann man die Untermenüs mit der Tastatur überhaupt nicht öffnen.
Seite 1: BITV-konform
- In den Reitern / der
tablist unter der Überschrift "Social Media", die "Twitter", "Facebook", "Instagram" und "YouTube" enthalten, sollten folgende Änderungen vorgenommen werden:
1. Jedes Element mit der Rolle tabpanel erhält die Eigenschaft aria-labelledby, die auf das zugehörige tab-Element verweist.
2. Das Element tablist hat ein Label, das durch aria-label bereitgestellt wird.
Vergleiche: https://www.w3.org/TR/wai-aria-practices-1.1/ - Das beiden Image-Karusselle, sind nicht durch die Verwendung passender WAI-ARIA Eigenschaften ausgezeichnet. Zur Behebung können folgende Ressourcen herangezogen werden:
https://www.w3.org/WAI/tutorials/carousels/
https://www.w3.org/TR/wai-aria-practices-1.1/#carousel
https://www.w3.org/TR/wai-aria-practices-1.1/examples/carousel/carousel-1.html - Anmerkung ohne Punktabzug: Bei Videos wurde die Rolle aria-live="polite" verwendet, obwohl die Inhalte nicht durch eine
Nutzeraktion oder automatisch aktualisiert werden.
Seite 2: BITV-konform
- Siehe "allgemeine Anmerkungen".
Seite 3: BITV-konform
- Siehe "allgemeine Anmerkungen".
Seite 4: BITV-konform
- Die h3 Überschrift von "Themen der Rubrik" --> "Firmenkunden & Agenturen" sollte nicht innerhalb des Links sein, sondern außerhalb:
<h3><a>Link</a></h3>. Ansonsten wird die Überschrift als solche nicht immer erkannt. - Anmerkung ohne Punktabzug: Akkordeon-Element bei "Weitere Filter" im Formular:
aria-selected ist hier überflüssig. Dies sollte entfernt werden.
Seite 5: BITV-konform
Siehe allgemeine Anmerkungen.
Seite 6: BITV-konform
Siehe allgemeine Anmerkungen.
Seite 7: BITV-konform
- Anmerkung ohne Punktabzug: Es gibt zwei mit section definierte Regionen "Kontaktliste", die beide die gleiche Beschriftung haben. Damit man die beiden Regionen voneinander unterscheiden kann sollten sie eine entsprechend unterschiedliche Beschriftung haben. In diesem Fall könnte die Region auch komplett entfernt werden, da die Elemente über eine Überschriftenauszeichnung verfügen. (siehe auch 2.4.1 "Bereiche überspringbar", die Bewertung hat dort stattgefunden).
Seite 8: BITV-konform
- Die h3 Überschrift von "Themen der Rubrik" --> "Organigramm" sollte nicht innerhalb des Links sein, sondern außerhalb:
<h3><a>Link</a></h3>. Ansonsten wird die Überschrift als solche nicht immer erkannt. - Siehe auch allgemeine Anmerkungen.
Seite 9: BITV-konform
- Siehe auch allgemeine Anmerkungen.
