Bilder barrierefrei verwenden

Bilder barrierefrei verwenden

Platzhalter und dekorative Graphiken zugänglich machen

Domingos de Oliveira

Online-Redaktion & Barrierefreiheit

www.oliveira-online.net

Was kommt

• Bilder wozu?

• Arten von Bildern

• Attribute des Image-Tags

• Was sind Platzhalter?

• Best Practice für Platzhalter

• Was sind dekorative Graphiken?

• Best Practice für dekorative Graphiken


Alle lieben Bilder

• Menschen ohne Behinderungen

• oder mit Lernschwierigkeiten

• oder mit motorischen Einschränkungen

• oder mit leichten Sehbehinderungen

• oder mit Hörschädigungen

• und Blinde haben überhaupt nichts dagegen.


Bilder sind sinnvoll

• erleichtern Wiedererkennung

• lockern die Textwüste auf

• bringen Abwechslung

• „verbildlichen“ Inhalte


Arten von Bildern

• Platzhalter-Graphiken

• dekorative Graphiken

• inhaltliche Bilder

• funktionale Graphiken


Attribute für Image

• alt = Alternativtext entspricht kurzer Beschreibung für Screenreader-Nutzer

• title = Titel wird sichtbar, wennman mit der Maus über das Bild fährt

• long desc = lange Beschreibung, wird praktisch kaum verwendet und stirbt mit HTML5


Platzhalter-Graphiken

• Einsatz für Tabellen-Layouts

• stabilisieren das Tabellen-Konstrukt

• sollten mit dem Tabellen-Layout aussterben


Platzhalter – Best Practice

• keine Beschreibung

• leeres alt-Attribut

• zum Beispiel <img alt src=“a12352325“ alt=““>

• ansonsten lesen Screenreader den Dateinamen, so ignorieren sie ihn


Dekorative Graphiken

• verbessern Wiedererkennung

• erhöhen Übersichtlichkeit

• verbessern Seiten-Ästhetik

• erfüllen keine Aufgaben


Deko – Best Practice

• kurze Beschreibung im Alt-Text „Logo“, „Banner“…

• auch für Blinde besser: kurze Beschreibung im Alt-Text, etwa „Logo: Schneemann mit schwarzem Hut“

• für alle anderen kurze Beschreibung im title-Tag

Mehr beim nächsten Mal

Domingos de Oliveira

Online-Redaktion & Barrierefreiheit


http://www.oliveira-online.net/

Technology

Bilder barrierefrei verwenden