Das Prüfverfahren zur BITV

Sie sind hier: BIK BITV-Test > Prüfergebnisse > Romanistik-Blog – Das Blog des FID Romanistik

Blättern: zum ersten Test zum vorhergehenden Test zum nächsten Test zum letzten Test

Romanistik-Blog – Das Blog des FID Romanistik

Prüfung

  • Standard: BITV 2.0 / EN 301 549
  • Startadresse: https://blog.fid-romanistik.de/
  • Prüfstelle: BIK-Beratungsstelle Berlin
  • Prüfer/in: Sergey Yurchenko,
  • Prüfdatum: 08.11.2021

Ergebnis

0 von 4 Seiten BITV-konform

Geprüfte Seiten

Seite 1 (Startseite)

  • Titel: Romanistik-Blog – Das Blog des Fachinformationsdienstes
  • URL: https://blog.fid-romanistik.de/
  • Ergebnis: nicht BITV-konform, 8 von 92 Anforderungen nicht erfüllt
Screenshot: Startseite - öffnet vergrößerte Ansicht

Seite 2 (Artikelseite)

Screenshot: Artikelseite - öffnet vergrößerte Ansicht

Seite 3 (Kontaktformular)

Screenshot: Kontaktformular - öffnet vergrößerte Ansicht

Seite 4 (Suchergebnisse)

Screenshot: Suchergebnisse - öffnet vergrößerte Ansicht

Bewertung und Anmerkungen zu einzelnen Prüfschritten

92 Prüfschritte prüfen 82 Anforderungen der BITV / EN 301 549.

