Bilder barrierefrei verwenden
-
Upload
domingos-de-oliveira -
Category
Technology
-
view
2.069 -
download
0
description
Transcript of 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
www.oliveira-online.net
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.
www.oliveira-online.net
Bilder sind sinnvoll
• erleichtern Wiedererkennung
• lockern die Textwüste auf
• bringen Abwechslung
• „verbildlichen“ Inhalte
www.oliveira-online.net
Arten von Bildern
• Platzhalter-Graphiken
• dekorative Graphiken
• inhaltliche Bilder
• funktionale Graphiken
www.oliveira-online.net
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
www.oliveira-online.net
Platzhalter-Graphiken
• Einsatz für Tabellen-Layouts
• stabilisieren das Tabellen-Konstrukt
• sollten mit dem Tabellen-Layout aussterben
www.oliveira-online.net
Platzhalter – Best Practice
• keine Beschreibung
• leeres alt-Attribut
• zum Beispiel <img alt src=“a12352325“ alt=““>
• ansonsten lesen Screenreader den Dateinamen, so ignorieren sie ihn
www.oliveira-online.net
Dekorative Graphiken
• verbessern Wiedererkennung
• erhöhen Übersichtlichkeit
• verbessern Seiten-Ästhetik
• erfüllen keine Aufgaben
www.oliveira-online.net
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
www.oliveira-online.net