Überblick über die Ergebnisse der Zugänglichkeitsprüfungen

Prüfen heißt wissen: Sie sollten alle drei Jahre eine Erhebung über die Barrierefreiheit durchführen lassen. Auf diese Weise wissen Sie, wo Sie stehen und was Sie noch tun müssen. Eine gründliche Untersuchung ist unerlässlich, um die Zugänglichkeit einer Website zu gewährleisten. Wir freuen uns, wenn wir den Bericht über die Untersuchung erhalten, damit wir technologiebedingte Mängel beheben können.

Übersicht der gemeldeten Probleme mit Lösung

Im vergangenen Jahr haben wir viele Untersuchungsberichte erhalten. Viele der gemeldeten Probleme wurden inzwischen behoben. Wir sind in Gesprächen mit einem Berater für Barrierefreiheit über eine Reihe von Problemen.

  • Bei der Tastatursteuerung erhält der Media Player als Ganzes nicht den Fokus. Das sollte er aber, damit die Benutzer der Tastatur die Fokusanzeige sehen. Wir werden dies mit der Behörde besprechen, die diese Feststellung getroffen hat. Unserer Ansicht nach steht diese Feststellung im Widerspruch zu den WCAG.

  • Entfernen Sie aus dem Text ‚Scroll the table to see more‘ bei der Tabelle aria-hidden = true, damit dieser von der Hilfesoftware vorgelesen wird. Besprechen Sie dies mit der Agentur, die diese Feststellung getroffen hat. Für sehbehinderte Menschen funktioniert das Scrollen nicht, so dass es nicht vorgelesen werden muss.

  • Für das Logo der Website gibt es keine gute Textalternative. Dies ist jetzt „Logo Home“. Intern diskutieren wir noch darüber, was wir damit machen sollen.

  • In Suchergebnissen wird das em-Element zur Formatierung des Schlüsselworts im Ergebnis verwendet. Dieses Element sollte nicht für die visuelle Darstellung verwendet werden, um Text kursiv darzustellen. Diskutieren Sie mit der Agentur, die diese Feststellung getroffen hat. Unserer Ansicht nach handelt es sich bei dieser Feststellung um ein „falsches Positiv“.

  • Bei Verwendung des Inhaltselements für die Barrierefreiheitsbeschriftung fällt das Bild der Barrierefreiheitsbeschriftung in der Klappe teilweise außerhalb des Bildschirms, wenn der Bildschirm kleiner wird, so dass der Text nicht für alle sichtbar ist. Das Bild passt sich nicht an den Bildschirm an. Intern diskutieren wir darüber, was wir mit dieser Situation machen wollen.

  • Icons SVG role = img entfernen und Attribut aria-hidden=true hinzufügen, so dass das Symbol wirklich nur dekorativ ist. Dies ist eine Empfehlung. Intern diskutieren wir noch darüber, was damit zu tun ist.

  • Der Media Player enthält ein Video in einem div-Element mit role="application". Dieses hat den Eingabehilfenamen „Video Player“. Der Name der Barrierefreiheit sollte auch angeben, um welches Video es sich handelt. Dies kann dadurch gelöst werden, dass auch der Titel des Videos in den aria-Tag aufgenommen wird. Es sollte jedoch auch weiterhin erwähnt werden, dass es sich um ein Video handelt. Diskutieren Sie mit der Agentur, die diese Feststellung getroffen hat. Unserer Ansicht nach handelt es sich bei dieser Feststellung um ein „falsches Positiv“.

  • Auf einer Seite kann das Inhaltselement Suche in Bekanntmachungen platziert werden, mit dem Bekanntmachungen durchsucht werden können. Werden keine Ergebnisse für die Suche gefunden, erscheint die Statusmeldung „No disclosures found“. Es sollte möglich sein, diese Rolle einer Statusmeldung programmatisch zu definieren, damit Hilfssoftware diese Information auslesen kann. Dies ist derzeit nicht der Fall. Wir erörtern mit einem Experten für Barrierefreiheit, wie dies zu bewerkstelligen ist.

  • Im Inhaltselement für die Kontaktaufnahme sind die verschiedenen Möglichkeiten der Kontaktaufnahme nicht miteinander verknüpft. Wir werden dies mit einem Berater für Barrierefreiheit besprechen.

