Bilder sind sehr wichtig für einen Webauftritt: hier lernen Sie, wie man sie barrierefrei und zugänglich einbindet.

1. Bilder barrierefrei verwenden
Platzhalter und dekorative
Graphiken zugänglich machen
Domingos de Oliveira
Online-Redaktion & Barrierefreiheit

2. 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

3. 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.

4. www.oliveira-online.net
Bilder sind sinnvoll
• erleichtern
Wiedererkennung
• lockern die
Textwüste auf
• bringen
Abwechslung
• „verbildlichen“
Inhalte

5. www.oliveira-online.net
Arten von Bildern
• Platzhalter-Graphiken
• dekorative Graphiken
• inhaltliche Bilder
• funktionale Graphiken

6. 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

7. www.oliveira-online.net
Platzhalter-Graphiken
• Einsatz für Tabellen-
Layouts
• stabilisieren das
Tabellen-Konstrukt
• sollten mit dem
Tabellen-Layout
aussterben

8. 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

9. www.oliveira-online.net
Dekorative Graphiken
• verbessern
Wiedererkennung
• erhöhen
Übersichtlichkeit
• verbessern Seiten-
Ästhetik
• erfüllen keine
Aufgaben

10. 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

11. Mehr beim nächsten Mal
Domingos de Oliveira
Online-Redaktion & Barrierefreiheit
www.oliveira-online.net