Das Prüfverfahren zur BITV

Sie sind hier: BIK BITV-Test > Prüfergebnisse > Hilfe-Portal Sexueller Missbrauch 2. Test

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

Hilfe-Portal Sexueller Missbrauch 2. Test

Prüfung

Anmerkungen zum Prüfgegenstand

Aufgrund einer Datenbankveränderung ist das ursprüngliche für Seite 7 vorgesehene Angebotsbeispiel nicht länger verfügbar. Alternative Seite für die Prüfung: Fachberatungsstelle FreiJa - Aktiv gegen Menschenhandel URL: https://www.hilfe-portal-missbrauch.de/angebot?tx_pboffers_showoffer%5Baction%5D=show&tx_pboffers_showoffer%5Bcontroller%5D=OfferOfHelp&tx_pboffers_showoffer%5Boffer%5D=2820

Ergebnis

2 von 8 Seiten BITV-konform

Geprüfte Seiten

Seite 1 (Startseite)

Screenshot: Startseite - öffnet vergrößerte Ansicht

Seite 2 (Hilfe Finden)

Screenshot: Hilfe Finden - öffnet vergrößerte Ansicht

Seite 3 (Eingabe Hilfe-Angebot)

Screenshot: Eingabe Hilfe-Angebot - öffnet vergrößerte Ansicht

Seite 4 (Fragen und Antworten)

Screenshot: Fragen und Antworten - öffnet vergrößerte Ansicht

Seite 5 (Downloads)

Screenshot: Downloads - öffnet vergrößerte Ansicht

Seite 6 (Hilfe Telefon)

Screenshot: Hilfe Telefon - öffnet vergrößerte Ansicht

Seite 7 (Selbsthilfe und Lotsendienst)

Screenshot: Selbsthilfe und Lotsendienst - öffnet vergrößerte Ansicht

Seite 8 (Interview Kavemann)