Daran arbeiten wir gerade

⚙️ Beschreibung des Fehlers bei Formulareingabefeldern

Die Fehlermeldungen für Formulareingabefelder erklären nicht, was genau bei der Eingabe schief gelaufen ist.

Wir haben die Fehlermeldungen verschiedener Anwendungen, auf die wir verlinken, untersucht. Wir sind in Gesprächen mit den Anbietern der Anwendungen über die richtige Art und Weise der Übermittlung von Fehlermeldungen in den Links.

⚙️ Fehlermeldungen von Browsern in Formularen

Formulare zeigen Fehlermeldungen des Browsers an. Diese Meldungen sind unvollständig und verschwinden in manchen Browsern. Die Browser-Benachrichtigungen können dem Besucher helfen. Formulare werden jetzt mit einem no-validate-Tag versehen. Die Validierung findet dann erst statt, wenn das Formular abgeschickt wird. Dies ist eine vorläufige Lösung. Die endgültige Lösung wird im Team besprochen.

⚙️ Redundante oder falsche Aria-Attribute

An mehreren Stellen werden redundante oder falsche Aria-Attribute verwendet, wie z.B. die Rolle „searchbox“ bei einem Eingabeelement, dem bereits type=search hinzugefügt wurde, oder eine Rolle=„application“ bei einem Videoelement. Dies ist ein Hinweis. Intern diskutieren wir noch darüber, wie wir damit umgehen sollen.

⚙️ Titel der Sitemap-Seiten bei Mouse-over 

Der Titel eines Links in der Sitemap wird bei Mouse-over wiederholt. Entfernen Sie das Titelattribut bei Mouse-over für Links in der Sitemap. Diese Arbeit sollte geplant werden.

⚙️ Filteroptionen anzeigen

Bei der Filterung sehen die Filteroptionen wie ein Kontrollkästchen aus, sind aber Links. Dies ist nicht korrekt. Für alle Varianten der Filteroptionen (Ankündigungen, Projekte, Nachrichten, Veranstaltungen und Suchergebnisse) wurden Designs erstellt. Diese sollen in den Entwurf implementiert werden.

⚙️ Optionsschaltflächen in der Baumstruktur

Die Optionsfelder in den Bewertungsstrukturen sind eigentlich Links zu Seiten. Sie sind nicht mit der Frage verknüpft. Es wurde eine Anpassung im Design vorgenommen. Dies muss in die Funktionalität aufgenommen werden.

Gelöste Probleme mit der Barrierefreiheit

✅ Titel Sprunglinks

Jede Seite enthält Sprunglinks, die in einem Nav-Element mit dem Aria-Label 'skipnav menu' platziert sind. Für einige Benutzer von Hilfesoftware ist der Begriff 'skipnav' unklar. Der Name wurde in 'skiplink menu' geändert.

✅ Brotkrumenpfad beim Zoomen anzeigen

Bei einer Bildschirmauflösung von 1280px x 1024px und einer Vergrößerung von 400% wird der Brotkrumenpfad durch einen Zurück-Pfeil ersetzt. Dadurch gehen wichtige Informationen über den Standort der Seite in der Struktur der Website verloren. Beim Heranzoomen und auf mobilen Geräten bleibt der Breadcrumb-Pfad intakt. Er wird dann zu einem Dropdown-Menü.

✅ Links im Brotkrumenpfad verschwinden visuell, aber nicht im Code

Wenn Besucher auf einer Seite auf 300% und 400% zoomen (bei einer Bildschirmbreite von 1280 x 1024 Pixeln), verschwindet der Brotkrumenpfad der Seite und es bleibt nur ein Link mit dem zugänglichen Namen der Seite übrig. Obwohl mehrere Links im Breadcrumb-Pfad visuell verschwinden, sind sie im Code noch vorhanden. Dies ermöglicht es Tastaturbenutzern, den Fokus auf diese Links zu legen. Dabei wird der Fokus nicht visuell angezeigt, und sehende Tastaturbenutzer wissen zu diesem Zeitpunkt nicht, welche Elemente den Fokus haben. Dieses Problem wurde in den verbesserten Breadcrumb-Pfad aufgenommen, der beim Zoomen und auf mobilen Geräten angezeigt wird.

