search

BIK-BITV / BIK-Web-Test

Testverfahren zur Prüfung der Barrierefeiheit von Webanwendungen anhand der Kriterien der WCAG 2.1, EN 301 549 und BITV 2.0
76 stars 22 forks source link

9.1.1.1b Alternativtexte für Grafiken und Objekte #197

Open MarcHaunschild opened 3 years ago

MarcHaunschild commented 3 years ago

Meiner Meinung nach sollte bei den Erläuterungen nicht so sehr von Alternativ-Texten, sondern von accessible name oder zugänglicher Name die Rede sein. Auch bei der Prüfanleitung sollte darauf hingewiesen werden. Bei der Bewertung würde ich auch negativ bewerten, wenn sich Inhalte im zugänglichen Namen zu oft wiederholen, wenn also z.B. der Name einer Person in einem Absatz neben dem Bild zu lesen ist, der eine ID hat und über aria-describedby dem Bild hinzugefügt wird, der Name außerdem im alt- und im title-Attribut steht, in der figcaption und nirgends der eigentliche Inhalt des Bildes beschrieben ist (also z.B. weibliche, erwachsene Person in Business-Kleidung). Den Namen der Person erfährt man schon an vielen Stellen in Texten, die womöglich sogar in einem Programmtisch eimittelbaren Kontext stehen, aber was auf dem Bild zu sehen ist, erfährt man nirgends. Dieses (und ähnliche Probleme) sehe ich beim Prüfen ständig. Insofern macht es IMHO schon Sinn erstens auf mögliche Redundanzen im acc name hinzuweisen (was meiner Meinung nach bei drei und mehr Wiederholungen wenigstens zu einem teilweise erfüllt abgewertet werden sollte) und zweitens begrifflich von dem historisch mit dem alt-Attribut assoziierten Wort "Alternativ-Text" zu "zugänglicher Name" zu wechseln. Auch ist die Prüfung allein mit der Web developer toolbar nicht ausreichend. Meiner Meinung nach sollte jedes Bild einen Alternativ-Text (also einen Wert im alt-Attribut) haben, der dann auch Sehenden zur Verfügung steht, wenn Bilder fehlen. aria-label usw sollten aber auch mit geprüft werden, da diese verwirrende Angaben enthalten können, die ein eigentlich gut befülltes alt-Attribut unverständlich machen. Meiner Meinung nach müsste dieser Prüfschritt daher auch nicht durch Ausblenden der Bilder sondern mit einem Screenreader getestet werden. Wobei auch die Frage ist, ob man dies erst dann machen sollte, wenn alt-Attribute gefüllt sind - leere alt-Attribute sollten aus o.g. Gründen immer zu einer Abwertung führen, ggfs. aber auch nur zu einem "teilweise erfüllt", wenn es ein aria-label o.ä. gibt.

johannesFischer84 commented 3 years ago

Marc, für mich ist es egal, ob wiederholte Angaben der Alternativtexte in der Prüfschrittanleitung aufgeführt werden. Auch die Bezeichnung zugänglicher Name statt Alternativtext kann man machen, muss man aber auch nicht. In den WCAG ist bei 1.1.1 sogar auch von Text-Alternative die Rede, während 4.1.2 den Begriff "name" verwendet.

Meiner Meinung nach sollte jedes Bild einen Alternativ-Text (also einen Wert im alt-Attribut) haben, der dann auch Sehenden zur Verfügung steht, wenn Bilder fehlen.

Das ist doch schon so. Oder meinst du, dekorative Grafiken sollen auch einen Alternativtext haben? Ich weiß nicht, ob ich dich richtig verstanden habe.

aria-label usw sollten aber auch mit geprüft werden, da diese verwirrende Angaben enthalten können, die ein eigentlich gut befülltes alt-Attribut unverständlich machen. Meiner Meinung nach müsste dieser Prüfschritt daher auch nicht durch Ausblenden der Bilder sondern mit einem Screenreader getestet werden.

Man muss nicht mit einem Screenreader prüfen bzw. nur bei Unsicherheit. Man kann auch in den Browser-Entwickler-Werkzeugen den HTML-Quelltext ansehen. So mache ich das häufig.

