Test auf Barrierefreiheit zeigt jede Menge Fehler

Liebe Community,

habe heute meine Website https://die-schreibmaus.de mit einem Testtool https://rocketvalidator.com auf Barrierefreiheit gescannt und jede Menge kritische und ernsthafte Anmerkungen bekommen. Das Tool überprüft Barrierefreiheit nach Axe Core 4.4.

Einige der Fehlermeldungen leuchten mir ein und wurden von mir bei der Erstellung der Seite quasi "billigend in Kauf genommen".

Etliche andere verstehe ich nicht und wollte fragen, ob diese tatsächlich den aktuellen offiziellen Standards entsprechen, und ob ich da selbst etwas ändern kann (und wenn ja, was), oder ob ich sie vernachlässigen kann / sollte, oder ob das Todo's für die Programmierer*innen von Contao und deren Extensions sind:

• Form elements must have labels

Each form element must have a programmatically associated label element.

• Certain ARIA roles must be contained by particular parents

Certain ARIA roles must be contained by particular parent roles in order to perform the intended accessibility functions.

• Links must have discernible text

Link text and alternate text for images, when used as links, must be discernible by a screen reader, must not have a duplicate label, and must be focusable.

• Ensures landmarks are unique

Landmarks must have a unique role or role/label/title (i.e. accessible name) combination.

• Aside should not be contained in another landmark

Ensures the complementary landmark or aside is at top level

• All page content should be contained by landmarks

It is best practice to contain all content excepting skip links, within distinct regions such as the header, nav, main, and footer.


Freue mich über eine Einschätzung,

grashalm

Erst mal vorweg: Ich kenne das von Dir eingesetzte Tool nicht. Axe Core ist eine Barrierefreiheits-Engine für die automatisierte Testung, wenn ich das richtig sehe. Der BITV setzt auf BITV 2.0 / EN 301 549 und daran würde ich mich bei der Prüfung auf Barrierefreiheit in Deutschland halten. In wieweit durch Axe Core alles berücksichtigt ist, was in BITV 2.0 gefordert wird oder ggf. auch mehr geprüft wird, weiß ich nicht.

Nach meiner Erfahrung machen automatisierte Tests aber nur eine erste "gut/schlecht-Aussage" und müssen durch manuelle Kontrolle verifiziert werden. Man muss also jeden einzelnen Punkt der bemängelt wurde ganz konkret untersuchen um eine Aussage treffen zu können. Pauschal kann man m.E. zu den von Dir aufgeführten Problemen gar nichts sagen.

Schau Dir an welche konkreten Teile Deiner Website bemängelt wurden. Hat der bemängelte Link tatsächlich keinen erkennbaren Linktext und ggf. warum nicht? Bei welchem Formular/Formularelement fehlen die Label? Ist das ein Core-Formular? Kommt das aus einer Erweiterung? Ist da ggf. ein angepasstes Template im Spiel? Bei welchen Elementen fehlen ARIA-Rollen? ...

Eine Barrierefreiheitsprüfung ist sehr aufwendig und erfordert viel Erfahrung. Es gibt in Deutschland einige Prüfstellen bei denen man einen solchen Test in Auftrag geben kann https://www.bitvtest.de/bitv_test/bi...efstellen.html.
Man kann aber auch einen Selbstbewertung durchführen https://www.bitvtest.de/bitv_test/bi...bewertung.html. Wichtig dabei ist, dass der Selbstbewertungsbogen bei der kompletten Selbstbewertung einer Website auch für jede einzelne Unterseite ausgefüllt werden muss.

Wie weit man bei der Einhaltung aller Kriterien gehen will, muss man bei einer nicht behördlichen Seite sicher selbst entscheiden. Bei behördlichen Seiten gibt es Vorgaben, die aber häufig noch immer nicht eingehalten werden. In sofern darf man bei einer eher privaten Seite wie Deiner mit Sicherheit auch den Mut zur Lücke haben. Ist eben alles eine Frage von Aufwand und Nutzen.

Hallo mlweb,

danke für Deine Einschätzung! Werde mir bitv mal ansehen und schauen, welchen Aufwand ich da noch betreibe...

Habe noch mal zwei Nachfragen zu den Ergebnissen des von mir benutzten Validator-Programms:

Es gibt unter anderem den Fehler aus:

Zitat:

---

Ensures landmarks are unique
Landmarks must have a unique role or role/label/title (i.e. accessible name) combination.

---

und führt dann als Beispiele die beiden folgenden an:

<aside id="left"> und <nav class="mod_customnav block">

<aside> taucht ja in der fe_page.html5 zweimal auf, einmal mit "left" und einmal mit "right", und <nav...> taucht in meinem quelltext sogar dreimal auf,
da ich an verschiedenen stellen verschiedene navigationen nutze.

da ich weiß, wie sorgfältig contao programmiert wird, kann ich mir nicht vorstellen, dass diese regeln hier außer acht gelassen wurden. prüft der validator
hier eventuell noch nicht nach den neuesten standards? kann / muss ich dieses ergebnis (s. zitat oben) vernachlässigen?