✅ Name für Barrierefreiheit im Brotkrümelpfad

Wenn eine Seite auf kleinen Bildschirmen (320 px breit) angezeigt wird, wird in der Breadcrumb-Navigation eine Schaltfläche mit '...' angezeigt. Der zugängliche Name dieser Schaltfläche lautet „Mehr“. Dieser Name beschreibt jedoch nicht eindeutig den Zweck der Schaltfläche. Der zugängliche Name wurde geändert.

 ✅ Der Text „Unmittelbar nach“ und „Suchen nach“ in den automatischen Suchvorschlägen

Der Text 'Unmittelbar nach' und 'Suchen nach' in den automatischen Suchvorschlägen wird nicht von Hilfssoftware ausgelesen. In den automatischen Suchvorschlägen wird aria-hidden = true aus den Texten 'Unmittelbar nach' und 'Suchen nach' entfernt.

✅ Name für Barrierefreiheit im Media Player

Im Medienplayer gibt es ein Kontrollkästchen, das die Zustimmung zu den Nutzungsbedingungen von YouTube ermöglicht. Es trägt die Bezeichnung „Meine Wahl speichern“. Ihre Wahl wird auf dieser Website gespeichert, bis Sie Ihren Browser schließen.“. Diese Bezeichnung ist nicht angemessen, da sie nicht deutlich macht, welchen Zweck das Kontrollkästchen hat. Die Bezeichnung der Zugänglichkeit wurde geändert in „Ich akzeptiere die Bedingungen von www.youtube.com“.

✅ Kontrastfarbe für Fehlermeldungen in Formularen

Der Kontrast der Farbe Rot bei Fehlermeldungen in einem Formular ist einfach zu gering. Die Farbe wurde angepasst.

✅ Kontrastfarbe der deaktivierten Seitennummerierung

Die Kontrastfarbe der deaktivierten Paginierung ist im Vergleich zur Hintergrundfarbe zu gering. Der Kontrast der deaktivierten Paginierung in Bezug auf die Hintergrundfarbe wird angepasst.

✅ Nav-Element auf TYPO3-Formularen

Auf dem Kontaktformular von TYPO3-Formularen wurde das nav-Element verwendet, obwohl es nicht benötigt wurde. Das nav-Element wurde entfernt.

✅ Name für Barrierefreiheit der Löschfilter

Unter Filterung gibt es eine Schaltfläche „Löschen“. Der Name der Erreichbarkeit lautet „Alle Filter ausschalten“. Für Sprachsoftware müssen die Texte übereinstimmen. Der Name der Zugänglichkeit wurde in „Alle Filter löschen“ geändert.

✅ Symbol und Name für Barrierefreiheit eines externen Links

Hinter einem externen Link befindet sich ein Symbol, das anzeigt, dass der Link auf eine externe Seite verweist. Dieses Symbol ist nicht in dem zugänglichen Namen dieses Links enthalten. Die svg-Symbole für Links werden auf andere Weise mit Alternativtext versehen.

✅ Links zum Teilen dieser Seite auf der Suchergebnisseite

Wenn eine Suchergebnisseite mit einer Bildschirmauflösung von 1280 x 1024px und einer Vergrößerung von 400 % angezeigt wird, wird das letzte Symbol für soziale Medien unter der Überschrift „Diese Seite teilen“ unsichtbar, da die Schaltfläche zum Hochscrollen überlagert wird. Das Element „Diese Seite teilen“ ist auf der Suchergebnisseite deaktiviert.

✅ Kontrast-Fokusindikator im Mediaplayer

