Das Prüfverfahren zur BITV


Sie sind hier: BITV-Test > Liste der Erfolgskriterien > Prüfkriterium 1.1.1c (3 von 49)


zum WCAG-Test wechseln


Blättern: zum ersten Prüfschritt zum vorhergehenden Prüfschritt zum nächsten Prüfschritt zum letzten Prüfschritt

Prüfschritt 1.1.1c
Leere alt-Attribute für Layoutgrafiken

Technische Angaben

Version bis 10.07.2017 | Aktuell
BITV-Bedingung 1.1.1 Nicht-Text-Inhalte
WCAG-Erfolgskriterium 1.1.1 Nicht-Text-Inhalte
Bewertungsalternativen ja / eher erfüllt / teilweise erfüllt / eher nicht erfüllt / nein / nicht anwendbar
Gewichtung geringes Gewicht (1 Punkt)
Bezieht sich auf einzelne Webseite
Prüfschritt erfüllt Layoutgrafiken haben leere alt-Attribute.
Prüfschritt nicht anwendbar Layoutgrafiken sind nicht vorhanden.

Was wird geprüft?

Eine Grafik, die keine informative Funktion hat, benötigt keinen Alternativtext. Grafiken ohne informative Funktion sind zum Beispiel Abstandshalter, Farbflächen, Muster, oder rein dekorative Fotos. Solche Grafiken sollen mit einem leeren alt-Attribut (alt="") ausgezeichnet werden

Thema des Prüfschritts sind auch Icons, die mittels Icon Font eingebunden sind und SVGs.

Warum wird das geprüft?

Screenreader behandeln Bilder ohne alt-Attribut anders als Bilder mit leerem alt-Attribut.

Wenn ein Screenreader auf ein Bild ohne alt-Attribut stößt, dann liest er normalerweise den Namen der Bilddatei vor. Denn in vielen Fällen muss man für die Benutzung von Seiten unbedingt wissen, was auf Bildern drauf ist. Dateinamen können dafür manchmal brauchbare Hinweise liefern.

Wenn Bilder nur der Dekoration dienen, ist das Vorlesen des Dateinamens dagegen störend. Bei diesen Bildern wäre es besser, wenn der Screenreader sie einfach übergehen würde.

Das leere alt-Attribut informiert den Screenreader darüber, dass das betreffende Bild nur der Dekoration dient und sein Inhalt unbedeutend ist. Der Screenreader ignoriert das Bild dann komplett, er tut so, als ob es überhaupt nicht da wäre.

Das leere alt-Attribut ist also sehr wichtig. Es stellt sicher, dass der Besucher mit Screenreader nicht durch das dauernde Vorlesen von bedeutungslosen Dateinamen an der Nutzung der Seite gehindert wird.

Icon Fonts sind Schriftarten, die Symbole statt Buchstaben beinhalten. Sie werden per CSS eingebunden. Manche moderne Browser übergeben an den Screenreader ein Unicode-Äquivalent, was bei dekorativen Icons störend ist.

Wie wird geprüft?

1. Anwendbarkeit des Prüfschritts

Der Prüfschritt ist anwendbar, wenn als img-Element eingebundene Grafiken, Font Icons oder SVGs für Layoutzwecke verwendet werden. oder wenn informative Grafiken mit leeren alt-Attributen versehen sind.

2. Prüfung

2.1 Leere alt-Attribute für Layoutgrafiken

  1. Die Seite im Internet Explorer laden.
  2. In der Web Accessibility Toolbar die Funktion Images > List Images aufrufen.
  3. Prüfen, ob Layoutgrafiken und dekorative Grafiken leere alt-Attribute enthalten. Falls bei solchen Grafiken title-Attribute vergeben sind, müssen auch diese leer sein.
  4. Zu bemängeln sind komplett fehlende alt-Attribute (werden durch die Toolbar-Funktion mit "NoAlt!" gekennzeichnet) und auch Bezeichnungen wie "Abstandshalter", "spacer", "leer" etc. für Layoutgrafiken.

2.2 Dekorative Icon Fonts:

Beim Einsatz von Icon Fonts ist es nicht möglich das leere alt-Attribut einzusetzen.

Ein dekoratives Icon wird von assistiven Technologien ignoriert, wenn es mit einem geeigneten Verfahren vor diesen versteckt wird (z.B. aria-hidde="true")

Prüfung
  1. Seite in Firefox aufrufen.
  2. Mit Firebug prüfen, ob mit der CSS-Eigenschaft content für die Pseudoelemente :before oder :after Inhalt (Font Icons) zu dekorativen Zwecken eingebunden wird.
  3. Falls für diese Icons Text ausgegeben wird (z.B. content: "k"), prüfen, ob das Icon mit einer geeigneten Technik für Screenreader versteckt wird (z.B. aria-hidden="true").