Screenshot: - ö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 6 von 92 Prüfschritten:

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

    Seite 6: BITV-konform
    • Die Bedienelemente des Videoplayers besitzen englischsprachige Alternativtexte, was für deutschsprachige Nutzer:innen ungünstig ist. Eine Übersetzung ist sinnvoll.
    Seite 8: BITV-konform
    • Hinsichtlich Videoplayer siehe Anmerkung Seite 6.
    Seite 2: nicht BITV-konform
    • Responsive Ansicht: Der mit "X" beschriftete Schalter (z.B. hinter "Beratung" und visuell mit diesem Feld verbunden) zum Zurücksetzen des aktiven Filters besitzt keinen hinreichenden Alternativtext. Vorschlag: Das "X" in ein vor Screenreadern verborgenes span -Element verschieben und z.B. "Filter Beratung zurücksetzen" über ein aria-label bereitstellen. Zudem ist das "X" aufgrund font size="0" und seiner Farbe nicht sichtbar. Siehe dazu auch 9.4.1.2.
    • Anmerkung ohne Punktabzug: Die Marker der Karte weisen mit "map marker" generische aria-label auf. Empfehlung: Die Namen der Beratungsstellen als Beschriftung hinterlegen.
    Seite 1, 3, 4, 5, 7: BITV-konform

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

    Seiten 4 bis 6: Durch die Auszeichnung der H3 -Überschriften (Ausklappbereiche) mit role="button" werden im Screenreader (Testsystem Win10 NVDA Firefox/Chrome) diese Überschriften nicht mehr als solche erkannt und die Überschriftenstruktur geht verloren (siehe dazu Allgemeine Anmerkungen und Vorschlag bei 9.4.1.2).

    Seite 4: nicht BITV-konform
    • Siehe Allgemeine Anmerkungen.
    Seite 5: nicht BITV-konform
    • Siehe Allgemeine Anmerkungen.
    • Die Überschrift Infomaterial ist, wie die ihrer Ausklappbereiche als H2 ausgewiesen. Vorschlag: Die Überschriften "Banner: Hilfe...", "Broschüre: Hilfe-Telefon..." und "Information: Hilfe..." als H3 Auszeichnen und die jeweils eingeschlossenen Überschriften (z.B. "Banner Querformat...", "Informationsblatt Englisch") zu H4 .
    • In den Ausklappbereichen der Rubrik "Social Media" ( H3 ) befinden sich H3 -Unterüberschriften: Sie sollten entsprechend der logischen Struktur eher als H4 ausgezeichnet werden.
    Seite 6: nicht BITV-konform
    • Siehe Allgemeine Anmerkungen.
    Seite 8: nicht BITV-konform

    Hierarchiebrüche der Überschriften. Vorschlag:

    • Die H3 Überschriften des Interviews durch eine H2 "Interview mit Frau Kavemann" zusammenfassen.
    • Die im gelb hinterlegten Informationsblock des Seitenrands als Überschrift erkennbare Textzeile "Über Barbara Kavemann" als H2 auszeichnen.
    • Die H1 Überschriften "Mut zum.." und "Geschichten, die ..." zu H2 machen.
    Seite 1, 2, 3, 7: BITV-konform

  • Prüfschritt 9.2.4.1 - Bereiche überspringbar

    • Die Navigation der Social Media-Links im Fußbereich besitzt keine eindeutige Bezeichnung. Vorschlag: Ergänzung eines aria-label z.B. "Social Media Links".
    Seite 1: 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 2: nicht BITV-konform
    • Siehe Allgemeine Anmerkungen.
    • Die Navigation des Karteireiterfilters ("Vor Ort", "Telefonisch",...) besitzt keine eindeutige Bezeichnung. Vorschlag: Ergänzung eines aria-label z.B. "Beratungsart".
    Seite 3: BITV-konform

  • Prüfschritt 9.3.3.1 - Fehlererkennung

    Seite 3: nicht BITV-konform
    • An den Pflichtfeldern erscheinen bei unvollständigem Ausfüllen nach Betätigung der Schaltfläche "Nächster Abschnitt" Fehlermeldungen. Diese sind jedoch nicht programmatisch mit den Eingabefeldern oder Labeln verknüpft und werden bei Fokuserhalt nicht im Screenreader ausgegeben, da die aria-describedby -Attribute der Eingabefelder weiterhin mit ihren Beschreibungsfeldern (z.B. name-helper ) verbunden bleiben und nicht auf z.B. name-error .
    • Anmerkung ohne negative Bewertung: In der Sektion "Themenbereiche und Schlagworte" ist die Rubrik "Psychotherapieverfahren" zwar mit einem "*" (Stern) als Pflichtfeld markiert, aber es erfolgt bei Auslassen keine Fehlermeldung.
    Seite 1, 2, 4, 5, 6, 7, 8: nicht anwendbar

  • Prüfschritt 9.4.1.1 - Korrekte Syntax

    Seite 3: nicht BITV-konform

    Der W3C Validator gibt für die Seite nicht geschlossene Elemente an:

    • div. From line 3900, column 29; to line 3900, column 64 <div class="mdc-layout-grid__inner"> .
    • div. From line 3896, column 25; to line 3896, column 144 <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12" role="group" aria-labelledby="grouplabel-lang-spoken"> .
    • div. From line 3242, column 13; to line 3242, column 48 <div class="mdc-layout-grid__inner"> .
    • div. From line 3241, column 9; to line 3241, column 42 <div class="c-form-section__body"> .
    • fieldset. From line 3229, column 5; to line 3229, column 104 <fieldset id="section-zielgruppe" class="c-form-section js-form-section mdc-card mdc-elevation--z2"> .
    • form. From line 1132, column 17; to line 1132, column 342 <form enctype="multipart/form-data" method="post" class="c-form-section-container mdc-layout-grid__c…;tx_pboffers_offerofhelpnew%5Bcontroller%5D=OfferOfHelp&cHash=58a318879e657a1986333175d49cf83c"> .
    • div. From line 1091, column 13; to line 1091, column 48 <div class="mdc-layout-grid__inner"> .
    • div. From line 1090, column 9; to line 1090, column 37 <div class="mdc-layout-grid"> .
    • div. From line 1063, column 9; to line 1063, column 35 <div class="materializeOn"> .
    • div. From line 1046, column 13; to line 1046, column 87 <div id="c1224" class="frame frame-default frame-type-list frame-layout-0"> .

    Weiterhin wurden z.B. fehlende Leerzeichen zwischen Attributen gesehen:

    • Vor id="state-helper" in Zeile 418.
    • Vor id="contactSalutation-helper" in Zeile 906.
    • Vor id="optPhysicianOccupationalTitle-helper" in Zeile 8141.
    • Vor id="optTherapyStateDevision-helper" in Zeile 8540.
    • Vor id="optPhysicianOccupationalTitle-helper" in Zeile 8665.

    Im Browser wurde weiterhin ein selbstschließendes Element als nicht leer und fehlerhaft angezeigt: <mwc-formfield label="Show all fields"><mwc-switch id="show-all" name="show-all"/></mwc-formfield> .

    Seite 1, 2, 4, 5, 6, 7, 8: BITV-konform

  • Prüfschritt 9.4.1.2 - Name, Rolle, Wert verfügbar

    • Seiten 4 bis 6: Akkordeon sind Tastaturbedienbar, jedoch wird die Überschriftenauszeichnung durch Aria-Rolle überschrieben. Vorschlag: statt einer doppelten semantischen Auszeichnung mittels HTML und ARIA, einen button eingefasst von einem H -Element konstruieren. Der Button trägt die Funktion und ein aria-expanded
      ( <h3><button>...</button></h3> )
      Beispiel: https://www.w3.org/TR/wai-aria-practices-1.2/examples/accordion/accordion.html
    Seite 2: nicht BITV-konform
    • In der Responsiven Ansicht befindet sich im Anschluss der Anzeige aktiver Filter und visuell mit ihr verbunden ein nicht sichtbarer "x"-Schalter (Siehe dazu auch 9.1.1.1a). Dieser scheint in der Responsiven Ansicht ohne Funktion zu sein und sollte entfernt werden.
    • Die Icon-Einbindung über das after Pseudoelement erfolgt bei den Pfeilschaltflächen ("Mehr Informationen...") der Suchergebnisliste noch auf dem Anker-Element. Eine Verschiebung auf das jeweils vorhandene und für Screenreader verborgene span -Element ist sinnvoll.
    • Die Pagination weist mit role="navigation" auf dem nav -Element eine Dopplung auf. Die Rollenauszeichnung kann hier entfernt werden.
    Seite 3: nicht BITV-konform

    Die Funktionalität der "Bundesland"-Listbox ist nicht vollständig gegeben. Dies scheint an der doppelten Umsetzung eines mittels display="none" verborgenen select -Elements und einer auf ARIA basierenden Art Listbox zu liegen.
    Beispiel: https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html

    Seite 4: nicht BITV-konform
    • Siehe Allgemeine Anmerkungen.
    Seite 5: nicht BITV-konform
    • Siehe Allgemeine Anmerkungen.
    Seite 6: nicht BITV-konform
    • Siehe Allgemeine Anmerkungen.
    Seite 1, 7, 8: BITV-konform

Erfüllt sind 46 von 92 Prüfschritten:

Nicht anwendbar sind 40 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