Wenn Tastaturbenutzer über eine Seite zu einem Media Player navigieren, erscheint ein hellblauer Fokusrand um das Video. Auf dem weißen Hintergrund hat dieser Fokusrand einen zu geringen Kontrast. Die Farbe des Fokusindikators wurde so angepasst, dass der Kontrast angemessen ist.

✅ Aria-label von Twitter zu X ändern

Die Fußzeile enthält oft einen Link mit dem Logo von „X“ daneben. Der Link führt zu Twitter und hat dies auch in der Aria-Beschriftung („Go to user name's Twitter page“). Dies könnte besser angepasst werden, so dass die Website und das Aria-Label mit dem sichtbaren Logo von „X“ anstelle von Twitter übereinstimmen. Das Zugänglichkeitslabel wurde aktualisiert.

✅ Titel der Bürgerservice-Websites 

Auf Bürgerservice-Websites, die ein halbes Bild verwenden, fällt der Seitentitel beim Zoomen und bei der mobilen Ansicht über das Bild. Dadurch wird der Titel unleserlich. Das Bild wird ungültig, sobald es auf der gesamten Breite der Website angezeigt wird.

✅ Markierung von Chevrons für Hilfssoftware

Chevrons werden für Hilfssoftware nicht richtig markiert. Role = img auf Chevrons bei Top-Themen wurde entfernt und durch aria-hidden = true ersetzt.

✅ Beziehungen zwischen Bürgerservice-Websites

Die Top-Aufgaben auf der Startseite von Bürgerservice-Websites stehen im HTML-Code in keiner Beziehung zueinander. Die Beziehung zwischen ihnen ist im Code angegeben.

 ✅ Dekorative Bilder in Karten

Bei Verwendung des Inhaltselements Letzte Neuigkeiten und Newscards befindet sich das Bild, das im Code mit den Artikelüberschriften verknüpft ist, jedoch über dieser Überschrift und nicht darunter. Dies kann zu Problemen führen, da die Benutzer denken könnten, dass dieser Inhalt zu einer anderen Überschrift darüber gehört. Dies ist insbesondere ein Problem für Benutzer, die die Webseite nicht visuell sehen, sondern sich auf die Reihenfolge im Code verlassen, z. B. bei der Verwendung von Hilfesoftware. Dieses Problem kann redaktionell gelöst werden, indem das alt-Attribut für alle Bilder in solchen Ansichten leer gelassen wird, so dass sie dekorativ sind.

✅ Rolle der Sitemap

Die Sitemap-Seite verwendet role=„directory“ für das Element ul. Diese Rolle hat keinen zusätzlichen Nutzen für Benutzer von Hilfssoftware. Das Attribut „role“ wurde aus dem Element „ul“ entfernt.

✅ „Mehr Informationen“ in der Ereignistabelle

In der Veranstaltungstabelle gibt es mehrere Links mit dem gleichen Text „Weitere Informationen“. Wenn Links zu verschiedenen Zielen führen und sich auf derselben Seite befinden, sollte der Linktext nicht derselbe sein. Linktext, der innerhalb einer Seite den gleichen Text enthält oder bedeutungslos ist, wie z.B. „Mehr Info“, macht den Zweck des Links nicht deutlich. In der aktuellen Ereignistabelle für Inhaltselemente können wir dieses Problem nicht lösen. Hierfür kann das Ereignis „Seitentyp“ verwendet werden.

✅ H1 auf der Homepage

Auf einer Homepage vom Typ Standard einer Bürgerservice Website fehlt die H1. Das Ausblenden des Seitentitels in den Seiteneigenschaften bedeutet, dass die H1 fehlt. Der Seitentitel wird nicht in HTML versteckt, sondern nur visuell.

✅ Sprunglink zum Hauptinhalt

Wenn Sie den Skiplink „Zum Hauptinhalt“ verwenden, springt der Fokus auf das Akkordeon. Die obersten Aufgaben werden übersprungen. Dies ist nicht korrekt. Wenn Sie den Skiplink 'Zum Hauptinhalt' verwenden, springt der Fokus jetzt zum Seitentitel.

Scrollen Sie bis zum Anfang des Seiteninhalts