Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
Nächste SlideShare
Wird geladen in …5
×

Bilder barrierefrei verwenden

3.282 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×