Von barrierefrei zugänglichen Informationen im Web profitieren nicht nur Menschen mit körperlichen, geistigen, intellektuellen oder sensorischen Einschränkungen, sondern alle. Auch Suchmaschinen.
Ausser bei simplen, kleinen Tabellen eine Zusammenfassung eingeben.
Tabellen haben keine leeren Zeilen oder Spalten.
Tabellen nicht für Layout-Zwecke missbrauchen.
Links und Downloads
Links und Downloads eindeutig beschriften.
Sprechende Linktexte verwenden, also nicht «mehr», «weiter», «hier klicken» usw.
Titel-Feld nur für ergänzende Informationen benutzen, die nicht für alle wichtig sind. Der Text in diesem Feld wird bei Mouseover als Tool-Tipp eingeblendet, ist aber auf Touchscreens nutzlos. Screenreader lesen den Text nicht zuverlässig vor.
Seitenzahl bei PDF in der Download-Komponente eingeben.
Bilder und Grafiken
Alt-Text
Alt-Texte werden von Screenreadern vorgelesen.
Informative Grafiken und Fotos erfordern einen Alt-Text.
Dekorative Grafiken ohne Informationsgehalt oder Schmuckbilder brauchen nicht zwingend einen Alt-Text bzw. haben einen leeren Alt-Text.
Im Zweifelsfall Alt-Text schreiben.
Ein Alt-Text ist möglichst kurz und präzise.
Alle aktiven Regionen einer Imagemap haben einen Alt-Text.
Bei verlinkten Grafiken gibt der Alt-Text Auskunft über das Link-Ziel.
Alt-Texte formulieren
Beantworte die Frage «Wer macht was und wo?»
Erwähne Details wie Farbe, Wetter, Bekleidung, wenn dies relevant ist.
Vermeide Formulierungen wie «Bild einer» oder «Foto von», denn Screenreadern sagen vor dem Alt-Text automatisch «Bild».
Beginne mit einem Grossbuchstaben und schliesse ganze Sätze mit einem Punkt ab.
Bild-Legende
Info- und Inhaltsgrafiken benötigen eine Legende.
Eine Legende repetiert nicht den Alt-Text.
Langbeschreibung
Alle Vollbilder wie Schaubilder, Diagramme oder Organigramme haben eine Langbeschreibung.
Eine Langbeschreibung ist nicht notwendig, wenn sie in den zugehörigen Text integriert ist.
Dekorative Bilder
Haben keinen Informationsgehalt oder tragen nichts zur Aussage der Webseite bei; sie verbessern nur das visuelle «Look and feel».
Dienen dem visuellen Styling wie Hintergrund, Ränder, Abstandhalter usw.
Würden den Alt-Text redundant machen (z. B. wenn derselbe Text auch gleich neben dem Bild).
Informative Bilder
Vermitteln ein einfaches Konzept oder eine Information, die mit wenigen Wörtern oder in einem Satz ausgedrückt werden kann.
Tragen etwas zum Kontext bei.
Ohne Alternativtext wäre der Inhalt beeinträchtigt.
Sollten so präzis wie möglich beschrieben werden.
Falls eine längere Beschreibung erforderlich ist, sollte dies im Text der Seite erfolgen und der Alt-Text knapp sein.
Funktionale Bilder
Häufig Buttons oder Links.
Vermitteln die Aktion oder das Ziel, keine Beschreibung («Seite drucken» statt «Bild eines Druckers»).
Begriffe wie «Klicke» oder «Öffne» sollten vermieden werden, das Ziel reicht.
Logos
Der ideale Alt-Text für Logos ist der Text im Logo.
Infografiken
Der gesamte Inhalt ist im Alt-Text zu beschreiben.
Mitunter deshalb sollten Infografiken nicht zu komplex sein.
Text auf Bildern
Grundsätzlich nicht empfohlen.
Farbkontrast mindestens 4,5:1.
Derselbe Text soll 1:1 als Alt-Text hinterlegt werden.
PDF
Für PDF bzw. deren Ausgangsdokumente gelten weitestgehend dieselben Kriterien wie für Webinhalte.
PDF brauchen einen Titel und eine Beschreibung (je nach Applikation auch Thema genannt).
PDF müssen Tags und Lesezeichen enthalten.
Vorgaben fürs AEM
Für den Dateinamen im DAM gelten die Namenskonventionen.
Seitenzahl in der Download-Komponente eingeben.
Sehr wichtige Informationen stehen direkt auf der Website zur Verfügung, nicht nur in einem PDF.
PDF vor dem Hochladen fürs Web optimieren. Die Dateigrösse kann ohne nennenswerten Qualitätsverlust oft massiv reduziert werden.