Bilder barrierefrei verwenden
Platzhalter und dekorative
Graphiken zugänglich machen
Domingos de Oliveira
Online-Redaktion...
www.oliveira-online.net
Was kommt
• Bilder wozu?
• Arten von Bildern
• Attribute des Image-Tags
• Was sind Platzhalter?
• ...
www.oliveira-online.net
Alle lieben Bilder
• Menschen ohne Behinderungen
• oder mit Lernschwierigkeiten
• oder mit motoris...
www.oliveira-online.net
Bilder sind sinnvoll
• erleichtern
Wiedererkennung
• lockern die
Textwüste auf
• bringen
Abwechslu...
www.oliveira-online.net
Arten von Bildern
• Platzhalter-Graphiken
• dekorative Graphiken
• inhaltliche Bilder
• funktional...
www.oliveira-online.net
Attribute für Image
• alt = Alternativtext entspricht kurzer
Beschreibung für Screenreader-Nutzer
...
www.oliveira-online.net
Platzhalter-Graphiken
• Einsatz für Tabellen-
Layouts
• stabilisieren das
Tabellen-Konstrukt
• sol...
www.oliveira-online.net
Platzhalter – Best Practice
• keine Beschreibung
• leeres alt-Attribut
• zum Beispiel <img alt src...
www.oliveira-online.net
Dekorative Graphiken
• verbessern
Wiedererkennung
• erhöhen
Übersichtlichkeit
• verbessern Seiten-...
www.oliveira-online.net
Deko – Best Practice
• kurze Beschreibung im Alt-Text „Logo“,
„Banner“…
• auch für Blinde besser: ...
Mehr beim nächsten Mal
Domingos de Oliveira
Online-Redaktion & Barrierefreiheit
www.oliveira-online.net
Upcoming SlideShare
Loading in …5
×

Bilder barrierefrei verwenden

2,801 views
2,817 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,801
On SlideShare
0
From Embeds
0
Number of Embeds
1,153
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Bilder barrierefrei verwenden

  1. 1. Bilder barrierefrei verwenden Platzhalter und dekorative Graphiken zugänglich machen Domingos de Oliveira Online-Redaktion & Barrierefreiheit
  2. 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. 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. 4. www.oliveira-online.net Bilder sind sinnvoll • erleichtern Wiedererkennung • lockern die Textwüste auf • bringen Abwechslung • „verbildlichen“ Inhalte
  5. 5. www.oliveira-online.net Arten von Bildern • Platzhalter-Graphiken • dekorative Graphiken • inhaltliche Bilder • funktionale Graphiken
  6. 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. 7. www.oliveira-online.net Platzhalter-Graphiken • Einsatz für Tabellen- Layouts • stabilisieren das Tabellen-Konstrukt • sollten mit dem Tabellen-Layout aussterben
  8. 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. 9. www.oliveira-online.net Dekorative Graphiken • verbessern Wiedererkennung • erhöhen Übersichtlichkeit • verbessern Seiten- Ästhetik • erfüllen keine Aufgaben
  10. 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. 11. Mehr beim nächsten Mal Domingos de Oliveira Online-Redaktion & Barrierefreiheit www.oliveira-online.net

×