2.3 Dekorative SVGs:

Prüfung
  1. Seite in Firefox aufrufen.
  2. Mit Firebug prüfen, ob es sich um ein direkt in HTML eingebundene SVG handelt (Inline SVG).
  3. Prüfen, ob die Grafik mit aira-hidden="true" versteckt wird.

3. Hinweise

Bei aus mehreren Teilbildern zusammengesetzten Bilder mit Informationsgehalt sollte eines der Teilbilder einen Alternativtext haben, der über den Inhalt des zusammengesetzten Bildes informiert. Die anderen Teilbilder sollten dann mit leeren alt-Attributen versehen sein.

4. Bewertung

Nicht voll erfüllt:

  • Layoutgrafiken haben kein alt-Attribut
  • Layoutgrafiken sind mit Alternativtexten wie "Platzhalter" oder "leer" versehen.
  • Layoutgrafiken haben title-Attribute, die nicht leer sind.

Einordnung des Prüfschritts

Formulierung BITV 2.0

Siehe Prüfschritt 1.1.1a "Alternativtexte für Bedienelemente"

Einordnung des Prüfschritts nach WCAG 2.0

Guideline

Success Criterion

Techniques

HTML Techniques
CSS Techniques
Failures

Quellen

Die WCAG 2.0-Technik H67 sieht zusätzlich vor, dass bei Layout-Grafiken auch kein title-Attribut vorhanden sein soll oder dass das title-Attribut leer ist:

For each image that should be ignored:

  1. Check that title attribute is either absent or empty.
  2. Check that alt attribute is present and empty or contains only whitespace (but not  )

Im BITV-Test werden title-Attribute bei Layout-Grafiken aber nicht geprüft.

Quelle: H67: Using null alt text and no title attribute on img elements for images that AT should ignore

Fragen zu diesem Prüfschritt

Auf der Seite sind auch Grafiken, die ganz klar informativen Charakter haben, mit leeren alt-Attributen versehen. Vermutlich wird automatisch ein leeres alt-Attribut erzeugt, wenn zu einem Bild kein entsprechender Text eingegeben worden ist. Zu welchem Prüfschritt gehört das?

So ist das leere alt-Attribut für dekorative Grafiken ganz sicher nicht gedacht. Das leere alt-Attribut ist ja nicht dasselbe wie ein fehlendes alt-Attribut. Es soll dem Besucher sagen, dass die Grafik keinen wichtigen Inhalt enthält und nur der Dekoration dient. Der Besucher weiß dann, dass er nichts versäumt, wenn er die Grafik nicht sieht. Die automatische Vergabe leerer Alternativtexte für informative Grafiken ist ein Missbrauch des leeren alt-Attributs. Sie sorgt dafür, dass man sich auf dieses Kennzeichen nicht mehr verlassen kann.

Dies wird nur in Prüfschritt 1.1.1b bewertet.

Warum soll man bei Layoutgrafiken nicht die jeweilige Aufgabe des Bildes, also zum Beispiel "Abstandhalter" in den Alternativtext schreiben?

Wofür sollte das gut sein? Den Abstand herstellen, also die Aufgabe des Bildes übernehmen kann der Alternativtext nicht. Die Information, dass da irgendwo Abstände zwischen Elementen der Seite sind, ist nutzlos. Wie die Elemente auf der Seite angeordnet sind, lässt sich der Tatsache, dass an irgend welchen Stellen Abstandhalter sind, auch nicht entnehmen.

Solche Alternativtexte haben also keinen Nutzen. Auf der anderen Seite kann es sehr störend sein, wenn der Screenreader dauernd "Abstandhalter Abstandhalter Abstandhalter ..." vorliest.

Warum müssen Layoutgrafiken mit leeren alt-Attributen versehen werden? Sie werden ohnehin nicht gebraucht, warum also nicht einfach das alt-Attribut ganz weglassen?

Leider ist es noch nicht selbstverständlich, dass informative Grafiken mit Alternativtexten versehen sind. Wenn eine Webseite Grafiken ohne Alternativtext enthält, kann der blinde Besucher also nicht davon ausgehen, dass diese Grafiken nur dem Layout dienen und für ihn nicht relevant sind. Daher die Festlegung, dass der Webdesigner Grafiken durch Zuordnung eines leeren alt-Attributs ausdrücklich als Layoutgrafiken kennzeichnen soll.

Blättern: zum ersten Prüfschritt zum vorhergehenden Prüfschritt zum nächsten Prüfschritt zum letzten Prüfschritt