0 von 7 Seiten BITV-konform
92 Prüfschritte prüfen 82 Anforderungen der BITV / EN 301 549.
Alle Seiten:
Haus-Icon in der Navigation hat Alternativtext alt="home" und title="Willkommen" beim einschließendem Link - diese Bezeichnungen sind nicht sinnvoll
Empfehlung: alt="Startseite" für die Grafik verwenden; title="Startseite" für den Link verwenden
+
Submit-Button von der "Suche auf der Website" hat keine Beschriftung
Empfehlung: entweder einen visuell versteckten Text als Inhalt des Button-Elementes hinzufügen, oder per aria-label, z. B. "Suchen". Das grafische Element im submit-Button (Font Awesome icon font über CSS content ::before auf dem i-Element) mit aria-hidden="true" verstecken - dabei darf nicht der Link oder Button selbst versteckt werden, nur die Grafik.
+
In der mobilen Ansicht sind die Buttons vom Menü nicht sinnvoll beschrieben, z. B. alt="menu nonactive" für Öffnen und alt="menu active" für Schließen
Empfehlung: ein gleichbleibender zugänglicher Name (Etwa: "Navigations-Menü") über alt-Attribut (oder aria-label), und die Vermittlung des Ausklapp-Zustandes über aria-expanded-Attribut
Siehe allgemeine Anmerkungen
Siehe allgemeine Anmerkungen
Siehe allgemeine Anmerkungen
Siehe allgemeine Anmerkungen
Verlinkte Grafiken verfügen zwar über Alternativtexte und title-Attribute, aber die Bezeichnungen sind nicht aussagekräftig. Aus alt="Kleine Version des Posters zu den Dienstleistungen des FID Romanistik" und title="Poster Serviceangebot FID Romanistik" geht kein Linkziel hervor. Oder bei alt="Die Vorderseite des Infoflyers zum FID-Romanistik (150 Pixel breit)" und title="Flyer FID Romanistik" - hier gibt es noch die überflüssige Angabe zur Breite - das lässt sich aus dem Bild nicht ablesen. Darüber hinaus entstehen Redundanzen zwischen alt- und title-Attributen
Empfehlung: Durch alt-Attribut den Inhalt der Grafik beschreiben inkl. Angabe zum Linkziel (dass die Grafik auf neuer Seite vergrößert wird), alternativ über das title-Attribut diese zusätzliche Information hinzufügen. Eine weitere Möglichkeit wäre, die verlinkten Grafiken aus dem Screenreader-Lesefluss komplett zu entfernen (durch alt=""), weil sie redundant zu den darauffolgenden Textlinks sind
+
Siehe allgemeine Anmerkungen
Siehe allgemeine Anmerkungen
Siehe allgemeine Anmerkungen
Die Grafik mit der Kartenabbildung hat keinen Alternativtext
Empfehlung: alt-Attribut mit einer aussagekräftigen Beschreibung hinzufügen (was und wo auf der Karte ist, damit der gesamte Kontext verständlich wird); Heine Hinweise auf Farben verwenden, weil das ein sensorisches Merkmal ist und gegen einen anderen Prüfschritt verstoßen würde - stattdessen die Namen der Regionen nennen
"Wollen Sie uns etwas mitteilen?" als h3 rutscht automatisch in die davor stehlende h2-Überschrift.
Empfehlung: h2 statt h3 verwenden
Siehe allgemeine Anmerkungen
Siehe allgemeine Anmerkungen
Siehe allgemeine Anmerkungen
"Erster Workshop zur Bedarfsermittlung", "Zweiter Workshop zur Entwicklung bedarfsorientierter Dienste" und "Dritter Workshop zur Datensicherung im Forschungsprozess" als h3 überspringen eine Ebene
Empfehlung: h2 statt h3 verwenden
+
Siehe allgemeine Anmerkungen
"Detailinformationen:" als h3 überschreibt weitere Inhalte inkl. h3 Überschriften, d. h. sollte ihnen übergeordnet sein
Empfehlung: h2 statt h3 verwenden
+
Siehe allgemeine Anmerkungen
"Fachinformationsdienste und ihre Sammlungen zu romanischen Sprachen und Literaturen" als h3 überspringt eine Überschriftenebene
Empfehlung: h2 statt h3 verwenden
+
"Legende:" wird inhaltlich und visuell wie eine Überschrift wahrgenommen, ist aber mit strong ausgezeichnet
Empfehlung: h2 verwenden
+
Siehe allgemeine Anmerkungen
"Kurzvorstellung des FID Romanistik" ist nicht als eine Überschrift ausgezeichnet, sondern mit strong
Empfehlung: h2 verwenden
+
"Materialien zum Download" als h3 überspringt eine Ebene
Empfehlung: h2 statt h3 verwenden
+
Direkt nach "Materialien zum Download" gibt es eine leere h4-Überschrift
Empfehlung: leeres Element löschen
+
Hinweis: Bei den Downloads wären Zwischenüberschriften hilfreich. Die title Attriute, die ggf. Redundanzen erzeugen, auch wenn der Link das Ziel nennen, würde, könnten dann vermieden werden.
+
Siehe allgemeine Anmerkungen
Alle Seiten:
"Suche auf der Website"-Suchfeld hat keine Beschriftung und der Suche-Button hat keine eindeutige Beschriftung
Empfehlung: Alternativtext für Suche-Button hinzufügen, z. B. durch visuell versteckten Text "Suchen" innerhalb des Buttons (die Grafik muss versteckt werden) oder durch aria-label="Suchen" für die Grafik
+
"Suche nach romanistischer Fachliteratur"-Suchfeld ist programmatisch mit einem label-Element verknüpft, aber das label-Element ist leer
Empfehlung: das label-Element mit einer aussagekräftigen Beschriftung vesehen und ggfs. visuell verstecken (position: absolute; ...)
Siehe allgemeine Anmerkungen
Siehe allgemeine Anmerkungen
Siehe allgemeine Anmerkungen
Siehe allgemeine Anmerkungen
Siehe allgemeine Anmerkungen
Siehe allgemeine Anmerkungen
Siehe allgemeine Anmerkungen
Mobile Navigation befindet sich oberhalb der Navigationsleiste mit dem Logo und der Suche, aber wird erst danach angesteuert
Empfehlung: Die Elemente im DOM dort positionieren, wo sie auch visuell erscheinen (ist das Menü oberhalb der Leiste positioniert, so muss das auch davor im DOM stehen)
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Die Karte und die Bezeichnung der Gruppen durch Farben setzt die Wahrnehmung von Farben voraus
Empfehlung: Ergänzend zu dem Farbcode eine Kennzeichnung durch Buchstaben oder Ziffern nutzen (im Text sowie auf der Karte)
autocomplete-Attribut fehlt bei personenbezogenen Eingabefeldern wie etwa Name, E-Mail
Empfehlung: autocomplete-Attibut hinzufügen und einen entsprechenden Wert definieren
Auf der Karte werden verschiedene Regionen ausschließlich durch verschiedenen Farben unterscheiden - diese Farben haben ungenügendes Kontrastverhältnis zueinander (weniger als 3:1)
Empfehlung: Entweder die Farben anpassen (für Kontrast von mehr als 3:1 zueinander) oder auf eine zusätzliche Hervorhebung ergänzend zur Farbe greifen (im Sinne eines weiteren Prüfschritts "Ohne sensorische Merkmale nutzbar")
Mobile Navigationselemente im Menü bekommen bei der Maushervorhebung eine kontrastarme Farbe (zum Hintergrund)
Empfehlung: Farbton anpassen, damit Kontrast zum Hintergrund im Cover-Zustand mindestens 4,5:1 beträgt
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Bis zu einer Fensterbreite von 875 px wird das "Über uns"-Navigationselement komplett durch das Suchfeld verdeckt.
Empfehlung: Das Suchfeld (div#about-fid) in die Listenelement der Navigation aufnehmen, dadurch wird das Suchfeld bei einer nicht ausreichenden Breite auf die neue Zeile umbrechen (Optional kann per CSS auch die max-with so eingestellt werden, dass das Feld beim Umbruch die gesamte Fensterbreite einnimmt)
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Allgemein: Bei manchen breakpoints (z.B. 1200px Viewportbreite) deckt das Ausklapp-Menü über Hover den Seitenpfad / Breadcrumb ab, bei Punkt "Über uns" in allen Viewport-Breiten der Desktopansicht.
Empfehlung: Die Möglichkeit implementieren, das Untermenü über ESC-Taste schließen zu lassen.
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Bereiche (Header, Main, Footer) sind nicht mit entsprechenden semantischen Elementen ausgezeichnet
Empfehlung: HTML5 Elemente für Regionen oder WAI-ARIA document landmarks verwenden
+
Sprunglinks fehlen, insbesondere um zum Hauptinhalt zu gelangen.
Empfehlung: Mindestens einen Spunglink "Zum Hauptinhalt" als erstes Element am Anfang der Seite einbauen (standardmäßig visuell versteckt - kein display: none; - und erscheint beim ersten Tab auf der Seite). Es sind auch weitere Sprunglinks zu anderen Seitenbereichen, z. B. zum Footer usw., sinnvoll.
Siehe allgemeine Anmerkungen
Siehe allgemeine Anmerkungen
Die einzelne Überschriften in "Detailinformationen" sind in Header-Element eingeschlossen.
Empfehlung: Header-Element für die Kopfzeile verwenden, nicht für die Überschriften
+
Siehe allgemeine Anmerkungen
Siehe allgemeine Anmerkungen
Siehe allgemeine Anmerkungen
Siehe allgemeine Anmerkungen
Siehe allgemeine Anmerkungen
Unterpunkte in der mobilen Navigationsind nur visuell versteckt (position: absolute; usw.), dadurch lassen sie sich ansteuern, auch wenn die Inhalte ausgeblendet sind (z. B. das mobile Menü ist geschlossen)
Empfehlung: Für Mobile die geschlossenen und nicht verfügbaren Inhalte per display: none verstecken.
+
Mobile Ansicht: Der Tastaturfokus wird nicht im Ausklappbereich gehalten, wandert in den Seitenhintergrund.
Empfehlung: Fokus innerhalb des aktuell verfügbaren Bereiches (Menü) einfangen.
+
Mobile Ansicht: Die visuelle Fokusreihenfolge weicht stark von der programmatischen ab. Der Menüschalter oben links erhält erst nach dem Link "Erweiterte Suche" den Fokus. Erschwert ist die schlechte Reihenfolge durch die Schwierigkleit in manchen Browsern, den Tastaturfokus auf dem Menü-Link auf dem dunklen Hintergrund zu erkennen. Im Firefox-Browser u. ggf. anderen Umgebungen ist der Fokus kaum sichtbar (vergl. Prüfschritt 9.2.4.7).
Empfehlung: Die Reihenfolge anpassen.
+
Beim Durchlaufen des Navigationsmenüs gibt es etliche unsichtbare Tastaturfokuspunkte.
Empfehlung: Da die aktuelle Umsetzung der Untermenü-Einblendung über Hover-Zustand weder für die Tastatur noch für mobile User Agents zugänglich ist, müsste die Anpassung ohne Hover sein:
Option 1: Der Link vom Hauptmenüpunkt zur Bereichsseite bleibt bestehen, es gibt aber nach jedem Hauptmenüpunkt ein zusätzliches Element (etwa Ausklapp-Pfeil) zum Öffen des Untermenüs in der jetzigen Form (mit aria-expanded richtig gesetzt und gut beschriftet, z.B. über aria-labelledby mt zwei Verweisen, 1. Verweis auf Hauptmenüpunkt gefolgt von 2. rekursivem Verweis auf zugänglich versteckten Text, z.B. "Untermenü", den das grafische Element ersetzt)
Option 2: Der Hauptmenüpunkt ist kein Link mehr, sondern ein Button, der das Untermenü öffnet (mit aria-expanded richtig gesetzt). Wenn ein Link zum Bereich weiter gebraucht wird, müsste der Hauptmenüpunkt dann auch am Beginn des ausgeklappten Untermenüs als Link erscheinen.
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Mobiles Menü im Header sowie "Gefördert von..." und FID-Logo im Footer: Fokushervorhebung hat Kontrast von 1,2:1 zum Hintergrund und ist nicht deutlich
Empfehlung: weißen Fokusrahmen wie bei anderen Elementen im Footer verwenden
+
Responsive Ansicht: Der Tastaturfokus auf dem wichtigen Menü-Link ist im Firefox-Browser u. ggf. anderen Umgebungen kaum sichtbar.
Empfehlung: Eine deutlich sichtbare Fokushervorhebung implementieren.
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Der Tastatur-Fokus ist auf den Vorschaubildern der herunterladbaren Dateien unterdrückt / nicht sichtbar.
Empfehlung: Einen deutlich sichtbaren Hervorhebung implementieren.
+
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Die Absätze in einer anderen Sprache sind nicht entsprechend ausgezeichnet
Empfehlung: lang-Attribut mit der Sprache als Wert verwenden, z. B. lang="en"
Die Bezeichnungen in einer anderen Sprache sind nicht entsprechend ausgezeichnet
Empfehlung: lang-Attribut mit der Sprache als Wert verwenden, z. B. lang="en"
Elemente sind nicht gemäß der Spezifikation korrekt verschachtelt: div.hamburger-search in einem ul-Element
Empfehlung: Verschachteln ändern
+
Mehrfache Verwendung gleicher IDs: "tx_indexedsearch", "tx_indexedsearch_freeIndexUid", "tx_indexedsearch_pointer", "website_search_input", "website_search_submit"
Empfehlung: IDs einmalig pro Seite verwenden
Siehe allgemeine Anmerkungen
Siehe allgemeine Anmerkungen
Siehe allgemeine Anmerkungen
href und title als Kindelemente von area sind nicht erlaubt
Empfehlung: Spezifikation prüfen und ggfs. anpassen
+
Siehe allgemeine Anmerkungen
Siehe allgemeine Anmerkungen
Nicht geschlossenes a-Element
Empfehlung: das Element schließen (...)
+
Siehe allgemeine Anmerkungen
Siehe allgemeine Anmerkungen
Der Ausklappstatus der mobilen Navigation ist nicht verfügbar.
Empfehlung: aria-expanded-Attribut verwenden.
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Siehe allgemeine Anmerkung
Schriftgröße lasst sich nicht benutzerdefiniert einstellen
Empfehlung: auf "font-size: 16 px"-Eigenschaft im body verzichten und stattdessen insgesamt mit relativen Werten arbeiten, z. B. %, em, rem; Die Standardschriftgröße des Browsers ist 16 px
Siehe allgemeine Anmerkungen
Siehe allgemeine Anmerkungen
Siehe allgemeine Anmerkungen
Siehe allgemeine Anmerkungen
Siehe allgemeine Anmerkungen
Siehe allgemeine Anmerkungen
Siehe allgemeine Anmerkungen
Hinweis: Willkommen als individuelle Bezeichnung für den Seitentitel wäre okay, allerdings nicht für die Links (z. B. das Haus-Icon Inder Navigation) - hier sollte auf die Konsistenz geachtet werden, wenn die Links "Startseite" statt "Willkommen" heißen sollen.
Hinweis: Die Links zum Downlaod (bis auf den letzten, wegen der zwei Dateiformate) könnten das Card pattern nutzen https://inclusive-components.design/cards/
Hinweis: Die Bezeichnungen "(nach oben)" und "Nach oben" sind nicht konsistent
Hinweis: Die Erläuterung "Die mit * gekennzeichneten Felder müssen ausgefüllt werden." steht am Ende des Formulars
Empfehlung: Die Aufschlüsselung von * sollte am Beginn des Formulars stehen.
