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

3.312 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

×