Tipps zur Content- Erstellung für Webseiten Seminar BS 162 Barrierefreie Informationssysteme - Grundlagen Gerhard Nussbaum Wien, März 2015 gerhard.nussbaum@ki-i.at
Grundlegendes I Klare und verständliche Gliederung / Strukturierung Schriftarten und Schriftgrößen (serifenlos, Schriftgröße anpassbar) Keine zu großen Wortabstände Alt-Texte bei Bildern, Grafiken, Diagramme Erklärung komplexer Grafiken, Diagramme, Tabellen Farben (farbenblinde Menschen) Gute Tastaturunterstützung Tipps zur Content-Erstellung für Webseiten - BS 162, 11.3.2015 2
Grundlegendes II Screenreaderbenutzer sind auf Zusatzinformationen bei der Benutzung der Seite und beim Lesen/Verstehen des Inhaltes angewiesen Die ordnungsgemäße Verwendung der HTML- Elemente gewährleistet dies! Tipps zur Content-Erstellung für Webseiten - BS 162, 11.3.2015 3
Strukturierung die wichtigsten Elemente Überschrift <h1> - <h6> Absatz <p> Listen Nummerierte Liste <ol> Aufzählliste <ul> Definitionsliste <dl> Tabellen <table> Zitat <blockquote> Tipps zur Content-Erstellung für Webseiten - BS 162, 11.3.2015 4
Auszeichnungen im Text Links <a> Kursiv <em> Fett <strong> Zeilenumbruch <br> Abkürzungen <abbr> Sprachauszeichnung <span lang="??"> Kleiner Text <small> Hochgestellter Text <sup> Tiefgestellter Text <sub> Tipps zur Content-Erstellung für Webseiten - BS 162, 11.3.2015 5
Grafiken Für manche Personengruppen bzw. in manchen Situationen sind die Informationen von Grafiken nicht wahrnehmbar Blinde Benutzer Textuelle Browser Kleine Displays: Browser im Handy Schriftart ist nicht veränderbar Farben sind nicht anpassbar Konsequenz: Es ist notwendig, Textäquivalente für Grafiken anzugeben Tipps zur Content-Erstellung für Webseiten - BS 162, 11.3.2015 6
Grafiktypen Logos Dekorationen Grafiken als Platzhalter / zur Positionierung Grafiken mit stilisiertem Text Grafiken als Links Grafiken als Informationsträger Uvm. Die Gestaltung des alt-textes richtet sich nach dem Grafiktyp Tipps zur Content-Erstellung für Webseiten - BS 162, 11.3.2015 7
Logos ALT-Attribut Beschreibt die Institution, nicht die Grafik selbst Grafiktyp voranstellen, falls das Logo nicht verlinkt ist (z.b. Logo: Kompetenznetzwerk KI-I) Z.B. <img src="ki-i_logo.jpg" alt="logo: Kompetenznetzwerk KI-I" title="kompetenznetzwerk KI-I" /> Tipps zur Content-Erstellung für Webseiten - BS 162, 11.3.2015 8
Dekorationen Dekorationen erhöhen die Aufmerksamkeit ALT-Text soll die Art der Aufmerksamkeit beschreiben Dekorationen stimulieren visuell das Interesse ALT-Text soll die wichtigen Bildeigenschaften beschreiben In den meisten Fällen sind Dekorationen nicht sehr informativ, der ALT-Text ist dann oft unnötig und störend! Also alt=! Dekorationen können auch mit CSS eingeblendet werden Tipps zur Content-Erstellung für Webseiten - BS 162, 11.3.2015 9
Dekorationen Beispiel 1: New ALT-Text: New Beschreibung: Stilisierte, sich wiederholende Buchstaben des Wortes New Beispiel 2: Palme ALT-Text: könnte lauten: Animation einer Palme auf einem Sandstrand, die sich im Wind bewegt Oder viel besser ALT= Tipps zur Content-Erstellung für Webseiten - BS 162, 11.3.2015 10
Grafiken als Platzhalter Benutzen von leeren Grafiken zu Positionierungszwecken Dazu geeignet: CSS Tipps zur Content-Erstellung für Webseiten - BS 162, 11.3.2015 11
Grafiken mit stilisiertem Text Manche Autoren benutzen Grafik, um gleiche Schrift in jedem Browser zu garantieren Wenn möglich VERMEIDEN!!! ALT-Text soll den Text auf der Grafik wiedergeben Beispiel: Banner der New York Times on the Web ALT-Text: The New York Times on the Web Tipps zur Content-Erstellung für Webseiten - BS 162, 11.3.2015 12
Grafiken als Links CSS benutzen, um grafische Effekte zu verwirklichen Benutzen Sie den ALT-Text, um das Ziel des Links zu spezifizieren Betrifft oft auch Logos Kein Grafiktyp voranstellen Z.B. <img src="ki-i_logo.jpg" alt="kompetenznetzwerk KI-I" title="kompetenznetzwerk KI-I" /> Tipps zur Content-Erstellung für Webseiten - BS 162, 11.3.2015 13
Grafiken als Informationsträger ALT-Text: Grafiktyp: Grafiktitel (z.b. Organigramm: Struktur des KI-I) Lange Beschreibung: text-basierte Beschreibung des Inhaltes mit LONGDESC-Attribut (hat als Wert den Link zu einer Datei mit der entsprechenden Beschreibung) Link zur Beschreibung Dokumenttext Beispiele: Bilder bzw. Fotos, Landkarten, Diagramme, Organigramme, Tipps zur Content-Erstellung für Webseiten - BS 162, 11.3.2015 14
Grafiken als Informationsträger Beispiel: Bilder/Fotos Alt-Text: Gemälde von Dali: Die Beständigkeit der Erinnerung Lange Beschreibung: Dalis Gemälde Die Beständigkeit der Erinnerung Merkmale: Beschreibung Beschreibung: Dunkle abendliche Stimmung; Ein Strand mit Klippe; Je eine Uhr hängt labbrig über einen Baum, über einen Quader, über ein stilisiertes Lebewesen Entstehungsjahr: 1931 Technik: Öl auf Leinwand Sammlung: The Museum of Modern Art, New York Tipps zur Content-Erstellung für Webseiten - BS 162, 11.3.2015 15
Grafiken als Informationsträger Beispiel: Diagramm Alt-Text: Säulendiagramm: Durchschnittlicher Regenfall in Großbritannien, Japan und Australien Lange Beschreibung: Eine barrierefreie Datentabelle mit Caption, Summary und Überschrift Durchschnittlicher Regenfall in Milimeter Großbritanien Japan Australien Frühjahr 5,3 2,4 2 Sommer 4,5 3,4 2 Herbst 3,5 1,8 1,5 Winter 1,5 1,2 1 Tipps zur Content-Erstellung für Webseiten - BS 162, 11.3.2015 16
Alt-Texte weitere Infos Eine sehr empfehlenswerte Abhandlung mit vielen Beispielen zu weiteren Grafiktypen gibt es in der HTML5-Spezifikation beim img-element. Tipps zur Content-Erstellung für Webseiten - BS 162, 11.3.2015 17
Referenzen/Quellen: Hickson, I., Berjon, R., et al: HTML5 A vocabulary and associated APIs for HTML and XHTML, W3C Recommendation 28. Oktober 2014 Tipps zur Content-Erstellung für Webseiten - BS 162, 11.3.2015 18
Danke für Ihre Aufmerksamkeit! Dipl.-Ing. Gerhard Nussbaum Kompetenznetzwerk KI-I Altenberger Straße 69 4040 Linz Tel: +43 732 2468 3770 Fax: +43 732 2468 3789 gerhard.nussbaum@ki-i.at www.ki-i.at 19