Hab ich das richtig recherchiert, das ist nicht erlaubt:

Code:

---

<footer>
  <aside>
  ...
  </aside>
<footer>

---

aber das hier ist erlaubt?

Code:

---

<footer>
  <article>
    <aside>
    ...
    </aside>
  </article>
<footer>

---

Im ersten Beispiel müsste man dann also aside durch section ersetzen?

Hallo bugbuster,

die Seite, die ich zur Validierung der Barrierefreiheit genutzt habe, war https://rocketvalidator.com. Dort gab es bezüglich des aside-Attributes zwei verschiedene Fehlermeldungen:

1. Zitat:

   ---

   Ensures landmarks are unique. Landmarks must have a unique role or role/label/title (i.e. accessible name) combination.

   ---

   , und
2. Zitat:

   ---

   Aside should not be contained in another landmark. Ensures the complementary landmark or aside is at top level.

   ---

Die zweite Fehlermeldung besagt quasi, dass <aside>...</aside> für sich stehen muss und nicht von einem anderen landmark umschlossen sein darf. Demnach sind Deine beiden Snippets wohl 'nicht erlaubt'.
Den Fehler, den ich bezüglich Deiner Bannermodul-Datei "mod_banner_list_all.html5" bekommen habe, war die erste Meldung oben. Diese muss man wohl so verstehen, dass man die Betonung hinten auf
"combination" legt. So konnte ich zum Beispiel diese erste Fehlermeldung eliminieren, indem ich am Ende des öffnenden <aside -Tags ein Title-Attribut eingefügt habe.

Zitat:

---

title="banner_im_footer"

---

<aside> selbst muss demnach wohl nicht "unique" sein, wenn es einen Zusatz (role/label/title) erhält, der es damit einmalig macht. Sonst gäbe es ja bereits im Template "fe_page.html5" Probleme, da da ja
bereits <aside id="left"> und <aside id="right"> vorkommt. Aber mit der Zusatzdefinition id="xyz" wird es dann wieder einmalig und kann benutzt werden. Insofern hatte ich die erste Fehlermeldung anfangs falsch interpretiert und dachte daher, dass das <aside>-Attribut im Quellcode einer Seite überhaupt nur ein einziges Mal auftauchen dürfte. Von daher hat sich natürlich mein Eintrag bei Dir in github erledigt.

Aber vermutlich macht es tatsächlich Sinn, das <aside>-Attribut in Deinen Banner-Templates um eine Role, ein Label, oder einen einmaligen Title zu ergänzen. Dann bräuchte ich beim nächsten Update des Banner-Moduls dieses Template nicht mehr von Hand anzupassen.

Liebe Grüße von grashalm

Also beispielsweise

Code:

---

<aside id="bmid8472">

---

würde reichen?

Hab das mal in Version 1.3.3. so umgesetzt.

hallo bugbuster,

ja, ich vermute, eine definition einer ID zusätzlich im aside-tag würde ausreichen.
ich habe mir die fehlermeldung noch mal angesehen. dort heißt es ausführlich:

Zitat:

---

Ensures landmarks are unique
Landmarks must have a unique role or role/label/title (i.e. accessible name) combination.

How to Fix the Problem:
Correct markup solutions:
landmark-unique contains eleven passing markup solutions:
<main id="pass-main">Only main</main>

<header id="pass-header">Only header</header>

<form id="pass-form-aria-label-1" aria-label="form-label-1"></form>
<form id="pass-form-aria-label-2" aria-label="form-label-2"></form>

<div id="form-label-1">form-with-label-1</div>
<div id="form-label-2">form-with-label-2</div>
<form id="pass-form-aria-labelledby-1" aria-labelledby="form-label-1"></form>
<form id="pass-form-aria-labelledby-2" aria-labelledby="form-label-2"></form>

<form id="pass-aside-aria-label-1" aria-label="aside-label-1"></form>
<form id="pass-aside-aria-label-2" aria-label="aside-label-2"></form>

<div id="aside-label-1">aside-with-label-1</div>
<div id="aside-label-2">aside-with-label-2</div>
<form id="pass-aside-aria-labelledby-1" aria-labelledby="aside-label-1"></form>
<form id="pass-aside-aria-labelledby-2" aria-labelledby="aside-label-2"></form>

<footer id="pass-footer">Only footer</footer>

---

vermutlich entspricht die variante id="aside-label-1" so ziemlich deiner idee mit den IDs für die unterschiedlichen banner-module.
ich werde das auf jeden fall nachher noch ausprobieren. problem ist: aufgrund eines finanziellen engpasses muss ich noch ein paar tage warten,
bis ich wieder ein test-kontingent der pro-version des rockeet-validators kaufen kann, um es entsprechend zu testen.

<aside> hat ja bereits immer eine eigene ID.

