contao
Icon-Beschriftungen spezifischer gestalten
Aus dem aktuellen Barrierefreiheit-Test, den Heiko Kunert und ich mit der aktuellsten Contao 4-Version durchgeführt haben:
Sehbehinderte und blinde Nutzer würden erheblich davon profitieren, wenn in Contao die Icon-Beschriftungen spezifischer wären. Wenn man z.B. in der Seitenstruktur ist, lautet der Alternativtext für alle Bearbeiten-Icons identisch „Seite bearbeiten“. Besser wäre, wenn der Alternativtext jeweils noch den Namen der Seite enthält, also „Seite X bearbeiten“ oder „Seite Y bearbeiten“ (bitte Seitenname, nicht nur ID).
Das gilt für sämtliche Funktions-Icons (Bearbeiten, Einstellungen bearbeiten, Duplizieren, Verschieben, Löschen etc.)
Ebenso bei Artikeln, News, Events, Dateiverwaltung etc. Wenn es nicht für alle Bereiche machbar sein sollte, wäre es gut, es zumindest bei möglichst vielen Bereichen zur Verbesserung der Usability einzufügen.
Der Text "Seite X bearbeiten" steht doch im Title-Attributes des umschließenden <a>-Elements?
Das title-Attribut ist eine sehr schlechte Möglichkeit um so wichtige Infos mitzuteilen, da die Ausgabe des title-Attributs rein optional in Screenreadern (und vergleichbaren assistiven Tools) ist. Das heißt, dass sehr viele Nutzer assistiver Tools von vornherein den Inhalt des title-Attributs nicht erfahren.
Ergänzend stellen die anderen Nutzer (bei denen das Attribut ausgegeben wird) diese Option auch aus, weil das title-Attribut seit langem im Internet sehr falsch eingesetzt wird. Viele CMS füllen den title-Attribut automatisiert und übermäßig aus, insbesondere bei Navigationen, so dass diesen Nutzern dann z.B. jeder Navpunkt doppelt ausgegeben wird.
Sprich: Im Endergebnis ist es so, dass ein großer Teil der assistiven Nutzer das title-Attribut von vornherein nicht mitbekommt. Und ein großer Teil der restlichen Nutzer, die Option wegen Genervtheit ausschaltet. Diesbezüglich waren meine Tests damals im Rahmen der DBSV-Interviews überdeutlich.
Abgesehen davon gibt es auch äußerst deutliche Empfehlungen diesbezüglich von Seiten des W3 und ähnlichen Organisationen.
Die Empfehlung ist also ganz klar: Funktionsicons müssen einen aussagekräftigen Alternativtext haben. Wenn die Funktionsicons mit einem Link versehen sind, könnte man notfalls alternativ dem Link ein aria-label="..." geben. Aber das wäre nur eine Notlösung. Die original vorgesehene Version ist und bleibt der Alternativtext, denn genau dafür wurde dieses Attribut geschaffen. :)
Ich finde den Vorschlag eigentlich gut, das Linkziel in der Linkbeschreibung ausführlicher zu benennen und ggf. individuell an die Linkziele anzupassen, sehe da aber folgende Probleme, bzw. möchte ich das noch zur Diskussion stellen:
-
Je länger ein Seitenname (oder Dateiname oder Modulname...) ist, desto länger werden ALLE Beschreibungen der Funktionsicons. Das führt dann dazu, das ein Screenreader zig mal einen langen Seitennamen vorlesen muss. Beispielhaft angenommen es gäbe mehrere Seiten mit Ansprechpartnern. Um die Seiten unterscheiden zu können, werden die Seitentitel automatisch länger. Der Screenreader liest dann z.B. "Seite Ansprechpartner der Contao Association bearbeiten, Einstellungen der Seite Ansprechpartner der Contao Association bearbeiten, Seite Ansprechpartner der Contao Association duplizieren, Seite Ansprechpartner der Contao Association mit allen Unterseiten duplizieren... usw." (dazwischen noch die Zusatzinformationen vom Screenreader, dass es sich um einen Link oder ein Bild handelt usw.) Da wird man als blinder Zuhörer doch wahnsinnig und braucht ewig, um den richtigen Link zu finden, oder nicht? Gilt hier nicht auch die Regel "weniger ist mehr"? In dem Beitrag oben schreibt @NinaG, dass viele Nutzer das Vorlesen der Titel-Tags absichtlich deaktivieren, weil sie oft falsch benutzt werden und dann z.B. die Navigationslinks doppelt vorgelesen werden. Wenn die Seitennamen bei jeder Funktion im Seitenbaum ergänzt würden, wäre das doch auch nicht besser, sondern eher schlimmer, weil sie dann nicht nur doppelt, sondern gleich mehrfach nacheinander runtergerattert werden. Und die eigentliche Funktion der Links (bearbeiten, duplizieren etc.) ginge in den langen Beschreibungen unter. Denke ich zumindest. Wie seht ihr das?
-
In Bezug auf Zugänglichkeit heißt es doch eigentlich immer, dass das ALT-Tag eines Bildes den dargestellten Bildinhalt kurz beschreiben soll, damit sehbeeinträchtige Personen wissen, was auf dem Bild dargestellt ist. Demnach müsste das ALT-Tag beim Bearbeiten-Icon also eigentlich "Bleistift-Symbol" heißen und nicht mit dem Linkziel benannt werden. Ist es nicht allgemeine eine schlechte Praxis, im ALT-Text eines Bildes eine Beschreibung für das Linkziel eines umschließenden Links anzugeben? Wenn es z.B. ein verlinktes Teaser-Bild gibt, das auf eine Veranstaltung verlinkt, dann würde der blinde Nutzer nie erfahren, das auf dem Teaser-Bild z.B. ein bestimmtes Gebäude oder eine bestimmte Person zu sehen ist, weil als ALT-Beschreibung der Veranstaltungsname vorgelesen würde?
-
Könnte es ein Kompromiss sein, anstelle langer Seiten-/Datei-/Modulnamen nur IDs vorzulesen? Wobei das bei vielen Inhaltselementen vermutlich auch nicht gerade hilfreich wäre ("Artikel mit ID 4365 bearbeiten" usw.)
Abgesehen davon gibt es auch äußerst deutliche Empfehlungen diesbezüglich von Seiten des W3 und ähnlichen Organisationen.
Gibt es dazu verlinkbare Quellen? Könnte hilfreich für die Einschätzung und Diskussion sein... Danke.
Ergänzend noch ein anderer Vorschlag:
Die Icons werden nicht als IMG eingebunden, sondern als normale Textlinks, wobei per CSS der Text ausgeblendet wird und dafür das jeweilige Icon als CSS-Hintergrundbild eingebunden wird. Die Verwendung von ALT-Tags wäre dann völlig überflüssig und könnte auch nicht semantisch falsch verwendet werden. Die Icons bieten inhaltlich keinen Mehrwert (außer dass es gut aussieht und weniger Platz braucht), denn eigentlich geht es ja nur um den Aufruf der jeweiligen Funktion (bzw. des jeweiligen Links).
Dann gäbe es zwei Möglichkeiten:
<a class="edit" href="contao?do=article..." title="Seite Seite Ansprechpartner der Contao Association bearbeiten"><span class=""invisible">Bearbeiten</span></a>
oder so:
<a class="edit" href="contao?do=article..." title="Bearbeiten"><span class=""invisible">Seite Seite Ansprechpartner der Contao Association bearbeiten</span></a>
Beides hätte am Monitor den Vorteil, dass der title-Tag des Links als Tooltip angezeigt würde, wenn man mit der Maus über das Icon fährt (für Mobile bräuchte man ggf. eine Lösung mit Javascript für die Anzeige des Tooltips)
@leofeyer
Der Text "Seite X bearbeiten" steht doch im Title-Attributes des umschließenden
<a>-Elements?
Zumindest im Seitenbaum im Online-Demo ist das nicht der Fall, alle title-Tags sind zwar vorhanden, aber leer:
//EDIT: Moment, im Seitenquelltext sind die title-Tags vorhanden und ausgefüllt, sie werden nur im Firefox-Debugger nicht angezeigt. Könnte an den Javascripts für die Tooltips liegen?