MarcHaunschild commented 3 years ago

Ich merke gerade, dass mein zugegebenermaßen eilig hingeschriebenes Issue so nicht verständlich ist, Entschuldigung dafür.

Mir ist aufgefallen, dass häufig von Alternativtext die Rede ist. Vielleicht ist das absichtlich uneindeutig, denn darunter kann man jede Textalternative verstehen (für mich ist "Textalternative" die allgemeinste und der WCAG nächste Übersetzung), aber man kann darunter auch explizit den Wert des alt-Attributes verstehen, was vermutlich den meisten Lesern so geht.

Mir scheint, dass beim Schreiben der Prüfschrittanleitung das von der Autorin gedanklich nicht sauber auseinander gehalten wurde und auch nicht als wichtig angesehen wurde. Als Grund könnte ich mir vorstellen, dass die Formulierung schon älter ist als ARIA und dass zu der Zeit, als man sich für den Begriff "Textalternative" entschied, nichts anderes als alt-Attribut oder vielleicht noch title-Attribut gemeint sein konnten.

Auch die Prüfung zielt mit "Bilder ausschalten und alt-Texte prüfen" sehr darauf ab. aufgefallen ist auch mir das erst später, als dann der Test bei SVGs beschrieben wurde. Das was bei SVGs gemacht wird, muss bei jedem Bild gemacht werden, denn die Methoden Textalternativen anzugeben, die bei SVGs funktionieren, funktionieren auch beim img-Element (abgesehen vom title-Element).

Ich sehe drei Möglichkeiten, den Text so zu verändern, dass er meiner Meinung nach noch besser wäre:

  1. Man beschreibt einmal die Techniken, die für alle Bilder funktionieren (z.B. ein per CSS vor Sehenden versteckter Text) und geht dann noch auf die Besonderheiten bestimmter Bilder ein (Hintergrund-Grafiken, SVGs, img usw). Das würde die Texte kürzer machen oder
  2. Man gibt für jedes Format eine in sich vollständige Liste, die vor allem unerfahrenen Prüfern die Schritt-für-Schritt-Abarbeitung leichter machen würde oder
  3. Man gibt als Prüfverfahren an, dass die Stelle mit dem Bild durch die Verwendung eines Screenreaders überprüft werden muss, dann kann man sich die ganzen Details sparen, hat aber den Nachteil, dass Screenreader Unterschiede aufweisen abhängig von vielen Faktoren (Hersteller, Version, OS-Browser-Kombination, AI (Screenreader geben immer öfters Dinge aus, die der Autor der Seite gar nicht hinterlegt hat)...)

Bei der Beschreibung und den vorangehenden Texten sollte sprachlich deutlich und konsistent unterscheidbar von den verschiedenen Möglichkeiten gesprochen werden, Textalternativen anzubieten.

Der erste Satz lautet bereits: "Nicht verlinkte informationsorientierte Grafiken und Bilder müssen mit Alternativtexten versehen werden"

Das klingt schon so nach "Wert im alt-Attribut nur kürzer". Dabei ist es vollkommen legitim eine ausführliche Bildbeschreibung für alle sichtbar neben das Bild zu setzen.

Und obwohl ich persönlich der Meinung bin, dass Textalternativen auch Sehenden zur Verfügung stehen sollten, wenn Bilder nicht vorhanden sind, ist leider auch aria-label zulässig (hier könnte man durchaus über eine Abwertung auf "teilweise erfüllt" nachdenken, denn Bilder abzuschalten als alternative Darstellung ist meiner Meinung nach vollkommen legitim und auch dann sollte eine Text-Alternative für alle zugänglich sein, also auch für Menschen, die keinen Screenreader haben und an aria-Werte nicht ran kommen).

Bei den Icon-Fonts sind mir beispielsweise zwei Dinge aufgefallen:

Falls keine HTML-Textalternative vorhanden ist, prüfen, ob die Textalternative über ein title-Attribut oder aria-label bereitgestellt wird.

Wieso ist das title-Attribut keine HTML-Text-Alternative? das title-Attribut ist doch HTML

