Das Prüfverfahren zur BITV

Sie sind hier: BITV-Test > Prüfergebnisse für Webauftritte (Alle Tests) > Liebesleben

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

Liebesleben

Prüfung

Ergebnis

Punkte: 91,75 von 100 (gut zugänglich)

Geprüfte Seiten

Seite 1 (Startseite)

Seite 2 (HPV - Informationen)

Seite 3 (Kontaktformular)

Seite 4 (Methodenfinder)

Bewertung und Anmerkungen zu einzelnen Prüfschritten

Teilweise erfüllt sind 2 von 49 Prüfschritten:

  • Prüfschritt 2.4.3a - Schlüssige Reihenfolge bei der Tastaturbedienung

    Getestet wurde auch mit eingeschalteten Screenreadern (NVDA 2018, JAWS 2018.1803) im Internet Explorer und Mozilla Firefox unter Windows 10.

    • Bei eingeschaltetem Screenreader öffnet sich bei Klick auf das Hamburger Symbol die Navigation, der Fokus wird aber nicht dorthin versetzt.
    • Blendet man die Suche ein, schickt sie aber nicht ab, kommt man nicht beim nächsten TAB auf die Lupe, Warenkorb, Hamburger Icon sondern auf "Ich suche Infos zu..." - man muss rückwärtstabben.
    • Der Submit-Button ist eine unsichtbare Tabstation. Die Lupe ist nur der Toggle-Button. Für sehende Tastaturnutzer ist das verwirrend.
    Seite 4: eher nicht erfüllt

    Siehe allgemeine Anmerkungen.

    • Da die Listeneinträge der Tagcloud doppelt vorhanden sind (sichtbar/unsichtbar) tabbt man über 15 Stationen ohne sichtbaren Fokus bzw. im Screenreader ohne Ausgabe.
    • Nach Öffnen von "Methodentyp" wird die Lupe zum Suchen fokussiert (ohne vorher im Suchfeld gewesen zu sein), dann ein unsichtbarer Schalter und erst danach wird der erste Eintrag von "Methodentyp" fokussiert.
    • Nach Auswahl eines oder mehrerer Methodentypen wird nicht "Dauer in min" fokussiert, sondern die Ergebnisliste der Filterfunktion "Methodentyp".
    • Internet Explorer, Schalter "Methodentyp" und "Dauer in min" mit eingeschaltetem Screenreader JAWS: nach Auslösen der Schalter wird der Fokus mal an den Anfang der Seite gesetzt, mal an das Ende der Seite und mal auf den Suche -Button wie bei der Nutzung ohne Screenreader. Verhalten nicht nachvollziehbar.
    • Nach Toggeln Von "Dauer in Minuten" kann man nicht rückwärtstabben zu "Methodentyp".
    • Nach dem Suchfeld neben "Dauer in min. " wird ein funktionsloser unsichtbarer Schalter "Ihre Meinung" fokussiert. Das ist auf Grund der Ausgabe im Screenreader irritierend.
    Seite 1: teilweise erfüllt

    Siehe allgemeine Anmerkungen.

    Nach Öffnen von "Mehr zu Liebesleben" über dem Slider" und "Text zur Kampagne einklappen" wird der Fokus im Internet Explorer mit eingeschaltetem Screenreader an den Anfang der Seite versetzt.

    Die Reihenfolge der Steuerelemente des Sliders sind verwirrend. Mal ist der Button zum Anhalten rechts, mal links, mal nicht vorhanden. Es braucht etwas Glück, den Button zum Anhalten zu finden und zu bedienen.

    Seite 2: teilweise erfüllt

    Siehe allgemeine Anmerkungen.

    Seite 3: teilweise erfüllt

    Siehe allgemeine Anmerkungen.

    "Art der Anfrage" und "Anrede": da das select 2 mal vorhanden ist, ist ein zusätzlicher Tab notwendig um in das Feld zu gelangen.

    Punktabzug: 1 Punkt

  • Prüfschritt 4.1.2a - Name, Rolle, Wert verfügbar

    • Der Link zum Warenkorb ist mit aria-expanded ausgezeichnet. Links auf andere Seiten haben keine unterschiedlichen Zustände (erweitert/reduziert). Die Auszeichnung ist verkehrt.
    • Seiten 1,2 und 3: "Ich suche Infos..." und "Wie spreche ich über...?" sind nicht richtig umgesetzt. Der Zustand (#aria-expanded#) und der Name (#aria-label#) sind vorhanden, werden aber vom einem Screenreader nicht ausgegeben. Falsche Rolle menubar. Die Rolle menubar ist für Menüs vorgesehen, die auslösbare Inhalte haben (Werkzeugleisten). Für eine passendere Umsetzung siehe z.B. https://www.w3.org/TR/wai-aria-practices-1.1/ "accordion" oder https://www.w3.org/TR/wai-aria-practices-1.1/examples/menu-button/menu-button-links.html.
    • Seiten 1,2 und 4: Nach Auswahl eines Feedbacksmileys sollte der Button mit aria-disabled ausgezeichnet sein.
    Seite 4: eher nicht erfüllt

    Siehe allgemeine Anmerkungen.

    • Die ungeordnete Liste (Tagcloud) über den Filteroptionen (für Screenreader unsichtbar) ist als listbox ausgezeichnet. Die untergeordneten Elemente von einer listbox müssen option-Elemente sein.
    • Die Tagcloud-Einträge sind interaktive, fokussierbare Elemente und sollten nicht mit aria-hidden="true" ausgezeichnet sein.
    • Der Slider unter "Dauer in min." benötigt eine Auszeichnung mit ARIA. Sie dazu http://w3c.github.io/aria-practices/examples/slider/multithumb-slider.html
    Seite 1: eher erfüllt

    Siehe allgemeine Anmerkungen.

    Seite 2: eher erfüllt

    Siehe allgemeine Anmerkungen.

    Seite 3: teilweise erfüllt

    Siehe allgemeine Anmerkungen.

    "Art der Anfrage" und "Anrede": Es ist unklar, warum die Dropdownlisten jeweils 2 mal vorhanden sind (sichtbar und unsichtbar). Eventuelle Lösung mit passender ARIA-Auszeichnung. Siehe dazu auch "Do not use role="presentation" or aria-hidden="true" on a visible focusable element ." https://www.w3.org/TR/using-aria/#fourth

    Punktabzug: 1,5 Punkte

Eher erfüllt sind 9 von 49 Prüfschritten:

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

    Seite 2: eher erfüllt

    Das Home-Icon des Breadcrumbs hat keine Textalternative (z.B. aria-label). Das title-Attribut ist nicht ausreichend.

    Die Grafik der Broschüre "Feigwarzen" über "Verwandte Themen" sollte gemeinsam mit der daneben stehenden Überschrift verlinkt sein und sollte ein leeres alt-Attribut haben. Die Textalternative für die Grafik ist redundant mit der Überschrift.

    Seite 3: eher erfüllt

    Home-Icon siehe Seite 2.

    Seite 4: eher erfüllt

    Home-Icon siehe Seite 2.

    Seite 1: erfüllt

    Smiley SVGs: es sollte zusätzlich mit aria-labelledby auf das title-Element verwiesen werden.

    Punktabzug: 0,75 Punkte

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

    Die Grafik mit dem Claim der Website ("Es ist deins...") hat einen unzureichenden Alternativtext (nur: "Logo Claim").

    Seite 1, 2, 3, 4: eher erfüllt

    Punktabzug: 0,5 Punkte

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

    Seite 3: eher erfüllt

    Im Screenreader wird das label "Vorname" erst nach einem Rückwärtstab ausgegeben.

    Seite 1, 2, 4: erfüllt

    Punktabzug: 0,75 Punkte

  • Prüfschritt 1.3.2a - Sinnvolle Reihenfolge

    Bei Auswahl des Feedbacksmileys "nein" auf Seiten 1,2 und 4 ist das Kritik Formular über den Feedbacksmileys im Quellcode platziert und bei der Tastaturbedienung nur über Rückwärtstabs erreichbar. Screenreadernutzer wissen nichts von der Existenz des Formulars.

    Seite 1: eher erfüllt

    Siehe allgemeine Anmerkungen.

    Seite 2: eher erfüllt

    Siehe allgemeine Anmerkungen.

    "Die HPV-Impfung" sollte in der Reihenfolge nach "Übertragung und Schutz" kommen und nicht nach "Mögliche Anzeichen und Folgen".

    Seite 3: eher erfüllt

    Nach dem "Absenden"-Button gibt es 2 unsichtbare inputs ("nicht ausfüllen", "Meinung"), die von Screenreadern ausgegeben werden.

    Seite 4: eher erfüllt

    Siehe allgemeine Anmerkungen.

    Punktabzug: 0,25 Punkte

  • Prüfschritt 1.4.4a - Text auf 200% vergrößerbar

    Seite 4: eher erfüllt

    "Themen" ist als ausklappbare Liste dargestellt. Die Inhalte sind aber mit display: none für alle Nutzer ausgeblendet (#select# ohne Inhalt).
    "Umdrehen" der Karten funktioniert nicht.
    Firefox 200%: leichte Darstellungsprobleme / Navi abgeschnitten, aber Möglichkeit zu Scrollen.

    Seite 1, 2, 3: erfüllt

    Punktabzug: 0,75 Punkte

  • Prüfschritt 2.1.1a - Ohne Maus nutzbar

    Getestet wurde auch mit eingeschalteten Screenreadern (NVDA 2018, JAWS 2018.1803) im Internet Explorer 11 und Mozilla Firefox 60.0.2 unter Windows 10.

    Seite 4: eher nicht erfüllt
    • In der responsiven Ansicht ist der Pfeil zum Scrollen der abgeschnittenen Navigation oben nicht tastatutbedienbar.
    • Schalter "Methodentyp" lässt sich in der responsiven Ansicht nicht über die Tastatur öffnen.
    • Der Schieberegler in "Dauer in min." ist nicht über die Tastatur zu bedienen. Eine Alternative ist nicht vorhanden.
    • "Filter zurücksetzen" ist nicht über die Tastatur fokussierbar.
    Seite 3: erfüllt

    "Art der Anfrage" und "Anrede" sind nicht richtig umgesetzt. Für Screenreadernutzer erfolgt die Auswahl bevor der Fokus sichtbar auf dem Auswahlfeld ist. Die Auswahl wird aber nicht angezeigt. Das ist irritierend für Menschen die zusätzlich einen Screenreader unterstützend nutzen. Mit dem nächsten Tab wird dann das Auswahlfeld fokussiert, im Screenreader wird aber nur "leer" ausgegeben. Siehe dazu die Bewertung in 4.1.2a - Name, Rolle, Wert verfügbar

    Seite 1, 2: erfüllt

    Punktabzug: 0,75 Punkte

  • Prüfschritt 2.2.2a - Bewegte Inhalte abschaltbar

    Seite 1: eher nicht erfüllt

    Der Button zum Anhalten des animierten Karussells ist bei der Tastaturbedienung erst erreichbar, nachdem alle 8 Slider durchlaufen wurden. Der Button sollte zu jeder Zeit sichtbar sein.

    Seite 2, 3, 4: erfüllt

    Punktabzug: 0,5 Punkte

  • Prüfschritt 2.4.1a - Bereiche überspringbar

    Das Logo sollte nicht mit role="banner" ausgezeichnet sein. Es befindet sich bereits im ausgezeichneten Banner-Bereich header. Da role="banner" und auch header immer auf der obersten Ebene erwartet werden, wird hier der eigentliche Bannerbereich ignoriert und nur das Logo als Bannerbereich erkannt. Auch sollte der Fußbereich nicht mit role="contentinfo" ausgezeichnet sein, da derselbe Bereich bereits mit footer ausgezeichnet ist.

    Seite 1: eher erfüllt

    Siehe allgemeine Anmerkungen.

    Seite 2: eher erfüllt

    Siehe allgemeine Anmerkungen.

    Der Breadcrumb sollte anstelle von aria-label="breadcrumb" ein deutschsprachiges Label haben ("Sie sind hier" o.ä.).

    Seite 3: eher erfüllt

    Siehe allgemeine Anmerkungen.

    Siehe Seite 2.

    Seite 4: eher erfüllt

    Siehe allgemeine Anmerkungen.

    Siehe Seite 2.

    Punktabzug: 0,5 Punkte

  • Prüfschritt 2.4.7a - Aktuelle Position des Fokus deutlich

    Seite 4: eher erfüllt

    Der Tastaturfokus soll mindestens genau so deutlich hervorgehoben werden wie der Mausfokus. In der Auswahlliste unter Methodentyp ist der Mausfokus erheblich deutlicher.

    Seite 1: erfüllt

    Keine Fokushervorhebung für den Link "Impfung gegen HPV" über "Mehr zu Liebesleben".

    Seite 2, 3: erfüllt

    Punktabzug: 0,25 Punkte

Erfüllt sind 24 von 49 Prüfschritten:

Nicht anwendbar sind 14 von 49 Prüfschritten:

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

© DIAS GmbH v 4.0| Impressum

nach oben