Leitfaden für barrierefreie Publikationen und Webseiten
aus dem Wiki der GRÜNEN JUGEND
Zurück zu AG_Vielfalt_Inklusion
Der Leitfaden soll bei der Erstellung von barrierefreien Publikationen und Webseiten für die GJ helfen. Bring gerne deine Fragen oder dein Wissen ein. Auch Vorschläge zur Struktur sind gerne gesehen!
Offline: Barrierefreie Publikationen sind solche in Leichter Sprache sowie in einer Hörfassung (DAISY-Format) oder in Brailleschrift.
Online: -> Barrierefreiheit_im_Internet
So der Teil für Webdesign ist damit beendet. Ich hoffe er hilft euch weiter. Für Verbesserungen und Kritik habe ich immer ein offenes Ohr(oder ergänzt den Teil halt ;)) Wenn ihr noch Fragen dazu habt schreibt mir doch: Pascal.Nohl-Deryk@rub.de Gnaarz 22:39, 1. Feb 2011 (CET)
Inhaltsverzeichnis |
Einleitung
Dieser Leitfaden für barrierefreie Publikationen und Webseiten ist eine Handreichung für alle, die GRÜNE JUGEND Publikationen oder Webseiten erstellen und sie darin unterstützen möchte, diese barrierefrei bzw. barrierearm zu gestalten. Barrierefreiheit bedeutet, dass Gegenstände, Medien und Einrichtungen von jedem Menschen unabhängig von einer eventuell vorhandenen Behinderung uneingeschränkt benutzt werden können. Barrierefreiheit ist dabei nicht nur für Menschen mit Behinderung eine Voraussetzung zur Teilhabe. Auch andere Gruppen profitieren davon. Zum Beispiel sind leicht verständlich geschriebene Texte für Menschen mit einer anderen Muttersprache und breitere Türen auch für Eltern mit Kinderwagen von Vorteil.
Im Bereich von Publikationen und Webseiten gibt es zwei Arten von Barrieren. Einerseits inhaltliche Barrieren, wie schwer verständliche Texte. Andererseits Barrieren in den Zugängen, wie z.B. fehlende Untertitel für Gehörlose unter einem Video.
In diesem Leitfaden werden Tipps zur Vermeidung beider Arten von Barrieren gesammelt. Diese Tipps stellen keine abschließende Sammlung dar, denn in einer sich ständig wandelnden (Um-)Welt können immer wieder Barrieren entstehen. Deshalb ist vollständige Barrierefreiheit mit den uns zur Verfügung stehenden Mitteln vielleicht nicht immer zu erreichen. Wichtig ist daher, bisher Bekanntes umzusetzen, Barrieren abzubauen und so die Teilhabe für einen stetig wachsenden Kreis zu ermöglichen.
Inhaltliche Barrieren. Tipps zur Vermeidung:
Viele Menschen haben Schwierigkeiten kompliziert geschrieben Texte zu verstehen. Das betrifft Menschen ohne gute Deutschkenntnisse, Gehörlose, Menschen mit niedrigem Bildungsstand oder einer geistigen Behinderung.
Leichte Sprache
Wirklich barrierefrei sind nur Texte, die in Leichter Sprache verfasst sind. Die Leichte Sprache wurde genau dafür entwickelt. In Leichter Sprache zu schreiben muss gelernt werden. Es braucht dafür ausgebildete Menschen um Texte zu übersetzen.
Internetseite für die Leichte Sprache: www.leichtesprache.org
Organisationen:
- Übersetzung Leichte Sprache
- Mensch zuerst - Netzwerk People First Deutschland e.V.
- Kölnische Straße 99, 34119 Kassel
- Telefon: 05 61 - 72 88 5 5 5
- Telefax: 05 61 - 72 88 5 5 8
- E-Mail: info@menschzuerst.de
- Homepage: http://www.people1.de/index.html
- Für: Übersetzung Leichte Sprache, Veröffentlichung eines Wörterbuchs "Leichte Sprache"
Weitere Übersetzer:
- Henrik Nolte
- Kirchditmolder Straße 42
- 34131 Kassel
- Mail: henrik.nolte@modukit.com
- Für: Übersetzungen in Leichte Sprache
- Info: heute selbständig, Ulrike Bürgel hatte in der Zeit von 2008-2010 Kontakt mit ihm bei seinem früheren Arbeitgeber Mensch zuerst-Netzwerk.
Tipps für verständliche Texte
Auch wenn wir es nicht schaffen alle Texte der GRÜNEN JUGEND in leichte Sprache zu übersetzen, können wir versuchen sie so verständlich wie möglich zu schreiben. Dies sind Tipps um Texte verständlicher zu machen:
- Kurze Sätze
- Nebensätze vermeiden
- Fremdwörter vermeiden oder zumindest erklären
- Texte klar strukturieren
Barrierefreie Webseiten. Ein Leitfaden zur Umsetzung:
Dokumente
Barrierefreie PDF müssen eine Struktur haben und die Sprache des jeweiligen Dokuments muss vorher definiert werden. Am einfachsten ist die Erstellung mit Libre Office. Dabei erledigt ein Plugin automatisch ein barrierefreies PDF. Für das Betrachten von PDF-Dateien kann ebenfalls die freie Software Libre Office empfohlen werden. Sie ermöglicht über "Optionen" und "Zugänglichkeit" die Unterstützung von Zugangsprogrammen, sowie Grafikmodifikationen.
Video
Video sollten untertitelt sein, damit z. B. Gehörlose die Information verstehen können.
Webseiten
Fast alle Empfehlungen kann mensch sich hier live angucken: http://www.der-auftritt.de/index.php (CMS: Joomla)
Korrekter Einsatz von Webstandards
Erste Grundvoraussetzung ist der korrekte Einsatz von Webstandards wie HTML und CSS. Am einfachsten ist es die Webseite ganz normal zu erstellen und dabei auf strikte Trennung von Inhalt und Design zu achten. Fehler findet ihr mit den Validatoren des W3C (für HTML: http://validator.w3.org/; für CSS: http://jigsaw.w3.org/css-validator/). Die Fehlerbehebung ist dann selbsterklärend. Bei manchen CMS (meistens ältere Versionen) gibt es keine valide Code Ausgabe. Dort hilft entweder ein Update oder aber der Einsatz von HTML-Overrides. Außerdem kann der Code noch so gut sein, er kann leicht durch schreibende User unvalide werden (insbesondere Formatierungen im Text). Die Lösung dazu, siehe nächster Punkt.
Logische Struktur der Webseite
Passend zu den Webstandards sollte auf deren logische Struktur geachtet werden! Denn vor allem Screenreader können sich gut an der Struktur orientieren.
Es gibt verschiedene Möglichkeiten einem Text eine Formatierung zu geben. Wir nehmen als Beispiel eine Überschrift für einen Artikel, die in Arial und roter Farbe dargestellt werden soll.
Möglichkeit 1: Der Überschrift die Eigenschaften direkt mitgeben (nach Punkt 1 ausgeschlossen)
Möglichkeit 2: Die Überschrift in ein span-Selektor zu packen oder ihr eine Klasse zu geben p class=ueberschrift1>Überschrift und diese Selektoren im CSS dann mit "font-family=: Arial;" und "color: red;" zu stylen!
Möglichkeit 3: Überschrift in ein dafür vorgesehenes h1-Tag zu packen und diesen Selektor mit den gleichen Eigenschaften wie bei 2 zu stylen.
Es besteht also die Auswahl zwischen Möglichkeit 2 und 3. Möglichkeit 3 ist die bessere Wahl, denn damit lassen sich 6-Überschriftenarten definieren (h1-h6). Diese sollten dann auch logisch vergeben werden.
Beispielsweise:
h1 für einen Thema-Titel
h2 für eine Unterthema-Überschrift
h3 für Artikelüberschrift
h4 für Zwischenüberschriften im Artikel
Bei einer reinen HTML/CSS-Seite lässt sich das sehr einfach und gut umsetzten. Auch die meisten CMS unterstützen diese Logik. Allerdings gibt es leider auch Templates, die nicht so aufgebaut sind. Webdesigner sollte diese also entweder selber entwerfen oder bei der Auswahl darauf achten. Außerdem kann diese Logik leicht zerstört werden, wenn viele unerfahrene Benutzer Artikel bearbeiten und dabei statt die Zwischenüberschrift h4 zu wählen, den Text (beispielsweise) einfach selbst fett markieren. Für einen visuellen Nutzer entsteht hier kein Unterschied. Für einen mit einem Screenreader schon, denn dieser interpretiert die h4 als Überschrift und das fett lediglich als Text.
Schriftgröße
Skalierbare Schriftgrößen sind eine gute Sache. Denn sie ermöglichen es dem Besucher die Schrift auf seine Verhältnisse anzupassen. Nicht zwingend notwendig aber ein netter Zusatz sind Buttons zur Schriftvergrößerung und -verkleinerung die auf der Seite eingebunden werden. Jeder moderne Browser beherrscht dies. Im Firefox beispielsweise über [strg] + [+] und [strg]+[-]. Aber auch andere Elemente sollten skalierbar sein, wie z.B. die Menüs. Daher wird empfohlen relative Größenangaben (% oder em) statt fixer Angaben (px, pt, cm, mm...) zu benutzen.
Positionierung von Elementen
Für die Positionierung von Elementen auf Webseiten gibt es zwei grundlegende Techniken. Einerseits die Positionierung über Tabellen. Damit ist auf jeden Fall eine sehr sichere Struktur der Seite gewährleistet. Allerdings ist diese Technik sehr barrierelastig, denn die meisten Screenreader verstehen die Tabellen nicht. Auch die Tastaturnavigation kann erschwert sein. Andererseits gibt es die Möglichkeit Elemente nur über CSS zu positionieren. Dies eröffnet die gleichen und sogar noch mehr Möglichkeiten als das Tabellendesign. Einziger Nachteil: es ist nicht ganz so einfach wie das Tabellendesign. Die zweite Technik ist die heute favorisierte Variante. Leider gibt es immer noch viele ältere Seiten im Netz bei denen Tabellendesign vorherrscht. Noch schlimmer im Sinne der Barrierefreiheit ist der Einsatz von Frames! Die meisten CMS setzten auf die Positionierung ohne Tabellen.
Farbgebung
Je nach Farbgebung auf der Seite kann es für manche Menschen schlecht zu erkennen sein was dort gezeigt wird. Ein Beispiel ist die Rot-Grün-Schwäche. Aber auch ähnliche Farben sorgen für Verwirrung. Es muss aber niemand zur Aufgabe seines geliebten Designs gezwungen werden. Die Erstellung eines Hochkontrastdesigns kann Abhilfe schaffen. Dabei sollten schwarz, blau, gelb und weiß eingesetzt werden. Natürlich muss dem Besucher die Kontrolle über die Wahl des Designs gegeben werden. Anleitungen oder Plug-ins zum Stichwort "Style-switcher" gibt es genug.
Bilder
Bei Bildern muss nach den Maßstäben von gutem Webdesign ein Alternativtext mitgegeben werden, der das zu Sehende umschreibt. Diese Information ist besonders für Sehbehindert wichtig. Ein Text wie "Image0558" ist dafür nicht nützlich. Ebenso verwirrend sind Alt-Attribute bei Bildern die ausschließlich dem Design der Seite dienen. Dies kann entweder durch ein leere Eingabe dieses Attributes umgangen werden oder aber schöner durch Einbindung des Bildes als background-image. Dann fällt das Attribut einfach weg.
Javascript
Zu Java und Javascript gibt es sehr unterschiedliche Meinungen. Manche Menschen wollen oder können diese Technik nicht nutzen. Daher sollte immer(!) eine Alternative, die ohne Javascript auskommt, zur Verfügung stehen. Diese wird dann bei deaktiviertem Javascript angezeigt. Grundsätzlich ist gutes Webdesign auch ohne Javascript möglich. Zu Problemen bei Formularen: in dem Abschnitt Formulare.
Flash und Ähnliches
Eine Benutzung von Techniken, die eine spezielle Browserfunktion oder gar Plug-in benötigen, sollten vermieden werden. Ein bekanntestes Beispiel ist Flash. Dies grenzt z.B. Nutzer aus, die keine Möglichkeit haben Flash zu nutzen, es nicht nutzen wollen, deren Hilfsmittel mit Flash nicht umgehen können oder schnelle Animationen nicht vernünftig erkennen können.
Formulare
Formulare sind eine weitere Falle auf Webseiten. Wichtig ist vor allem die Beschriftung aller Elemente mit dem label-Tag! Nur so kann sichergestellt werden, dass jeder Benutzer und jede Benutzerin erkennt worum es sich bei dem Element handelt. Auch eine eindeutige Kennzeichnung von Pflichtfeldern mit einem * erleichtert die Formularerfassung. Ein Punkt an den selten gedacht wird: Formulare werden meistens mit dem Event-Handler "onClick" abgesendet. Dies ist aber ein geräteabhängiger Event-Handler er setzt eine Maus beim Besucher voraus!!! Das Gegenstück dazu ist: "onKeyPress". Alternativ kann mensch auch den Event-Handler "onFocus" verwenden, denn dieser reagiert auf Tastatur- und Mausbenutzung, hat aber bei Tastaturnutzung den Nachteil, dass dieser bereits beim markieren des Absende-Buttons auslöst und nicht erst beim Drücken (über Leertaste/Enter).
Abkürzungen
Abkürzungen werden oft genutzt und beim Lesen vom Menschen automatisch sinnvoll ausgeweitet (sofern die Bedeutung bekannt ist). Eine Maschine kann dies aber nicht. Ein Screenreader würde aus "GJ" vorlesen: G J . Das hört sich maschinell sehr abgehackt an. Deshalb gibt es die tollen Erweiterungen mit abbr und acronym-Attribut. Am Beispiel von GJ:
< abbr title="Grüne Jugend" >GJ< /abbr > < acronym title="Grüne Jugend" >GJ< /acronym > Natürlich ohne Leerzeichen ;) So wird eine korrekte Sprachausgabe ermöglicht.
Gendern
Viele in der GRÜNEN JUGEND üblichen Varianten der geschlechtergerechten Sprache klingen beim Vorlesen durch einen Screenreader seltsam und unverständlich oder sind nicht zu erkennen. Davon betroffen sind zum Beispiel das Binnen-I, der Unterstrich oder das * im Wort. Es ist daher ratsam möglichst geschlechtsneutrale Formen (Studierende) zu benutzen oder sowohl die weibliche als auch männliche Bezeichnung (Bürgerinnen und Bürger) zu nennen.
Fremdwörter
Fremdwörter können zum Problem werden, wenn sie nicht als solche erkannt werden. Dann werden sie deutsch ausgesprochen. Oft ist der Sinn dann nicht mehr erkennbar. Die meisten Menschen erkennen Fremdwörter beim Lesen des Textes. Maschinen (wie Webreader) allerdings nicht. So hört sich dann ein beispielhaftes Ergebnis an: http://translate.google.ca/?hl=en&tab=wT#de|de|Search-Engine-Optimization Wie lässt sich das umgehen? Fremdwörter vermeiden wo es geht! Eine andere Möglichkeit bietet HTML mit dem :lang-Attribut. Ein Beispiel: < p>Die Grüne Jugend setzt sich für < span lang="en">Accessibility</span > in allen Bereichen ein.</p > Allerdings erkennen nicht alle Webreader dieses Attribut!
Tastaturnavigation
So gut wie alle Browser ermöglichen die Tastaturnavigation. Bevorzugt über die Tabulator-Taste. Dabei werden alle Elemente in der Reihenfolge angesprochen in der sie im Quelltext notiert sind. Manchmal ist diese Reihenfolge aber nicht sinnvoll. Für eine sinnvolle Anordnung gibt es das tabindex-Attribut. Damit kann mensch die Links ganz einfach durchnummerieren. Beispiel: [a href="link.htm" tabindex="1"]
Access-Keys
Eine weitere Option ist der Einsatz von Access-Keys. Auch dafür gibt es ein Attribut das logischweise "accesskey" heißt. Damit können Buchstaben(A-Z) oder Zahlen (0-9) vergeben werden. Beispiel: <a accesskey="c" href="seitenname.de"> Dieser Link kann dann mit Alt+C angewählt werden. Um dem Besucher einen Überblick über die möglichen Access Keys zu schaffen, gibt es das AccesskeyPad(zu sehen hier: http://2bweb.de/accesskey/) oder aber entsprechende Erweiterungen für CMS. Da ich mich hauptsächlich mit Joomla beschäftige kenne ich auch nur da die Variante mit der Komponente: Access Keys. Im Einsatz zu sehen auf http://www.time4joomla.de Dort einfach mal die [Alt]-Taste drücken
Webreader
Die meisten Besucher oder Besucherinnen mit Seheinschränkungen haben einen Screenreader bei sich installiert. Aber es kann vorkommen, dass sie sich nicht an ihrem Computer befinden und trotzdem etwas verstehen möchten. Eine schöne Möglichkeit ist das Angebot eines Webreaders, der die Beiträge maschinell vorliest. Beispielsweise dieser: http://webreader.readspeaker.com/ im Einsatz auf http://www.time4joomla.de
Testmöglichkeiten
Wie finde ich heraus was ich verbessern kann? Eine Möglichkeit findet sich hier: http://www.barrierekompass.de/check.php . Oder willst du selbst testen? Dann empfiehlt sich die Web Developer Toolbar für Firefox. Damit kann Javascript gezielt deaktiviert werden, Inline-Elemente deaktiviert werden, Anker, Accesskeys etc angezeigt werden, Formularfelder auf Beschriftung überprüft werden und Bilder auf ihre alt-Attribute getestet werden. Und vieles mehr. Die Validatoren wurden oben bereits erwähnt.
Barrierefreie Publikationen. Ein Leitfaden zur Umsetzung:
Bei Publikationen außerhalb des Internets gibt es ebenfalls Zugänglichkeitsbarrieren. Barrierefreie Publikationen sind solche in Leichter Sprache sowie in einer Hörfassung (DAISY-Format) oder in Brailleschrift.
DAISY-Formate
DAISY ist der Name eines weltweiten Standards für navigierbare, zugängliche Multimedia-Dokumente. Die Abkürzung DAISY steht für Digital Accessible Information System.
Brailleschrift
Die Schrift verwendet Punktmuster, die von hinten in das Papier gepresst werden, so dass sie als Erhöhung mit den Fingerspitzen abgegriffen werden können.
Die besten Ansprechpartner sind die jeweiligen Organisationen für blinde Menschen auf der jeweiligen Bundesland-Ebene.
Ein Anbieter für das Drucken von Texten in Braille ist z.B.