Falls HTML-Textalternativen vorhanden sind, die nicht am Bildschirm sichtbar sind: Prüfen, welches Verfahren verwendet wurde, um diese zu verstecken. Wenn display:none verwendet wird, ist dies wie ein nicht vorhandenes oder leeres alt-Attribut zu werten.

Ein Icon-Font kann technisch überhaupt gar kein alt-Attribut haben.

Insgesamt sind meine Änderungswünsche subtil und nicht leicht zu erklären. Kurz gesagt: ich meine, dass die Beschreibung

  1. dass die Beschreibung vermutlich historisch bedingt uneindeutig ist (was wir nie gemerkt haben, weil wir wissen, was gemeint ist)
  2. und dass sie insgesamt sehr alt-Attribut-lastig kling (Alternativtext) oder sogar ist (Bilder ausschalten und alt-Attribute testen

Zuletzt noch ein Vorschlag zum empfohlenen Testverfahren selber: ich schalte die Bilder nie mit der Web Developer Toolbar aus, sondern aktiviere mit der Web Developer Toolbar "alternativ-Texte anzeigen", um zu sehen, ob die Texte auch zum Bild passen...

MarcHaunschild commented 3 years ago

Übrigens gehe ich persönlich beim Testen so vor, dass ich zunächst die alt-Attribute anzeigen lasse Alle Bilder die damit ordentlich beschrieben sind (manchmal alle), habe ich dadurch schnell geprüft. Alle Bilder die damit nicht ordentlich beschrieben sind untersuche ich mit "Element untersuchen" und finde dann bei Icon-Fonts, SVGs und Hintergrund-Grafiken sehr häufig visuell versteckte Texte und schaue mir dann die Methode an, mit der diese versteckt wurden und dann den Text selber (weil wenn die Methode zum verbergen nicht zulässig ist (siehe display: none) brauche ich mir die Texte nicht durchzulesen. Das mache ich so, weil ich dabei meistens fündig werde und in letzter Zeit leider auch noch immer öfter irgendwo in der unsäglichen aria-Flut, die manche Entwicklern neuerdings in ihre Seiten kippen. Sich sicher zu sein, dass ein Bild keine zulässige Text-Alternative hat (was häufig vorkommt) ist tatsächlich ziemlich mühsam, denn auch im Fließtext neben dem Bild ist eine Textalternative ja zulässig. Oder in einer figcaption (die sogar bei der Kalkulation des acc name berücksichtigt wird). Das muss dann also auch gelesen und berücksichtigt werden - fehlt in der Prüfanleitung übrigens! In meinen Prüfungen dauern 9.1.1.1a und 9.1.1.1b immer am längsten von allen. Die meisten Seiten haben viele Bilder und es gibt viele Orte, an denen die Textalternativen angegeben werden können... Wohl dem Prüfer, der in den alt-Attributen fündig wird ;-)

johannesFischer84 commented 3 years ago

Ich gehe mal nur auf zwei Dinge ein, die mir in deiner Beschreibung aufgefallen sind:

Und obwohl ich persönlich der Meinung bin, dass Textalternativen auch Sehenden zur Verfügung stehen sollten, wenn Bilder nicht vorhanden sind, ist leider auch aria-label zulässig (hier könnte man durchaus über eine Abwertung auf "teilweise erfüllt" nachdenken, denn Bilder abzuschalten als alternative Darstellung ist meiner Meinung nach vollkommen legitim und auch dann sollte eine Text-Alternative für alle zugänglich sein, also auch für Menschen, die keinen Screenreader haben und an aria-Werte nicht ran kommen).

Ein Abzug auf "teilweise erfüllt" ist nicht durch die WCAG legitimiert. Diese sagen nur, dass eine Alternative für Nicht-Text-Inhalte vorhanden sein muss, nicht dass Alternativen für alle sichtbar sein müssen. Wenn überhaupt, müsste ein Browser eine Funktion bereitstellen, dass Werte von aria-label sichtbar werden.

Falls keine HTML-Textalternative vorhanden ist, prüfen, ob die Textalternative über ein title-Attribut oder aria-label bereitgestellt wird.

Wieso ist das title-Attribut keine HTML-Text-Alternative? das title-Attribut ist doch HTML

Als ich mich vor Jahren in den Test eingearbeitet habe, hab ich das auch erst nicht verstanden. Gemeint ist mit "HTML-Text-Alternative" wohl ein Text, der in einem Knoten/Element direkt drinsteht (ohne Attribut), also z. B. <div>Texalternative</div>, wobei das div noch eine CSS-Eigenschaft background-image mit einem Bild hinterlegt hat.

MarcHaunschild commented 3 years ago

Ich gehe mal nur auf zwei Dinge ein, die mir in deiner Beschreibung aufgefallen sind:

Und obwohl ich persönlich der Meinung bin, dass Textalternativen auch Sehenden zur Verfügung stehen sollten, wenn Bilder nicht vorhanden sind, ist leider auch aria-label zulässig (hier könnte man durchaus über eine Abwertung auf "teilweise erfüllt" nachdenken, denn Bilder abzuschalten als alternative Darstellung ist meiner Meinung nach vollkommen legitim und auch dann sollte eine Text-Alternative für alle zugänglich sein, also auch für Menschen, die keinen Screenreader haben und an aria-Werte nicht ran kommen).

Ein Abzug auf "teilweise erfüllt" ist nicht durch die WCAG legitimiert. Diese sagen nur, dass eine Alternative für Nicht-Text-Inhalte vorhanden sein muss, nicht dass Alternativen für alle sichtbar sein müssen.

So werte ich es auch in einem Test, obwohl ich es nicht gut finde.

Meine eigene Meinung darf bei der Bewertung keine Rolle spielen.

Wenn überhaupt, müsste ein Browser eine Funktion bereitstellen, dass Werte von aria-label sichtbar werden.

Wir werten alles mögliche ab, weil es von der heutigen Technik nicht umgesetzt wird. Siehe browsereigene Fehlermeldungen bei falsch ausgefüllten Formularen.

Da sagen wir auch nicht, der Seitenerstellet hat für eine Fehlerbehandlung gesorgt, also alles gut.

Da reichen die wenigen Nutzer, die die Meldungen nicht erreicht, eine eigentlich saubere und formal korrekte Umsetzung als nicht ausreichend zu werten.

Das Argument, die Browserhersteller sind in der Pflicht, lassen wir hier zurecht nicht gelten.

Informationen sollten nur dann als zugänglich bewertet werden, wenn sie allen zugänglich sind. Auch Sehenden. Und zwar hier und heute mit den verfügbaren üblichen Mitteln (widely available im wcag-Jargon - siehe dort auch die Diskussion über die Frage, ob Überschriften ausreichen, um "bypass Blocks" zu erfüllen).

Falls keine HTML-Textalternative vorhanden ist, prüfen, ob die Textalternative über ein title-Attribut oder aria-label bereitgestellt wird.

Wieso ist das title-Attribut keine HTML-Text-Alternative? das title-Attribut ist doch HTML

Als ich mich vor Jahren in den Test eingearbeitet habe, hab ich das auch erst nicht verstanden.

Wenn es dir auch so ging, wäre das doch ein Argument für eine andere Formulierung.

Gemeint ist mit "HTML-Text-Alternative" wohl ein Text, der in einem Knoten/Element direkt drinsteht (ohne Attribut)

So würde ich es auch interpretieren. Für Menschen, die lange in dem Thema sind, ist das klar.

Aber für die ist die Anleitung nicht, oder?

sweckenmann commented 3 years ago

@MarcHaunschild Vielen Dank für deine Rückmeldung und Hinweise. Ich versuche mal an ein paar Stellen anzusetzen:

Ich werde da mal ran gehen, aber die neuen Prüfschritte haben Priorität, bitte um etwas Geduld ;-)