Nicht erfüllt sind 13 von 92 Prüfschritten:

  • Prüfschritt 9.1.1.1a - Alternativtexte für Bedienelemente

    1) Startseite, Artikelseite: Verlinkungen bei den Grafiken lösen eine vergrößerte Darstellung aus, deren Beschriftungen weisen nicht darauf hin, z. B. bei "Sommerschule zu kulturellen Transformationsdynamiken und Workshop des FID zur Digitalisierung des Publizierens" - hier ist die Grafik zwar mit leerem alt=""-Attribut versteckt, wird aber durch das title-Attribut des einschließenden Links beschrieben - diese Beschreibung ist nicht aussagekräftig, daraus lässt sich nicht ableiten, dass eine vergrößerte Darstellung erzeugt wird. Auch bei "Portrait Carmen Laforet" auf der Artikelseite fehlt Hinweis auf die Vergrößerung. Dieser Hinweis ist auch für die sehenden Nutzer wichtig.

    Empfehlung:

    • Statt Ziel des Links (Bezeichnung des Artikels) wäre hier die Beschreibung des Bildmotivs inkl. Hinweis auf Vergrößerungsfunktion sinnvoll, allerdings ist eine Vergrößerungsfunktion für Screenreader eher überflüssig und verkompliziert die Nutzung der Website. Soll die Vergrößerungsfunktion auch für Screenreader zugänglich bleiben, ist Implementierung eines Schließen-Buttons empfehlenswert, um das Vergrößerungs-Overlay verlassen zu können. Alternativ wäre das Schließen von Overlay über ESC-Taste ausreichend - in diesem Fall ist ein Hinweis auf Schließen über ESC als Text erforderlich.
    • Es wäre denkbar, die Grafik und die Verlinkung auseinander zu halten. Die Grafik durch einen aussagekräftigen alt-Attribut beschreiben. Das Bedienelement für die Vergrößerungsfunktion durch alt="" oder aria-hidden="true" aus dem Screenreader-Lesefluss rausnehmen. Die knickbare Fläche des Links kann per CSS auch der Fläche der Grafik entsprechen, sodass der gleiche Verhalten bei der Maus-Nutzung wie aktuell beibehalten wird.
    • Das title-Attribut mit dem Hinweis auf die Vergrößerung entweder für den Link oder die darin eingeschlossene Grafik einmalig verwenden.
    • Hinweis: Um die Konsistenz zu bewahren wäre insgesamt empfehlenswert, die zwei Funktionen (Verlinkung auf eine neue Seite und Vergrößerung) deutlich auseinander zu halten und entsprechend hervorzuheben. Es ist nicht klar, was wann ausgelöst wird. Nach erster Untersuchung ergibt die Verlinkung der Grafik nur auf der Startseite Sinn, innerhalb des Artikels ist diese Verlinkung nicht sinnvoll, da wäre einzig die Vergrößerungsfunktion sinnvoll.

    2) Alle Seiten: Verlinkte Grafiken "Romanistik-Blog" und "AG DigiRom" aus der Seitenleiste haben leere alt=""-Attribute.

    Empfehlung:

    • Der Alternativtext im alt-Attribut soll das Linkziel benennen
    Seite 1: nicht BITV-konform

    1) Zahlreiche verlinkten Grafiken zu den Artikeln sind nicht aussagekräftig beschrieben, es wird die Grafik bzw. deren Inhalt und nicht das Ziel des Links beschreiben.

    Empfehlung:

    • Statt z. B. "Logo EnTuFerieMeColé" sollte "En tu feria me colé &8211; Spanisch-deutscher Podcast über die Frankfurter Buchmesse 2022" oder
    • statt "Rechtliche Informationen" sollte "Die rechtliche Seite des Open-Access-Publizierens" - hier wird auch kein Beitrag, sondern eine Gruppe der Beiträge geöffnet;
    • kein Muss, eher empfehlenswert: bei externen Verlinkungen auf das Öffnen in einem neuen Fenster in der Beschriftung hinweisen, dass der Nutzer die aktuelle Website verlässt.

    +
    Siehe allgemeine Anmerkungen

    Seite 2: nicht BITV-konform

    Siehe allgemeine Anmerkungen

    Seite 3: nicht BITV-konform

    Siehe allgemeine Anmerkungen

    Seite 4: nicht BITV-konform

    Siehe allgemeine Anmerkungen

  • Prüfschritt 9.1.1.1b - Alternativtexte für Grafiken und Objekte

    1) Startseite, Artikelseite, Suchergebnisse:
    Die kleinen Logos (img.avatar-Element) neben den Autoren-Namen haben keine aussagekräftige Beschriftung. Da sie sich unterscheiden (z. B. "Logo Instituto Cervantes Hamburg" für gleichnamiges Institut und "Logo FID Romanistik" für Markus Trapp), wird das als eine Information interpretiert. Aktuelle Umsetzung sieht einen visuell versteckten Text "Autor" im span-Element vor, die Grafik selbst ist aber nicht versteckt.

    Empfehlung:

    • eine aussagekräftige individuelle Beschriftung für jedes Logo formulieren und sie entweder wie jetzt als Inhalt des visuell versteckten span-Elementes einfügen (die Grafik muss dann mit einem alt="" versteckt werden) oder auf das span-Element verzichten und diese Information in alt-Attribut einfügen (in diesem Fall muss nichts versteckt werden)
    • alternativ könnte ein visuell verstecktes span-Element bleiben (der Inhalt muss immer noch aussagekräftige Information bekommen, statt generischen "Autor"-Text) und die Grafik wird durch :before-Pseudoelement implementiert
    Seite 1: nicht BITV-konform

    1) Die Grafik mit dem Dr. Javier Albarrán Iruela (RomanIslam Hamburg 2021) hat keine Beschriftung außer figcaption. Das verwendete alt=""-Attribut führt dazu, dass die Information auf dem Bild nicht erreichbar ist und Screenreader lediglich "Grafik" vorliest. Das hingegen gepflegte figcaption-Element ist kein Ersatz für alt-Attribut, figcaption beschriebt nicht den Inhalt einer informationstragenden Grafik für seheingeschränkte Menschen, sondern ist ein semantisches Element für die für alle zugänglichen Bildinformationen, welche über den Bildinhalt hinausgehen können.

    Empfehlung:

    • alt-Attribut mit einer aussagekräftigen und sinnvollen Beschreibung füllen, wodurch die Information aus dem Bild für seheingeschränkte Menschen zugänglich wird (die Beschreibung muss ausschließlich das Bild beschreiben, nicht mehr und nicht weniger)

    +
    Siehe allgemeine Anmerkung

    Seite 2: nicht BITV-konform

    Siehe allgemeine Anmerkung

    Seite 4: nicht BITV-konform

    Siehe allgemeine Anmerkung

    Seite 3: nicht anwendbar

  • Prüfschritt 9.1.3.1a - HTML-Strukturelemente für Überschriften

    Seite 2: BITV-konform

    1) "Verwandte Beiträge im Romanistik-Blog:"-Überschrift hat die Ebene 3, Ebene 2 ist ohne Grund übersprungen.

    Empfehlung:

    • statt h3 lieber h2 benutzen
    Seite 3: nicht BITV-konform

    1) "Kontaktformular", "Ihre Nachricht an das Team des Romanistik-Blogs:", "Impressum" und "Herausgeber" sind nicht als Überschriften ausgezeichnet, obwohl sie als solche inhaltlich und visuell auftreten.

    Empfehlung:

    • h2-Element für die überschreibenden Texte verwenden
    Seite 1, 4: BITV-konform

  • Prüfschritt 9.1.3.1b - HTML-Strukturelemente für Listen

    Die Seitenpaginierung (1, 2, 3, ... 15) ist nicht als Liste umgesetzt, obwohl sie eine Auflistung verfügbarer Optionen bietet.

    Empfehlung:

    • nav > ul > li - Struktur implementieren
    Seite 1: nicht BITV-konform

    Siehe allgemeine Anmerkung.

    Seite 4: nicht BITV-konform

    Siehe allgemeine Anmerkung.

    Seite 2, 3: BITV-konform

  • Prüfschritt 9.1.3.1d - Inhalt gegliedert

    1) Alle Seiten, Footer: Zwischen "Realisiert mit WordPress" und dem "Creative Commons"-Logo werden mehrere br-Elemente für die Schaffung der Zwischenräume verwendet.

    Empfehlung:

    • p-Element benutzen, um separate Absätze zu schaffen
    • Alternativ CSS, da es sich hierbei um die Darstellung und keinen Inhalt handelt
    Seite 1: BITV-konform

    Siehe allgemeine Anmerkung.

    Seite 3: BITV-konform

    Siehe allgemeine Anmerkung.

    Seite 4: BITV-konform

    Siehe allgemeine Anmerkung.

    Seite 2: nicht BITV-konform

    Der letzte Absatz "Der Nachlass bleibt bis zum 6. Januar 2045 versiegelt." ist nicht als solcher, sondern als div-Element, ausgezeichnet.

    Empfehlung:

    • p-Element verwenden

    +
    Siehe allgemeine Anmerkung.

  • Prüfschritt 9.1.3.1h - Beschriftung von Formularelementen programmatisch ermittelbar

    Seite 3: nicht BITV-konform

    Die Beschriftungen zu Kontaktformular-Feldern sind nicht programmatisch ermittelbar, weil nicht als solche umgesetzt.

    Empfehlung:

    • bei der gleichbleibender Struktur das einschließende p-Element der Beschriftung in das label-Element umwandeln
    • br-Element zwischen der Beschriftung (Wert der label-Elementes) und dem input-Element entfernen
    • Abstände zwischen Formularfeldern lassen sich per CSS wiederherstellen
    Seite 1, 2, 4: BITV-konform

  • Prüfschritt 9.1.3.5 - Eingabefelder zu Nutzerdaten vermitteln den Zweck

    1) Artikelseite, Kontaktformular: autocomplete-Attribute fehlen beim Namen und bei der E-Mail-Adresse

    Empfehlung:

    • autocomplete-Attribut mit entsprechenden Werten allen Feldern für Benutzereingaben hinzufügen
    Seite 2: nicht BITV-konform

    Siehe allgemeine Anmerkung.

    Seite 3: nicht BITV-konform

    Siehe allgemeine Anmerkung.

    Seite 1, 4: nicht anwendbar

  • Prüfschritt 9.1.4.3 - Kontraste von Texten ausreichend

    1) Alle Seiten: Das Logo ist u. U. (Textabstände angepasst) nicht mehr kontrastreich genug, besonders der darunterstellende Text "Das Blog des Fachinformationsdienstes".

    Empfehlung:

    • Hintergrund- der Vordergrund farblich anpassen, um stets ein Kontrastverhältnis von 4,5:1 zu erreichen.

    2) Alle Seiten (mobile Darstellung), Header und Footer: "Kontakt / Impressum" und "Info" erscheinen als Punkte eines Menü-Elementes und sich auf hellem Hintergrund nicht kontrastreich genug. Auch "Menü"-Schalfläche ist im fokussierten Zustand nicht mehr kontrastreich genug.

    Empfehlung:

    • Kontrastverhältnis von Vordergrund- und Hintergrundfarben muss mindestens 4,5:1 sein
    • Das erforderliche Kontrastverhältnis lässt sich erreichen, indem die Hintergrundfarbe des aufklappbaren Menüs einen dunklen Ton bekommt (momentan ist der Hintergrund im Header eine Wiederholung der Hintergrundgrafik; bei der Umsetzung darauf achten, dass die Bordeaux-Fokushervorhebung auf einem anderen Hintergrund kontrastreich bleibt) oder umgekehrt (Textfarbe bei den Links in eine andere ändern).

    3) Alle Seiten, Twitter: "Fachinformationsdienst Romanistik hat retweetet" ist nicht ausreichend kontrastreich (ca. 3:1)

    Empfehlung:

    • in das CSS des Blogs an geeigneter Stelle die Anweisung .timeline-Tweet-retweetCredit { color: #666666;} aufnehmen. Notfalls mit !important, so dass der Twitter-Style überschrieben wird.

    4) Alle Seiten, Bordeaux-Links: Die :hover- und :Focus-Zustände erzeugen ein nicht ausreichendes Kontrastverhältnis zum Hintergrund (3,3:1)

    Empfehlung:

    • Farbton der :hover- und :Focus-Hervorhebung anpassen, damit in diesen Zuständen die Texte ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund bekommen
    • Der Unterschied zwischen Zuständen sollte auch deutlich sein: entweder durch die Form (etwa Fokus-Rahmen oder Unterstreichung bei Tastaturfokussierung und Maus-Hover) oder durch ein deutliches Kontrastunterschied (mindestens 3:1 zwischen Zuständen)
    Seite 1: nicht BITV-konform

    Bei Vergrößerung der Bilder entstehen seltsame Textüberlappungen durch den semi-transparenten Layer, siehe "Sommerschule zu kulturellen Transformationsdynamiken und Workshop des FID zur Digitalisierung des Publizierens"-Beitrag und dessen "Call for Papers"-Grafik. Die Schrift des Popups ist dadurch kaum noch lesbar, Kontrastverhältnis beträgt 2,8:1.
    Empfehlung:

    • Die Beschriftung zum Bild (html: div.cboxTitle) unterhalb der Grafik positionieren, um einen statischen kontrastreichen Hintergrund sicherzustellen.

    +
    Siehe allgemeine Anmerkung.

    Seite 2: nicht BITV-konform

    Siehe allgemeine Anmerkung.

    Seite 3: nicht BITV-konform

    Siehe allgemeine Anmerkung.

    Seite 4: nicht BITV-konform

    Siehe allgemeine Anmerkung.

  • Prüfschritt 9.1.4.11 - Kontraste von Grafiken und grafischen Bedienelementen ausreichend

    Artikelseite, Kontaktformular: Formularfelder ohne kontrastreiche Textvorbelegung werden durch Rahmen als solche wahrgenommen, diese Rahmen haben kein ausreichendes Kontrastverhältnis zum Hintergrund (1,5:1)

    Empfehlung:

    • ausreichende Kontrastverhältnisse erreichen (mindestens 3:1), indem die Farbe des Rahmens in die Richtung eines etwas dunkleren Farbtons angepasst wird

    2) Alle Seiten, Twitter-Widget: Linktext "Fachinformationsdienst Romanistik hat retweetet" und "Auf Tweeten anzeigen"/Vogel-Icon sind nicht kontrastreich genug

    Empfehlung:

    • Da das Vogel-Icon redundant zum Text ist, reicht eine Anpassung des Textes über CSS, ggfs. mit !important, um Twitter-Style zu überschreiben.
    Seite 1: BITV-konform

    Siehe allgemeine Anmerkung.

    Seite 4: BITV-konform

    Siehe allgemeine Anmerkung.

    Seite 2: nicht BITV-konform

    Siehe allgemeine Anmerkung.

    Seite 3: nicht BITV-konform

    Siehe allgemeine Anmerkung.

  • Prüfschritt 9.2.4.7 - Aktuelle Position des Fokus deutlich

    1) Alle Seiten, "Kontakt / Impressum" und "Info" im Header: Der Fokuserhalt selbst ist gut sichtbar (Farbwechsel von Weiß zu Rot mit Kontrastabstand von 6,5:1). Im fokussierten Zustand reicht der Kontrast zum Hintergrundbild aber nicht aus.

    Empfehlung:

    • Kontrast an die wechselnde Hintergründe anpassen, damit fokussierte Inhalte deutlich wahrnehmbar sind

    2) Alle Seiten: Die Fokus-Hervorhebung bei grafischen Bedienelementen (verlinkten Bildern) ist schwer wahrnehmbar

    Empfehlung:

    • Mehr Kontrast oder besser wahrnehmbare Dicke des Fokus-Rahmens
    Seite 1: nicht BITV-konform

    Siehe allgemeine Anmerkung.

    Seite 2: nicht BITV-konform

    Siehe allgemeine Anmerkung.

    Seite 3: nicht BITV-konform

    Siehe allgemeine Anmerkung.

    Seite 4: nicht BITV-konform

    Siehe allgemeine Anmerkung.

  • Prüfschritt 9.3.1.2 - Anderssprachige Wörter und Abschnitte ausgezeichnet

    1) Alle Seiten, aside-Bereich: Das Twitter-Widget beinhaltet anderssprachige Inhalte als Tweets von "FIDRomanistik", z. B. von "DW Espanol" usw.

    Empfehlung:

    • keine, da wohl nicht umsetzbar

    2) Alle Seiten, Neuste Kommentare: Es kommen Anderssprachige Sätze vor, z. B. "Protesta social en tiempos de Covid" usw. - diese sind nicht entsprechend gekennzeichnet

    Empfehlung:

    • lang-Attribut mit der jeweiligen Sprache als Wert hinzufügen

    3) Alle Seiten, Blog Hispanos: Einige Linktexte sind in einer anderen Sprache und sind nicht entsprechend ausgezeichnet

    Empfehlung:

    • lang-Attribut mit der jeweiligen Sprache als Wert hinzufügen

    4) Startseite, Artikelseite: Ganze Abschnitte sind in einer anderen Sprachen, aber nicht entsprechend ausgezeichnet

    Empfehlung:

    • lang-Attribut benutzen und die Sprache für den Abschnitt angeben
    Seite 1: nicht BITV-konform

    Siehe allgemeine Anmerkung.

    Seite 2: nicht BITV-konform

    Siehe allgemeine Anmerkung.

    Seite 3: nicht BITV-konform

    Siehe allgemeine Anmerkung.

    Seite 4: nicht BITV-konform

    Bestandteile der Artikel-Vorschau sind in einer anderen Sprache, z. B. "Re-significando el Valle de los Caídos", aber nicht als anderssprachige Inhalt ausgezeichnet

    Empfehlung:

    • den Textabschnitt in einer anderen Sprache in ein span-Element einschließen und mit dem lang-Attribut, z. B. lang="es", versehen

    +
    Siehe allgemeine Anmerkung.

  • Prüfschritt 9.3.3.1 - Fehlererkennung

    Alle Seiten, Blog via E-Mail abonnieren: Bei fehlerhafter Eingabe, z. B. "a@a" erscheint die Fehlermeldung "Die eingegebene E-Mail-Adresse ist ungültig. Überprüfe die Eingabe, und versuche es erneut." Diese Fehlermeldung ist weder hervorgehoben noch mit dem Formularfeld verknüpft. Darüberhinaus wird beim Neuladen und Erscheinen der Fehlermeldung die fehlerhafte Benutzereingabe gelöscht.

    Empfehlung:

    • Fehlermeldung deutlich hervorheben (durch die Form oder durch eine andere Farbe mit einem Kontrastunterschied zur Textfarbe von mindestens 3:1)
    • Fehlermeldung mittels aria-labelledby oder aria-describedby mit dem label-Element verknüpfen, damit sie programmatisch ermittelbar ist
    • Fehlermeldung mit Hilfe von Live-Regionen oder Benachrichtigungen (alertdialog) bereitstellen.
    • fehlerhafte Eingabe beim Neuladen im Formularfeld stehen lassen
    Seite 3: nicht BITV-konform

    Die Fehlermeldungen beim fehlerhaft ausgefüllten Kontaktformular sind vom Screenreader per aria-hidden-Attribut ausgeblendet und somit nicht programmatisch ermittelbar

    Empfehlung:

    • aria-hidden="true" bei allen Fehlermeldungen entfernen
    • Fehlermeldung mittels aria-labelledby oder aria-describedby mit dem label-Element verknüpfen, damit sie programmatisch ermittelbar ist
    • Fehlermeldungen mit Hilfe von Live-Regionen oder Benachrichtigungen (alertdialog) bereitstellen.

    +
    Siehe allgemeine Anmerkung

    Seite 1: nicht BITV-konform

    Siehe allgemeine Anmerkung

    Seite 2: nicht BITV-konform

    Siehe allgemeine Anmerkung

    Seite 4: nicht BITV-konform

    Siehe allgemeine Anmerkung

  • Prüfschritt 9.4.1.3 - Statusmeldungen programmatisch verfügbar

    Alle Seiten, "Blog via E-Mail abonnieren"-Formularfeld: Die Erfolgsmeldung "Sehr schön! Es wurde gerade eine E-Mail versandt, um Ihr Abonnement zu bestätigen. ..." ist programmatisch nicht ermittelbar

    Empfehlung:

    • Attribut role="status" hinzufügen und mit aria-live="polite" die Erfolgsmeldung vorlesen lassen
    Seite 3: nicht BITV-konform

    Erfolgsmeldung "Ihre Nachricht wurde erfolgreich gesendet. Vielen Dank!" ist per aria-hidden="true" versteckt und programmatisch nicht ermittelbar

    Empfehlung:

    • aria-hidden-Attribut entfernen
    • Durch das Hinzufügen vom Attribut role="Status" die Erfolgsmeldung vorlesen lassen
    • Hinweis: Für eine automatische Vorlesefunktion kann auf eine explizite Auszeichnung mit aria-live="polite" verzichtet werden, weil role="status" bereits implizit den Wert polite hat.

    +
    Siehe allgemeine Anmerkung

    Seite 1: nicht BITV-konform

    Siehe allgemeine Anmerkung

    Seite 2: nicht BITV-konform

    Siehe allgemeine Anmerkung

    Seite 4: nicht BITV-konform

    Siehe allgemeine Anmerkung

Erfüllt sind 38 von 92 Prüfschritten:

Nicht anwendbar sind 41 von 92 Prüfschritten:

Blättern: zum ersten Test zum vorhergehenden Test zum nächsten Test zum letzten Test

© DIAS GmbH | v5 | Impressum

nach oben