core-bundle icon indicating copy to clipboard operation
core-bundle copied to clipboard

Screenreader-Usability der Inhaltselemente-Übersicht

Open NinaG opened this issue 8 years ago • 2 comments

Aus dem aktuellen Barrierefreiheit-Test, den Heiko Kunert und ich mit der aktuellsten Contao 4-Version durchgeführt haben:

Wenn man sich z.B. in einem Artikel alle eingefügten Inhaltselemente in der Übersicht ansieht, gibt es für Nutzer von Screenreadern mehrere Probleme:

  1. Die Funktionsicons werden im HTML-Code vor der Bezeichnung des Elementtyps bzw. der Inhalte ausgegeben. Dadurch können die Nutzer von Screenreadern an der Stelle nur sehr umständlich erfassen, welchen Inhalt sie hier überhaupt bearbeiten/löschen etc. würden. Ich habe mit Heiko über verschiedene Möglichkeiten gesprochen, wie man hier eine möglichst verständliche Verbesserung hinbekommt. Am Ende einigten wir uns hierauf: Es würde helfen, wenn es jeweils an erster Stelle (vor den Funktionsicons eine Überschrift für Screenreader gäbe, die sowohl angibt, das wievielte Inhaltselement in der Übersicht es ist (Reihenfolge), welchen Typ es hat und ggf. noch welche ID). Der Code könnte dann z.B. so aussehen:
<li id="li_1">
<h2 class="invisible">1. Inhaltselement - Typ X - ID 46</h2>
<div class="tl_content even click2edit toggle_select hover-div">...

Das hätte auch noch den wichtigen Vorteil, dass Nutzer von Screenreadern bei sehr vielen Inhaltselementen gezielt über die Überschriftenstruktur einzelne Inhaltselemente anvisieren könnten.

  1. Bei den Funktionsicons haben die Links Beschriftungen, die z.B. „Inhaltselement ID 46 bearbeiten“ lauten. Das ist für alle Nutzer (auch sehende) nur suboptimal, da der Standardnutzer an der Stelle gar nicht weiß, welches Element welche ID hat. Wenn für sehbehinderte/blinde Nutzer unter Punkt 1 in der Überschrift die ID mit ausgegeben wird, können zumindest sie etwas damit anfangen. Für sehende Nutzer könnte die ID sinnvollerweise noch bei der sichtbaren Typenbezeichnung ergänzend mit ausgegeben werden, damit das auch für sie einen Nutzen hat?

  2. Die Drag-Drop-Funktion ist für blinde Nutzer irrelevant. Da wir aber die normale Verschieben-Funktion haben, empfinde ich das als unproblematisch, da die gewünschte Aktion damit erreicht werden kann. Heiko stimmte mir in dem Fall zu. Für sehbehinderte (und sehende) Nutzer wäre es hingegen hilfreich, wenn der jeweils gerade aktuelle Standort wo man per Drag-Drop hinschiebt, klarer erkennbar wäre. Momentan wird der neue Standort (solange man die Maus beim Verschieben nicht loslässt) nur durch ein leichtes Ausgrauen angezeigt. Hier wäre es für die Nutzer generell besser, wenn das eindeutiger ist. Aus meinen Schulungen weiß ich, dass auch sehende Nutzer häufiger falsch einschätzen, wo sie gerade wären und das CE deshalb erstmal falsch verschieben.

Zum Thema spezifischere Icon-Beschriftungen auch noch siehe Ticket #766

NinaG avatar Apr 19 '17 08:04 NinaG

Aufgrund der verschobenen Formatierung kann ich leider nicht genau nachvollziehen, was Du meinst.

leofeyer avatar Jul 17 '17 13:07 leofeyer

Ich habe den Code oben angepasst, so dass er nun sichtbar sein sollte.

NinaG avatar Jul 20 '17 12:07 NinaG