MarcHaunschild commented 3 years ago

@MarcHaunschild Vielen Dank für deine Rückmeldung und Hinweise.

Freut mich, dass du es hilfreich findest. Dass du/ ihr alles genau so seht wie ich, habe ich nicht erwartet.

aria-label bekommt auch bei mir immer ein erfüllt. Ist etwas was man mal versuchen könnte für eine zukünftige WCAG zurück zu melden oder eine Diskussion darüber anzuregen (genau wie sichtbare Beschriftungen von Icons, fällt mir gerade bei "unserem" Test wieder unangenehm auf, dass es bei manchen Auflösungen keine Beschriftung für Leichte Sprache und DGS gibt...

Ich werde da mal ran gehen, aber die neuen Prüfschritte haben Priorität, bitte um etwas Geduld ;-)

Wenn Ihr es gar nicht übernehmt, habe ich dafür auch Verständnis. Ich sage nur, was mir auffällt, wenn mir etwas auffällt. Selbst wenn es hilfreich ist, muss es sich ja nicht immer in Änderungen niederschlagen. Aber natürlich freue ich mich, wenn ich an dem von mir bevorzugten Testverfahren mitarbeiten darf!

ChristinEngel commented 2 years ago

Auch wenn dieses Issue schon ein paar Monate alt ist, möchte ich gern auch auf die Thematik der Bilder eingehen, da ich es für äußerst wichtig halte, an dieser Stelle noch genauer hinzuschauen, insbesondere auch bei komplexen Grafiken.