habe das bundle gerade aktualisiert und dein original-template eingebunden. dann habe ich beispielhaft eine seite mit einem anderen tool (firefox-addon) getestet (weil ich mir den rocketvalidator gerade nicht leisten kann) namens "access assistant" (kostenlos: icon ist ein blauer blindenführhund). und er hat mir 3 meldungen zu "aside" ausgespuckt. die dritte war diese:

Zitat:

---

<aside class="mod_banner block" id="bmid370"><figure itemtype="http://schema.org/ImageObject" itemscope="" class="banner_wrap"><div id="banner_23" class="banner_image"><a itemprop="contentUrl" title="" target="_blank" href="bbfebanner/banclicks/bid/23"><picture><source height="60" width="468" type="image/webp" sizes="468px" srcset="assets/images/1/banner_23_evelyn-0c280512.webp 468w, assets/images/5/banner_23_evelyn-df86dd18.webp 936w"><img loading="lazy" alt="banner_23_evelyn" sizes="468px" srcset="assets/images/e/banner_23_evelyn-648ce072.jpg 468w, assets/images/f/banner_23_evelyn-9e7630b3.jpg 936w" src="assets/images/e/banner_23_evelyn-648ce072.jpg" width="468" height="60"></picture></a></div><figcaption itemprop="caption" class="banner_name">banner_23_evelyn</figcaption></figure></aside>

Note:
This aside does not have a unique accessible name as required when two or more aside elements are present

---

Zusätzlich waren noch <aside id="left"> und <aside id="right"> auf der seite aktiv. nachdem ich das alte, von mir modifizierte template wieder eingebunden hatte und erneut getestet habe, verschwand die obige fehlermeldung. das von mir modifizierte template des banner-moduls sieht in zeile 2 so aus:

PHP-Code:

---

<aside class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?> title="banner_im_footer">

---

vorausgesetzt, das kleine accessibility-tool arbeitet korrekt, dann erscheint die fehlermeldung bezüglich des aside-attributes zumindest dann nicht, wenn ich am ende des attributes so etwas wie title="banner_im_footer" einbinde. das ergänzen des tags mit einer bmid hat demnach nicht funktioniert. vielleicht muss man wirklich so etwas wie "role, label oder title" einbauen, damit es funktioniert (s.a voriger post, 2. zeile im zitat). ich hoffe, das hilft dir weiter...

update: ein weiteres tool, das sich in die devtools des firefox integriert (add-on: Axe Accessibility) testet ebenfalls mit folgender Meldung:

Zitat:

---

To solve this issue, you need to...
Fix the following:

The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable

---

Ich würde da eher vorschlagen bei sowas die Templates nur mit einem div auszuliefern. Ob es wirklich ein aside-Element oder sonst was ist, ist ja je nach Seite durchaus verschieden. Und da man mit aria die Barrierefreiheit durchaus verschlimmbessern kann, wäre ein Nichtssagendes div immer noch besser als alles falsche ;-)

Viele Grüße

hallo MacKP, habe deinen vorschlag mal ausprobiert und das <aside>-tag im template durch ein <div> ersetzt, und siehe da: es funktioniert einwandfrei!
das von mir ergänzte title-attribut hatte ich vorher herausgenommen und das template in der version 1.3.2 benutzt, bevor BugBuster es modifiziert hatte.

@BugBuster: die aktuelle template-version aus dem banner-bundle 1.3.5 mit dem title-attribut behebt zwar die fehlermeldung, die ich zuletzt gepostet hatte, erzeugt aber gleichzeitig einen anderen / neuen fehler: "Aside should not be contained in another landmark". diesen kann man sich genauer ansehen mit dem firefox-addon axe-accessibility, das sich in die devtools integriert. ich halte das tool für recht tauglich und es ist kostenlos. damit kannst du jedenfalls gut sortiert alle fehler einer seite bezüglich barrierefreiheit anzeigen lassen.
wenn ich also die alte template-version aus 1.3.2 nehme und meine title-attribut-ergänzung am ende des aside-tags weglasse, brauche ich eigentlich nur noch die aside-klammer durch eine div-klammer zu ersetzen und es müsste funktionieren. so kann man dann auch auf die definition der bmid und eines titles verzichten.

ich hoffe, du kannst diesen lösungsansatz bei dir erfolgreich nachstellen...

@bugbuster:

deine lösung, ein title-attribut einzubinden, hat leider nicht funktioniert. ich bekomme im rocketvalidator nach wie vor die fehlermeldung bezüglich des aside-attributes. wenn ich es durch ein div ersetze, verschwindet die fehlermeldung. guck vielleicht mal, ob du diese fehlermeldung mithilfe eines kostenlosen testtools für accessibility nachstellen kannst, und ob sie verschwindet, wenn du aside durch div ersetzt. vermutlich bleibt die funktionalität deiner templates dabei erhalten, sodass man das problemlos austauschen kann.
habe das in github auch noch mal kurz beschrieben, siehe hier: https://github.com/BugBuster1701/con...ent-1264578788

ich freue mich, wenn du da noch mal nach schauen könntest.

liebe grüße, grashalm