Redundante Alternativtexte Hierbei würde ich mit den Ausführungen von MarcHaunschild mitgehen. Die - wenn auch geringfügige - Abwertung von konsequent redundanten Alternativtexten stellt zumindest einen geringen Mangel dar. Dies gilt meiner Ansicht sowohl, wenn beispielsweise im -Attribut und zusätzlich in dieselben Aussagen stehen, aber auch, wenn beispielsweise den gleichen Text beinhaltet wie das -Attribut. Eine Ausnahme würde ich machen, wenn die Bildunterschrift und der Inhalt des -Attributs gleich sind, da hier davon ausgegangen werden kann, dass die Bildunterschrift den Zweck erfüllt, für alle sichtbar zu sein und auf das nicht verzichtet werden sollte (s.u.).

Verwendung des -Attributs für Alternativtexte Ich persönlich halte die Verwendung von zur Bereitstellung von Alternativtexten für zwingend. Schon allein, weil diese auch genutzt werden, um zwischen Grafiken zu navigieren. Dafür könnte sicherlich auch das aria-label äquivalent genutzt werden, jedoch sprechen zwei Gründe meiner Ansicht nach dagegen:

  1. Die Nutzung nativer HTML-Elemente ist - wenn auch keine Anforderung an die Barrierefreiheit, aber aus weiteren technischen Gründen nicht zu unterschätzen - immer vorzuziehen. Ein Grund ist z. B., dass das -Attribut auch immer häufiger von Suchmaschinen und anderen Diensten genutzt werden. Da Suchmaschinenoptimierung für viele Angebote ein großes Thema ist, würde ich dies in jedem Fall als Argumentation nicht vernachlässigen. Die SEO wird mit der Verwendung von verbessert.
  2. Da die Verwendung des -Attributs in der HTML-Spezifikation vorgeschrieben ist, sollte es mindestens für Prüfschritt 4.1.1 für valide Syntax vorhanden sein. Würde nun z. B. nicht das -Attribut, sondern etwa verwendet werden, hieße dies, dass das -Attribut leer bleiben müsste, um Redundanz zu vermeiden, da es ja vorhanden sein muss gemäß HTML-Spezifikation. Dies sollte jedoch ausschließlich für reine Schmuckgrafiken gemacht werden. Um hier Konsistenz und Validität zu wahren, bleibt eigentlich nichts anderes übrig, als für Alternativtexte zu verwenden.
  3. Die Problematik, dass sehende Personen keinen Zugriff auf den -Text haben, sehe ich jedoch ebenfalls so. Nach meiner Erfahrung stehen die Texte zumindest all jenen zur Verfügung, die die Grafiken nicht angezeigt bekommen. Ansonsten würde ich hier zusätzlich die Verwendung einer Caption empfehlen, denn diese erfüllt ja genau den Zweck, für alle Personen sichtbar zu sein und gleichzeitig direkt mit der Grafik verlinkt zu sein.

Beschreibung für komplexe Bilder In der WCAG ist hier von "Short text" und "long text" die Rede. Ein Long Text ist demnach erforderlich, wenn der Short Text nicht dazu geeignet ist, den Zweck und Inhalt des Nicht-Text Objekts wiederzugeben. Meine Frage an dieser Stelle ist: Wie prüfen Sie, ob eine ausführliche Beschreibung ("long text") tatsächlich den Zweck und Inhalt des Bildes wiedergibt? Wie bewerten Sie es in diesem Zusammenhang, wenn a) Die Beschreibung nicht alle dargestellten Informationen enthält, in dem z. B. bildtragende Elemente weggelassen werden? b) Die Beschreibung falsche Angaben enthält, z. B. die Daten eines Diagramms nicht korrekt ausgelesen wurden? c) Die Beschreibung lediglich im -Attribut hinterlegt ist und sie wesentlich länger als 80 Zeichen ist? d) Die Beschreibung nicht neutral ist und Wertungen bzw. offensichtliche Interpretationen enthält? Gleichzeitig wäre hier auch die Frage zu stellen, ob es bereits von offizieller Seite konkrete Anforderungen an solche Bildbeschreibungen (hier im Unterschied zum Alternativtext) gibt. Ich würde dafür plädieren hier ggf. noch ein paar mehr Informationen zur Erstellung von guten Bildbeschreibungen für komplexe Bilder bereitzustellen (alle Inhalte wiedergeben, neutrale und verständliche Formulierungen, zu Diagrammen Datentabelle bereitstellen etc.). Insbesondere bei Grafiken, deren Verständnis Fachwissen erfordert, sollten die Beschreibungen auch von solchen Personen überprüft bzw. besser noch erstellt werden. Wie gehen Sie damit um, wenn Sie nicht einschätzen können, ob die Beschreibung adäquat den Inhalt wiedergibt?

Verlinkung zwischen Grafik und Beschreibung Im BITV-Test scheint mir dieser Aspekt etwas weniger scharf formuliert zu sein, als es bei der WCAG der Fall ist. Generell beschreibt die WCAG für Situationen, bei denen Kurztexte nicht ausreichend sind, um den Inhalt und Zweck des Bildes wiederzugeben, verschiedene Techniken zur Bereitstellung der ausführlichen Beschreibung. Unter anderem wird hier die Verwendung von aria-describedby (Angabe einer id), die Verwendung von longdesc (dieses HTML-Element [depricated] erfordert die Angabe eines Links zur Beschreibung) oder auch den Hinweis zum Ort der Beschreibung direkt im -Attribut. Demnach denke ich, dass der Prüfschritt nur erfüllt ist, wenn nicht nur eine ausführliche Beschreibung im umgebenen Text vorhanden ist, sondern darüber hinaus mit einer der dort beschriebenen Techniken der Ort der Beschreibung deutlich gemacht wird. Auch ich halte dies für notwendig, da sonst insbesondere Menschen mit Blindheit nicht wissen können, ob es sich denn bei einem Text tatsächlich um die Beschreibung des folgenden Bildes handelt und auch, welche Teile des Textes das Bild nun beschreiben. Zudem müsste der Text dann auch wertungsfrei/neutral sein. Wie sehen Sie dies oder wie haben Sie diesen Aspekt bei bisherigen Prüfungen berücksichtigt?

Ich hoffe, ich konnte die Diskussion zu Grafiken noch einmal etwas beleben mit dem hier beschriebenen Input und freue mich auf weitere Perspektiven zu der Problematik. Ich denke, dass insbesondere komplexe Grafiken und Fachgrafiken im Allgemeinen sehr viele wertvolle und wichtige Informationen vermitteln und dass der Zugang zu Grafiken immer wichtiger wird in vielerlei Hinsicht. Dies sollte auch in den Prüfungen berücksichtigt werden, sodass ich dafür plädiere, auch auf die Qualität der Beschreibungen zu achten und stets darauf zu beharren alle Inhalte einer Grafik genau zur Verfügung zu stellen.

Beste Grüße