Textlastige Seiten gelten allgemein als barrierefrei. Doch es gibt einige Möglichkeiten, Texte für Menschen mit unterschiedlichen Behinderungen zugänglicher zu machen. Im folgenden möchten wir uns vor allem mit der technischen Strukturierung von Texten beschäftigen. Verständlichkeit und Textgestaltung (Typographie) sind ebenfalls wichtige Themen, sollen hier aber nicht behandelt werden.
Blinde benötigen Zwischenüberschriften und Absätze, um Textabschnitte wenn nötig überspringen zu können. Außerdem gibt es im Screenreader verschiedene Möglichkeiten, Texte zu überfliegen: Blinde können sich zum Beispiel alle Überschriften oder Links einer Seite anzeigen lassen.
Alle aktuellen Browser bieten die Möglichkeit, eigene Stylesheets anzulegen, um etwa die Lesbarkeit von Texten zu verbessern. Stylesheets erlauben es, die Größe von Text, den Textfluss und andere Faktoren der Lesbarkeit anzupassen. Das kann zum Beispiel Sehbehinderten helfen, aber auch Menschen mit Leseschwäche, die Probleme mit dem Blocksatz oder mit bestimmten Schriftfamilien haben können.
Sie funktionieren am besten, wenn für die Struktur der Seite semantisch korrektes HTML eingesetzt wird. HTML hat einen ganzen Satz von Tags, die ihren Inhalt beschreiben: zum Beispiel h1 bis h6 für Überschriften, ul für nichtnummerierte Listen oder blockquote für Zitate. Diese Tags werden von Screenreadern ausgewertet, um Blinden Informationen über das aktuelle Element weiterzugeben.
Weiterlesen …
Auszeichnungssprachen versus WYSIWYG
Jedes aktuelle Redaktionssystem hat zumindest rudimentäre Möglichkeiten zur Textformatierung. Puristen arbeiten mit einfachem HTML, was einige Vorteile mit sich bringt. Beliebter sind jedoch die What-You-See-is-what-you-get oder kurz WYSIWYG-Editoren. In WordPress ist zum Beispiel der TinyMCE integriert, der an gängige Textverarbeitungen erinnert.
Abb.: TinyMCE in der erweiterten Ansicht
Weniger stark verbreitet sind Mischformen von WYSIWYG und Auszeichnungssprachen. Eine der bekannteren Formen der Textformatierung ist die Wiki-Syntax, wie sie in MediaWiki eingesetzt wird. Wiki- oder Rich-Text-Editoren bieten an, die Formatierung über Schaltflächen vorzunehmen, blenden jedoch die Formatierungsanweisungen im Text ein. Puristen können die Anweisungen direkt über die Tastatur eingeben, visuell orientierte Menschen können die Formatierung über die Schaltflächen vornehmen.
Viele Autoren stören sich daran, wenn die Formatierungsanweisungen im Text sichtbar sind. Es bringt jedoch auch einige Vorteile mit sich:
- Zum einen können so auch Blinde den Text formatieren. TinyMCE ist zwar prinzipiell mit Tastatur bedienbar, die Bedienung ist aber nicht sehr komfortabel.
- Zum anderen hat man mehr Kontrolle über die Formatierung. Bei WordPress kommt es recht häufig zu seltsamen Umbrüchen, Formatierungs- und Darstellungsproblemen, die man mühsam nachbearbeiten muss. Das passiert vor allem, wenn Texte aus der Textverarbeitung in den WYSIWYG-Editor hineinkopiert werden.
Die Redakteure lernen durch die Formatierungsanweisungen, dass die Textstrukturierung im Web anders als in der Textverarbeitung funktioniert. Ein Nachteil besteht darin, dass die verwendete Auszeichnungssprache gelernt werden muss.
Strukturierung statt Aufhübschung
Ein sehr häufiger Fehler bei der Formatierung von Texten ist der Einsatz von nichtsemantischem HTML oder CSS. Man kann zum Beispiel eine Überschrift mit HTML als Überschrift kenntlich machen. Man kann aber auch ein DIV-Element verwenden und das ein wenig fetter und größer gestalten.
Das ist übrigens die Regel, nicht die Ausnahme. Die meisten Tageszeitungen verfahren so. Fast immer ist die eigentliche Artikelüberschrift als Überschrift gekennzeichnet, die Zwischenüberschriften hingegen nicht. Auch TinyMCE bietet in der WordPress-Standardkonfiguration keine Formatierungen für Zwischenüberschriften an. Hinzu kommt, dass Redakteure keinen Einfluss darauf haben, wie ihre Formatierungen im Redaktionssystem verarbeitet werden, schließlich soll das Layout einheitlich sein. Die Verarbeitungsregeln müssen im Redaktionssystem festgelegt werden.
Es kommt auch sehr häufig vor, dass Listen nicht korrekt formatiert werden. Die meisten Leute verfahren wie in der Textverarbeitung, schreiben einen Bindestrich, ihren Text und drücken dann auf Return. Die Textverarbeitung bietet in der Standardeinstellung per AutoFormat eine Auflistung an. Im Web klappt das aber nicht. Eine Einrückung wird dann über Leerzeichen, Tabulator oder ein Zitateelement umgesetzt, was sehr unprofessionell aussieht.
Ein häufiger Fehler, der nur bei WYSIWYG-Editoren auftreten kann ist die falsche Formatierung von Listen. Eine Liste mit drei Listenpunkten wird zu drei Listen mit jeweils einem Listenpunkt. Das geschieht, wenn jeder Punkt einzeln als Liste formatiert wird, anstatt die gesamte Liste einmal zu formatieren. Rein optisch fällt dieser Fehler allerdings in der Regel nicht auf, stört aber den blinden Screenreadernutzer.
Grenzen der Formatierung
Wesentlich mehr Formatierungsoptionen bieten die meisten Redaktionssysteme nicht an. Abkürzungen und Kennzeichnung von Sprachwechseln gehören nicht zum Standardumfang von WYSIWYG-Editoren. Einfache Tabellen lassen sich vielleicht noch einfügen, aber schon bei komplexeren Formatierungen dürfte Schluss sein, weil sie von den Redaktionssystemen nicht unterstützt werden. Ob HTML oder Wiki-Syntax, fast alle Redaktionssysteme filtern aus Sicherheitsgründen Formatierungsanweisungen heraus, die sie nicht kennen. Den Texteditor um solche Funktionen zu ergänzen ist allerdings keine technisch aufwendige Aufgabe.
Mehr Verständnis
Es gibt also kurz zusammengefasst zwei Kernprobleme bei der Strukturierung von Texten:
- Die Programmierer von Redaktionssystemen setzen nur Standardanforderungen um oder arbeiten gar mit Layout statt Struktur, setzen also CSS statt HTML ein. Sie setzen nur die grafischen Anforderungen um, weil sie sich selbst nicht um die Formatierung von Texten kümmern müssen.
- Die Redakteure ihrerseits sind mit den Grundlagen der Strukturierung von Texten im Web nicht vertraut. Entweder kommen sie aus dem Printbereich, wo andere für das Layout zuständig sind. Oder sie sind gelernte Online-Redakteure, in deren Kursen HTML und CSS stiefmütterlich behandelt wird. In der Regel wissen sie auch nicht, was unter semantischem HTML zu verstehen ist und können entsprechend auch ihre Anforderungen an das Redaktionssystem nicht sauber formulieren.
Die Anforderungen an strukturierte Texte müssen also schon im Redaktionssystem umgesetzt werden. Die Redakteure ihrerseits müssen dazu angehalten und geschult werden, Texte korrekt zu strukturieren.
Unter dem Titel »Barrierefreiheit im Web – den Kunden im Blick« kann beim Beratungs- und Informationszentrum elektronischer Geschäftsverkehr Hessen (BIEG) ein Leitfaden zur Barrierefreiheit heruntergeladen werden, der sich speziell an kleine und mittelständische Unternehmen richtet. Der Leitfaden erläutert Grundlagen und Vorteile barrierefreier Websites und Shops und entstand in Kooperation von BIEG Hessen mit der Autorin Kerstin Probiesch. Thematisiert werden unter anderem der Zusammenhang von Suchmaschinenoptimierung und Barrierefreiheit, spezielle Aspekte wie Tastaturbedienbarkeit und einige Richtlinien der WCAG 2.0. Der Leitfaden steht als barrierefreies PDF und als HTML zur Verfügung.
Zum Leitfaden »Barrierefreiheit im Web – den Kunden im Blick«
Fast alle aktuellen Browser verfügen über die Möglichkeit, JavaScript, Flash oder Werbung zu blockieren. Menschen mit Behinderung haben manchmal keine andere Wahl, als solche Funktionen einzusetzen, um eine Website überhaupt nutzen zu können.
Weiterlesen …
Das große Chaos
Dieser Beitrag erschien ursprünglich im Weblog von Domingos de Oliveira und wurde für Einfach für Alle überarbeitet.
Weiterführendes
Hinweise zum barrierefreien Einsatz von Werbung finden Sie in den
Werbung wird überwiegend in den folgenden Formaten eingesetzt:
- als Textanzeigen
- als Banner
- als Layer
- als Popup
Textanzeigen sind die am wenigsten störenden Elemente. Sie bereiten vor allem Blinden Schwierigkeiten, wenn sie mitten im Fließtext platziert werden: sie stören den Lesefluss und lenken vom Inhalt ab. Ihr Vorteil besteht darin, dass sie überhaupt von Blinden wahrgenommen werden können, was auf die meisten anderen Werbeformen im Internet nicht zutrifft.
Vor allem animierte Banner sind nicht nur für Menschen mit Behinderung störend. Die permanente Änderung lenkt die Augen unwillkürlich vom Text ab und stört die Konzentration.
Ein großes Problem sind Layer Ads, das sind Elemente, die sich über den eigentlichen Inhalt der Webseite legen. Viele Menschen erkennen nicht, wie sich diese Fenster ausblenden lassen. Sehbehinderte benutzen häufig die Vergrößerungsfunktionen des Browsers. Dadurch rücken die Mechanismen zum Ausblenden des Layers aus dem sichtbaren Bereich des Browsers. Für die Nutzer von Bildschirmvergrößerungssoftware sind tatsächlich alle nicht zum eigentlichen Inhalt der Seite gehörenden Elemente störend.
Popups sind hingegen ein eher geringes Problem, sie werden zumeist unbeachtet im Hintergrund des Browsers geöffnet und am Ende des Besuches unbeachtet geschlossen.
Der verlorene Focus
Für viele nichtbehinderte Menschen ist Werbung ein Ärgernis, mit dem sie aber noch zurecht kommen. Für Tastaturnutzer stellen sie aber große Probleme dar. Wer via Tastatur von Element zu Element tabbt, für den wirkt jedes zusätzliche Hindernis störend. Vor allem animierte Werbung bildet häufig eine Tastatursackgasse, dass heißt, der Tastaturfokus bleibt hängen und die unter dem Werbeblock liegenden Elemente können nicht erreicht werden.
Bei vielen Websites findet sich der erste Werbeblock bereits oberhalb der Navigation. Der zweite Block – meistens eine GIF- oder Flash-Animation ist mitten im Text. Der dritte Block ist dann zwischen dem Ende des Artikels und den Kommentaren oder was dem Artikel auch immer folgt. Weitere Werbung ist dann auf dem Rest der Seite bunt gestreut. Für die Tastaturnutzer bedeutet das, dass sie diese Hindernisse irgendwie umschiffen müssen, wenn sie die Funktionen der Seite nutzen möchten.
Blinde werden vor allem im Lesefluss gestört. Es tauchen mitten in einen Artikel wildfremde Elemente auf, die den Leser verwirren und ihn seiner Konzentration berauben. Schwierig sind zum Beispiel Animationen oder Grafiken ohne Alternativtext. Der Screenreader liest häufig den Dateinamen der Grafik oder den Link des Frames vor, zumeist eine ellenlange kryptische Zeichenkette. Der oft eingesetzte Alternativtext »Hier klicken« ist auch nicht sehr hilfreich. Schließlich könnte es sich bei dieser Grafik um ein inhaltliches Bild handeln, bei dem der Redakteur vergessen hat, einen Alternativtext zu vergeben.
Für Menschen mit kognitiver Behinderung sind starke Reize oft unangenehm. Dazu gehören etwa grelle Farben oder blinkende Animationen.
Die Botschaft kommt nicht an
In der Regel werden Werbeblöcke über Frames eingebunden, so dass die Seitenbetreiber keinen Einfluss auf deren Ausgestaltung haben. Es fehlen Alternativtexte oder überhaupt lesbare Texte , so dass Blinde und Sehbehinderte gar nicht erkennen, wofür eigentlich geworben wird.
Auch für die Betroffenen ist es durchaus verständlich, dass die Inhalteanbieter ihre Angebote finanzieren müssen. Sie sehen sich dennoch häufig gezwungen, Werbung zu blockieren, um die betreffenden Webseiten einigermaßen komfortabel bedien zu können.
Streng genommen kann eine Seite nicht als barrierefrei gelten, wenn die Werbung nicht barrierefrei ist. Es liegt also im Interesse des Webseitenbetreibers, entsprechende Anforderungen an die Werbeanbieter zu stellen. Hier einige Tipps, wie Sie Werbung barrierefreier machen können:
- Geben Sie der Werbung einen Alternativ- und Titeltext.
- Animationen sollten nach zwei bis drei Abläufen automatisch stoppen. Wer sie die ersten zehn Sekunden nicht beachtet hat, wird dies auch für die restliche Zeit nicht tun.
- Bieten Sie Möglichkeiten, Animationen per Maus und Tastatur zu stoppen.
- Platzieren Sie keine Werbeblöcke in die Artikel.
- Verzichten Sie auf Layer Ads. Wenn Sie Layer Ads einsetzen, sorgen sie für einfache Mechanismen, um diese per Maus und Tastatur auszublenden.
- Auch für Blinde muss immer erkennbar sein, dass es sich um Werbung handelt. Dazu muss ein deutlicher Hinweis in Textform, etwa »Werbung« oder »Anzeige« dem entsprechenden Element vorangestellt sein. Die eindeutige Kennzeichnung von Werbung ist unabhängig von der Barrierefreiheit in § 6 Telemediengesetz vorgeschrieben.
Funktionale Grafiken sind Grafiken, mit denen eine Funktion verbunden ist. Sie werden auf praktisch allen Webseiten eingesetzt, bekannt sind zum Beispiel das Drucker-, das Brief- oder RSS-Symbol, deren Funktion mehr oder weniger intuitiv erkennbar ist. Sie werden aber auch in komplexen Webanwendungen wie Google Text und Tabellen verwendet.
Die Symbole sind äußerst eingängig, weil wir sie teilweise schon aus anderen Kontexten kennen: den Desktop-Anwendungen, wo sie von Normal-Sehenden und Maus-Nutzern ausgiebig verwendet werden. Abgesehen von Blinden und stark sehbehinderten Menschen kommen diese Grafiken praktisch allen Menschen zugute, wenn sie gut gewählt und eingängig sind.
Weiterlesen …
Sie machen aus einer komplexen Interaktion mit der Website einen einfachen und intuitiven Prozess. Für Menschen mit Lernbehinderungen erleichtern sie ungemein die Bedienung der Seite.
Alternativer YouTube-Player
Christian Heilmanns alternativer YouTube-Player erleichtert die Bedienung durch große und leicht erkennbare Bedienelemente.
Wahl der Grafiken
Um eine Grafik verwenden zu können, sollte sie hinreichend bekannt sein. Webdesigner mögen viel Energie in eine hübschere Metapher zum Einkaufskorb investieren. Das bringt aber nur etwas, wenn die Funktion »Ware in eine Zwischenablage speichern, um sie beim Abschließen des Bestellvorgangs mit weiteren Waren zu bestellen« dem Nutzer deutlich wird. Diese ausschweifende Funktionsbeschreibung macht den Sinn dieser simplen Metapher vom Warenkorb deutlich. Statt langatmige Erklärungen abzugeben, versteht jeder Mensch mit ein wenig Erfahrung im Internet-Einkauf, was der Erschaffer der Seiten mit dem Warenkorb-Symbol mitteilen möchte.
Das gilt natürlich nur für Funktionen, die hinreichend etabliert sind. Nehmen wir an, wir entwickeln eine vollkommen neue Funktion, wenn wir etwa eine neue Webanwendung etablieren. Dann können bzw. müssen wir uns eine eigene Symbolsprache ausdenken, sofern keine Vorbilder vorhanden sind. In diesem Falle kommen wir kaum daran vorbei, dem Nutzer einen Lernprozess zu unterwerfen, indem er bei der Nutzung der Anwendung nach und nach auch die Funktionen der Symbole kennenlernt und die verwendete Bildsprache versteht. Dennoch kann der Lernaufwand möglichst gering gehalten werden, indem eingängige Symbole eingesetzt werden. Für die Erstellung solcher Funktionsgrafiken sollten entsprechend Experten beauftragt werden. Auch Tests zur Verständlichkeit mit echten Nutzern sind empfehlenswert.
Die Größe der Funktionsgrafiken
Jede Grafik muss so groß sein, dass sie mit der Maus gut anzuklicken ist. Die Grafiken müssen einen gewissen Abstand zueinander haben und sie sollten bei normaler Auflösung auf einem mittelgroßen Bildschirm gut zu erkennen und gut anzuklicken sein. Wichtig ist auch, dass die Grafiken per Tastatur angesteuert und aktiviert werden können. Sowohl für Maus- als auch für Tastaturnutzer muss erkennbar sein, welches Element sie gerade fokussiert haben, etwa über einen Rahmen oder eine Farbänderung.
Für Menschen mit motorischen Einschränkungen, die mit einer Maus oder einem speziellen Eingabegerät arbeiten, sind zu kleine Klickflächen und zu eng beieinander stehende Elemente schwierig zu treffen. Das gilt auch für die Nutzer von mobilen Endgeräten wie Netbooks, Tablet-PCs oder gar Smartphones.
Auszeichnung
Blinde benötigen einen Alternativtext, alle anderen Nutzer brauchen den title, um bei Verwendung der Maus zu erfahren, welche Funktion sich hinter der Grafik verbirgt. Ein Briefsymbol könnte eine Kommentarfunktion, eine Leserbrief-Funktion oder ein E-Mail-Formular sein. Für Funktionstexte gilt immer das Gleiche: möglichst kurz, möglichst prägnant, möglichst eindeutig. Es kommt gar nicht so selten vor, dass der Beschreibungstext die Grafik und nicht ihre Funktion beschreibt, zum Beispiel »Pfeil nach links« statt »zurück«: Das Druckersymbol bekommt also den Alternativtext und Titel »Drucken«, das RSS-Feedsymbol wird mit »Feed abonnieren« hinreichend beschrieben.
Grafische CAPTCHAs
Auch CAPTCHAs sind funktionale Grafiken. Ihr Einsatz ist eher kritisch zu sehen. Zwar stellen viele Systeme wie ReCaptcha alternative Audiodateien zur Verfügung, diese sind aber schwer zu verstehen, zumal sie auch nur auf Englisch angeboten werden. Viele Alternativ-Mechanismen funktionieren auch gar nicht, wenn die Nutzer Flash oder JavaScript blockieren. Für Hör-Sehbehinderte sind weder graphische noch auditive Lösungen verwendbar. Wir raten daher generell von der Nutzung von graphischen CAPTCHAs ab. Sie sollten durch nichtgrafische Alternativen wie Rechenaufgaben und einen leistungsfähigen Spamschutz ersetzt werden. Nebenbei bemerkt haben mittlerweile einige Programme eine bessere Erkennungsrate als Menschen.
Fazit
Der bedachte Einsatz von Bildern und Grafiken kann für viele Menschen mit und ohne Behinderung die Nutzung einer Webseite erleichtern. Wie wir gesehen haben, ist das eine Querschnittsaufgabe. Für Platzhalter-, Dekorations- und Funktionsgrafiken sind vor allem Webdesigner und Frontend-Entwickler gefragt. Für inhaltliche Bilder müssen die Redakteure Alternativtexte und Titel vergeben, wofür eine Funktion im Redaktionssystem vorhanden sein muss. Das Regelwerk sieht zwar sehr umfangreich aus, wenn man aber einmal identifiziert hat, um welchen Grafiktyp es sich handelt, ist auch leicht zu entscheiden, wie Alternativtext, Titel und Bildunterschrift aussehen sollten.
Inhaltliche Bilder ergänzen den Inhalt einer Website: Das Foto in einem journalistischen Artikel, das Diagramm der Umfrage-Statistik, das Organigramm der Firma. Ihr Einsatz ist sinnvoll, weil ein Bild die Aussage eines Textes unterstreichen kann und zu viel Text die Leser häufig abschreckt. Infografiken, wie sie im Datenjournalismus eingesetzt werden, können komplexe Sachverhalte und Zusammenhänge anschaulich vermitteln und sind daher eine gute Ergänzung zum klassischen Journalismus.
Weiterlesen …
Bilder in journalistischen und informativen Texten
Bei journalistischen Texten haben die Bilder eine begleitende Funktion. Sie unterstreichen den Inhalt des Textes, der Text bleibt aber auch verständlich, wenn das Bild aus irgendeinem Grund nicht angezeigt wird.
Hier reicht es aus, den Namen der abgebildeten Person, des Ortes oder Gegenstandes zu nennen. Genauer beschreiben sollte man das Bildobjekt nur, wenn es zum Verständnis des Textes beiträgt. Längere Beschreibungen kann man im Bild-Untertitel unterbringen: »Angela Merkel kritisiert die Opposition« ist für Alternativtext oder Bildunterschrift vollkommen ausreichend. Es ist richtig, dass Bilder auch Emotionen oder Stimmungen vermitteln sollen. Allerdings wird dieser Zweck bereits mit dem eigentlichen Fließtext verfolgt. Wenn die Stimmung von Text und Bild nicht übereinstimmt, sollte die Bildauswahl überdacht werden.
Wenn Sie ein abgebildetes Gemälde oder Kunstwerk beschreiben wollen, sollten Sie das ebenfalls im Fließtext tun. Davon profitieren alle Besucher der Website, zumal bei der im Web üblichen Auflösung für Bilder Details nicht gut zu erkennen sind.
Eine besondere Form journalistischer Produkte sind Bilderstrecken oder Fotoreportagen. Die meisten Blinden werden sich wohl nicht mit Bilderstrecken beschäftigen. Dennoch sollten auch diese Bilder Alternativ- und Titeltexte erhalten. Wir empfehlen außerdem, in einem Begleittext den Inhalt der Bilder zu beschreiben. Sehbehinderte erkennen den Inhalt eines Bildes oft erst, wenn sie wissen, was darauf zu sehen ist.
Informationsgrafiken
Informationsgrafiken erleichtern die Aufnahme von Informationen. Welche Aspekte bei ihrer Erstellung zu beachten sind, wollen wir anhand von Diagrammen anschaulich machen.
Für Diagramme ist entscheidend, dass alle Bestandteile deutlich zu erkennen sind, das gilt auch für die Begleittexte, die zumeist auch als Pixelgrafik eingebunden werden. Bei den Wahlergebnissen stehen die Parteinamen und Prozentangaben oft im Tortendiagramm. Das ist suboptimal, da die Tortenstücke meist in den Parteifarben gestaltet sind und oft zu geringen Kontrast bieten. Wenn Farbe als einziges Unterscheidungsmerkmal verwendet wird, können Farbfehlsichtige einzelne Diagramm-Bestandteile nicht mehr unterscheiden.
Das gilt auch für Legenden-Texte. Wenn Farbe als einziges Erkennungsmerkmal eingesetzt wird, können Farbfehlsichtige den Bezug zwischen Element und erklärender Legende nicht herstellen. Hier gibt es grundsätzlich zwei Lösungswege:
- Es gibt außer der Farbe ein weiteres Erkennungselement, zum Beispiel ein bestimmtes Muster.
- Element und Beschreibung werden unmittelbar miteinander verbunden, wobei die Beschreibung nicht in das Element eingebettet wird, um die Lesbarkeit zu erleichtern.
Wie kommen die Besucher zu Einfach für Alle
Durch die Farbverläufe sind die Bestandteile des Diagramms auch für Farbfehlsichtige zu erkennen.
Alternativ können die Tortenstücke auch einen kleinen Abstand zueinander haben.
Wie kommen die Besucher zu Einfach für Alle
Durch den kleinen Abstand werden die Tortenstücke leichter unterscheidbar
In jedem Fall sollten die im Diagramm dargestellten Ergebnisse auch als normale HTML-Tabelle angeboten werden, damit auch Blinde die Ergebnisse erkennen können. In keinem Fall ist es sinnvoll, die Ergebnisse im Alternativ-- oder Titeltext unterzubringen, weil das unübersichtlich ist. In unserem Fall ist ein Alternativtext wie »Herkunft der Besucher von Einfach für Alle« als Tortendiagramm« ausreichend.
Herkunft der Besucher von Einfach für Alle| Direkteingabe / nicht verfügbar | 27.753 | 42,35 % |
|---|
| Suchmaschinen | 24.024 | 36,66 % |
|---|
| Andere Sites | 13.753 | 20,99 % |
|---|
Weitere Umsetzungsbeispiele für Informationsgrafiken finden Sie in der Linkliste.
Emoticons
Emoticons werden in ihrer Bedeutung unterschätzt. Früher wurden sie über spezielle Zeichenfolgen generiert (;-) und ähnliches), heute geht man dazu über, entweder graphische Emoticons zur Einbindung in den Text anzubieten oder sie automatisch aus den Zeichenfolgen zu generieren. Einige aktuelle Screenreader erkennen die wichtigsten Zeichenketten und lesen sie zum Beispiel als »Smiley« vor. Mit den Grafiken geht das nicht, meistens haben die graphischen Emoticons auch keinen Alternativtext. Das kann durchaus problematisch sein, denn mit solchen Emoticons kann Ironie ausgedrückt werden, wer dies aber nicht erkennen kann, versteht auch nicht, dass jemand etwas ironisch gemeint hat, was zu einer endlosen Kette von Missverständnissen führen kann. Wünschenswert sind also alt-Texte für graphische Emoticons. Wenn man sie nicht all zu exzessiv einsetzt, können sie Menschen mit unterschiedlichen Behinderungen durchaus helfen, einen Text besser zu verstehen. Eine solche Funktion muss allerdings im Redaktionssystem angelegt sein, da Redakteure und Nutzer normalerweise keinen Einfluss auf die Ausgestaltung dieser Grafiken haben.
Grafiken in Gebrauchstexten
Bei Anleitungen zur Behebung von Software-Problemen oder Ähnlichem werden häufig Screenshots verwendet. Die erklärenden Texte dazu sind eher sparsam. Was der Sehende auf den ersten Blick erfasst – den Unterschied zwischen zwei Screenshots – muss der Sehbehinderte erst einmal mühsam erfassen und der Blinde hat dazu gar keine Chance. Vor allem für Sehbehinderte und Blinde ist eine exakte Beschreibung sinnvoll: Welches Menü oder welcher Dialog wird aufgerufen, welcher Karteireiter wird ausgewählt, welche Option soll aktiviert oder deaktiviert werden? Die Vorgänge sollten so detailliert beschrieben werden, dass die Aktion auch ohne den Screenshot nachvollzogen werden kann.
Alternativtexte und Bildunterschriften
Grundsätzlich sollte ein Alternativtext kurz sein. Er unterbricht meistens den Lesefluss und ist oft nicht so wichtig zum Verständnis des Textes. Längere Beschreibungen sollten in die Bildunterschrift, wo sie allen zugute kommen. Wie schon im ersten Teil erwähnt können für Alternativtext und Titel die gleichen Texte verwendet werden, die Bildunterschrift sollte sich hingegen von beiden unterscheiden.
Größe der Grafiken
Für Sehbehinderte ist es nützlich, wenn sie die Bilder vergrößern können. Zwar stellen die Browser einfache Vergrößerungsfunktionen bereit, aber wie schon im ersten Teil erwähnt verschlechtert sich die Qualität von Pixelgrafiken bei Vergrößerung. Eine Lösung besteht darin, das normale Bild mit einem Link zu einer größeren Version des Bildes zu unterlegen.
Die Erstellung und Einbindung inhaltlicher Bilder fällt in den Aufgabenbereich von Redakteuren. Sie sollten für diesen Bereich geschult und sensibilisiert werden. Auch Redaktionshandbücher und Leitfäden sollten um entsprechende Anleitungen ergänzt werden.
Bilder und Grafiken verbessern die Benutzbarkeit und Verständlichkeit von Webseiten und Anwendungen. Häufig wird nur an den blinden Nutzer gedacht, der mit Grafiken wenig anfangen kann. Doch es gibt einige Möglichkeiten, Grafiken für Blinde schmerzfrei einzusetzen, so dass sie allen Gruppen von Menschen mit Behinderung zugute kommen. Schließlich können auch für Blinde gedachte Alternativen den Inhalt für alle Nutzer aufwerten.
Im ersten Teil der Serie werden wir uns mit dekorativen Grafiken und Platzhaltern beschäftigen. Solche Grafiken sind vor allem für das Layout der Website wichtig. Im zweiten Teil wird es um inhaltliche Bilder gehen, sie ergänzen den Inhalt eines Textes oder vermitteln Informationen in einer nicht-textuellen Form. Um funktionale Grafiken wird es im letzten Teil gehen, sie spielen eine entscheidende Rolle bei Webanwendungen.
Im ersten Teil wollen wir uns zunächst mit den verschiedenen Einsatzarten von Grafiken und Beschreibungsmöglichkeiten beschäftigen, bevor wir auf den Einsatz von Platzhaltern und dekorativen Grafiken eingehen.
Weiterlesen …
Vektor- und Pixelgrafiken
Es lassen sich zwei Arten von Grafiken unterscheiden: Vektorgrafiken werden im Computer erzeugt. Schon die Buchstaben, die Sie hier lesen, sind Vektorgrafiken, aber auch alles, was sie mit Zeichenprogrammen wie Illustrator erzeugen können. Vektorgrafiken können ohne Qualitätsverlust vergrößert werden.
Bekannte Vektorformate sind Scalable Vektor Graphics (SVG) und Adobes Flash. Sie werden zum Beispiel für Kartenanwendungen wie Open Street Map eingesetzt. SVG und Flash werden sehr unterschiedlich von den Browsern unterstützt, sie werden daher selten für Schmuckelemente eingesetzt.
Daneben gibt es die Rastergrafiken, die z.B. über einen Scanner oder eine Digitalkamera in den Computer kommen. Rastergrafiken bestehen aus einzelnen Bildpunkten (Pixel). Die Qualität dieser Grafiken sinkt deutlich, wenn sie vergrößert werden.
Pixelgrafik-Formate sind zum Beispiel JPEG, PNG oder GIF. Sie werden praktisch für alle Grafikelemente auf einer Website eingesetzt: für Fotos, aber auch für Zierelemente, Logos und vieles mehr. Wenn Vektorgrafiken in einem Pixelformat gespeichert werden, haben sie die gleichen Vor- und Nachteile wie Pixelgrafiken. Sie werden von den Browsern anstandslos angezeigt, lassen sich aber kaum ohne Qualitätsverlust vergrößern. Das ist vor allem wichtig, wenn Texte in Grafiken eingebettet werden.
Für Blinde sind in Grafiken eingebettete Texte gar nicht wahrnehmbar, für Sehbehinderte mit Vergrößerungssoftware sind sie nur schlecht lesbar. Vor allem längere Texte sollten daher nicht direkt in die Grafik eingebettet, sondern über HTML eingebunden und via CSS positioniert werden.
Vier Arten von Grafiken
Im Internet lassen sich vier Arten von Grafiken nach ihrem Einsatzzweck unterscheiden:
- Platzhaltergrafiken
- dekorative Grafiken
- inhaltliche Bilder
- funktionale Grafiken
Im Folgenden werden wir durchgängig von Grafiken sprechen, wenn es sich um dekorative oder funktionale Elemente handelt und von Bildern, wenn Abbildungen von Menschen, Gegenständen oder ähnlichem gemeint sind.
Ausgezeichnete Grafiken
Alle Pixelgrafiken werden über das Image-Tag <img> eingebunden. Grundsätzlich gibt es drei Attribute, mit denen das Image-Tag beschrieben werden kann:
alt = kurzer Alternativtextlongdesc = Lange Beschreibungtitle = Titel / Tooltip
Alternativtexte gehören zum Standard und dienen vor allem blinden Screenreader-Nutzern. Der Titel erscheint, wenn man mit dem Maus-Cursor über ein Bild fährt. Die long description war ursprünglich dafür gedacht, längere Beschreibungen unterzubringen. Praktisch wurde sie kaum eingesetzt und ist in HTML5 zurzeit nicht mehr vorgesehen. Es gibt außerdem noch die Bildunterschrift, die aber als normaler Text unterhalb des Bildes untergebracht wird und für alle Nutzer ohne weiteres sichtbar ist.
Platzhaltergrafiken und dekorative Grafiken
Platzhalter- und Dekorationsgrafiken sind Teil des Layouts und fallen damit in den Aufgabenbereich des Frontend-Entwicklers. Ihr barrierefreier Einsatz muss also schon bei der Gestaltung der Website berücksichtigt werden.
Platzhaltergrafiken
Platzhaltergrafiken sind kleine unsichtbare Grafiken. Sie sind zumeist 1x1 Pixel groß und dienen zur Stabilisierung des Layouts. Sie wurden zum Beispiel bei Layout-Tabellen eingesetzt, um das Design stabil zu halten.
Wenn unsichtbare Grafiken eingesetzt werden, sollten sie ein leeres alt-Attribut erhalten, in diesem Fall werden sie von Screenreadern ignoriert.
<img src="spacer.gif" alt="">
Ohne alt-Attribut oder title wird der Dateiname vorgelesen, was in keinem Fall sinnvoll ist. Ein Alternativtext wie "Platzhalter" wird hingegen als störend empfunden. Idealerweise sollten Sie Platzhaltergrafiken jedoch vermeiden und die Formatierung den Style Sheets überlassen.
Dekorative Grafiken
Dekorative Grafiken dienen dazu, die Website optisch aufzuwerten. Sie sind in der Regel nicht anklickbar und es ist normalerweise keine Funktion hinterlegt. Sie befinden sich üblicherweise auf jeder Seite des Webauftritts und immer an der gleichen Position, das sind zum Beispiel Banner, Logo, Hintergrundbilder, Zierleisten und so weiter.
Diese Grafiken sind äußerst nützlich: sie sollten auf einen Blick verraten, auf wessen Webauftritt man sich gerade befindet, erhöhen den Wiederkennungswert ungemein und vermitteln deshalb Sicherheit und Orientierung – nützlich für Menschen mit Lernbehinderung oder ältere Menschen.
Logo und Banner sind gewöhnlich mit der Startseite verknüpft und sollten einen entsprechenden Alternativtext enthalten: »Logo Einfach für Alle – zur Startseite« zum Beispiel. Bei grafischen Links sollten Alternativtext und Titel verraten, wo die Links hinführen, eine Beschreibung der verlinkten Grafik ist selten sinnvoll.
Grafiken, die keine Funktion erfüllen, nicht zum Inhalt beitragen und nur der Dekoration dienen, sollten wie Platzhalter-Grafiken ein leeres alt-Attribut erhalten, damit sie Blinde nicht vom Inhalt ablenken.
Für Alternativtext und Titel lassen sich die gleichen Beschreibungen verwenden, der Screenreader liest nur eine der beiden Beschreibungen vor. Die Bildunterschrift – sofern vorhanden – sollte hingegen nicht die gleiche Information enthalten wie Alternativtext und title, weil sie sowohl von Mausnutzern als auch von Screenreadern doppelt wahrgenommen würde.
Was in den Alternativtext gehört oder nicht ist heiß umstritten. Manchen genügt die nüchterne Nennung von Personen- oder Ortsnamen, andere wollen die Stimmung transportiert haben. Wenn das Bild dekorativ ist, sollte es einen möglichst kurzen Alternativtext enthalten. Vor allem, wenn die Bilder in einen Text eingebettet sind, sollte man bedenken, dass lange Alternativtexte oder Bildunterschriften den Lesefluss des Blinden stören können.
Über CSS eingebundene Hintergrundgrafiken lassen sich nicht mit beschreibenden Attributen versehen und sind damit für den Blinden unsichtbar. Hier ist zu beachten, dass sehende Nutzer in der Lage sein müssen, Elemente auf der Website zu erkennen. Das kann schwierig werden, wenn das Hintergrundbild zu wenig Kontrast zu den Inhaltselementen bietet, etwa weil es mit Farbverläufen arbeitet. Achten Sie deshalb bei Hintergrundbildern darauf, dass alle anklickbaren Elemente, Formularbestandteile und Fließtexte sich gut vom Hintergrund unterscheiden lassen. Alle Farbkombinationen jenseits von Schwarz auf Weiß verschlechtern die Lesbarkeit. Der Besucher sollte außerdem auf Anhieb erkennen können, ob eine Grafik anklickbar ist – also eine Funktion hat oder nicht.
Es ist kein Widerspruch: Die Grundlagen für die Umsetzung mobiler Applikationen ähneln in vielen Punkten denen für barrierefreies Webdesign. Ein wichtiger Punkt in der Umsetzung barrierefreier Internetseiten ist die Geräteunabhängigkeit. Für die Praxis bedeutet das: Jeder Nutzer hat mit jedem beliebigen Endgerät wie Monitor, Screenreader oder dem Handy jederzeit Zugang zu Internetseiten.
Das W3C hat die Mobile Web Application Best Practices als sogenannte Proposed Recommendation veröffentlicht. Dieser Text stellt Methoden vor, die die steigende Vielfalt im Bereich der mobilen Endgeräte berücksichtigen. Auch mit Blick auf die Barrierefreiheit zeigt dieser Text: eine Geräte-unabhängige und an die Bedürfnisse der Nutzer angepasste Entwicklungsweise bringt nur Vorteile.
Im Bereich mobiles Web hat sich in letzter Zeit viel verändert. Das betrifft nicht nur Form und Größe der Displays, sondern auch die Art und Weise, wie Nutzer mit den Inhalten auf diesen Displays interagieren. So wird zum Beispiel die Meinung, dass blinde Nutzer für eine komplexe Interaktionen grundsätzlich ein taktiles Feedback benötigen, von genau dieser Zielgruppe widerlegt: Eine Vielzahl von blinden Nutzern kommt mit der glatten Glasoberfläche von iPad, iPhone & Co. hervorragend zurecht!
Weiterlesen …
Das funktioniert aber nur dann, wenn diese neuen Interaktions-Möglichkeiten angeboten werden. Und genau hierbei helfen die Informationen, die das W3C bereitstellt. Es zeigt: Neben der althergebrachten Fokus-basierten Interaktion – der Fokus springt von Element zu Element – und der Interaktion über Zeigegeräte müssen auch neuere Formen des Umgangs mit Inhalten und Funktionen berücksichtigt werden. Bei Touch-basierten Geräten neuerer Bauart wird der Nutzer sogar selbst zum Eingabegerät: Ohne Umwege über Tastatur oder Zeigegeräte kann er direkt mit den Objekten auf dem Bildschirm interagieren.
Für die sichere Auswahl- und Bedienweise müssen die Elemente auf dem Bildschirm allerdings eine ausreichende Größe und genügend Abstand zueinander haben (vgl. Fitts's law). Die Unsitte, grundlegende Informationen über ein Objekt in title-Attributen zu verstecken, die sich erst beim Überfahren mit der Maus enthüllen, gehört damit hoffentlich bald der Vergangenheit an.
Weitere wertvolle Tipps gibt es zum Wechselspiel zwischen möglichst hoher Performance der Seiten und der Zugänglichkeit der Inhalte. Gerade bei der mobilen Nutzung sollten wegen der hohen Latenzzeiten so wenig Dateien wie möglich für den Bau einer Seite benötigt werden. Als Technik hierfür bietet sich das sogenannte Spriting an. Hier werden mehrere Bilder zusammengefasst, die dann ausschnittsweise angezeigt werden. Der Vorteil: es spart http-Requests, also Anfragen des Browsers beim Server nach den einzelnen Dateien. Der Nachteil: sinnvolle Alternativtexte für die Grafiken kann man damit leider nicht vergeben.
Weiterführende Literatur zum Thema Mobiles Web & Accessibility
Das HTML & CSS-Framework YAML, auf dem auch diese Seiten hier aufgebaut sind, ist seit heute in der fertigen Version 3.2 am Start. Erst vor wenigen Tagen konnte das Projekt seinen vierten Geburtstag feiern und auch nach einer so langen Zeit ist die Luft für Verbesserungen und Weiterentwicklungen noch nicht aufgebraucht. Die vorliegende Version 3.2 bringt einige wichtige Änderungen mit sich: neben dem schlankeren Framework-Kern, der Vereinfachung der Code-Basis, der Erweiterung der Gestaltungsraster (sog. Grids) und den Performance-Gewinnen gibt es eine ganze Reihe von Verbesserungen im Bereich der Accessibility, die uns natürlich besonders interessieren.
Barrierefreiheit eingebaut
Kein Framework, auch nicht YAML, ist ein Garant für barrierefreie Webseiten (obwohl eine ganze Reihe von YAML-basierten Sites bereits mit einer BIENE ausgezeichnet wurden). Dennoch zeigt sich mehr und mehr, wie sinnvoll und richtig es ist, Webentwicklern das grundlegende Handwerkszeug innerhalb von Frameworks zur Verfügung zu stellen. In YAML 3.2 wird eine neue Darstellungsmöglichkeit für Skiplinks unterstützt, die ein Überlagern des Layouts für die eingeblendeten Skiplinks ermöglicht und dadurch die sonst üblichen Probleme bei deren Integration beseitigt. Zudem wird für Webkit-basierte Browser ein JavaScript-Fix mitgeliefert, um auch Apple’s Safari und Google Chrome dazu zu bewegen, den Fokus auf die angesprungene ID zu setzen.
Weiterlesen …
Ein weiterer Schritt ist die konsequente Einbeziehung von WAI-ARIA: sämtliche bei YAML mitgelieferte Beispiel-Layouts sind nun mit sog. ARIA-Landmark-Roles versehen. Zwar handelt es sich hierbei nicht wirklich um ein Feature des Frameworks (die korrekte Auszeichnung sollte nach wie vor der Webentwickler vornehmen), dennoch ist dieser Schritt wichtig, um trotz der noch fehlenden Validierungsmöglichkeiten im W3C-Validator die positiven Effekte des kommenden Standards hervorzuheben, denn schon heute können alle modernen Browser (einschließlich des IE 8) mit WAI-ARIA umgehen und ermöglichen somit einen deutlichen Zugewinn an Barrierefreiheit auf Webseiten jeder Komplexitätsstufe.
Das ›Accessible Tabs‹-Plugin von Dirk Ginader wird mit YAML 3.2 als Erweiterung ein fester Bestandteil des Frameworks. Die Umsetzung im Rahmen dieses Plugins ist mittlerweile ausgereift, umfangreich getestet und funktioniert auch hervorragend mit aktuellen Hilfsmitteln wie Screenreadern.
Entsorgung von Altlasten
Manchmal liegt eine Verbesserung auch im Verzicht auf ein Feature: so bot das Framework bisher die Möglichkeit, Spaltenhintergründe mit Hilfe der CSS-border-Definition von bestimmten Spalten zu erzeugen. Zwar ist diese Technik denkbar einfach in der Umsetzung, sie beschwört aber in Verbindung mit den für viele Sehbehinderte typischen Einstellungen von Benutzer-definierten Farben (z.B. den Windows-Kontrastmodi) ein Zugänglichkeitsproblem herauf, da dort Vordergrund- und Rahmenfarben auf den gleichen Farbwert gesetzt werden. Inhalte mit dahinterliegenden farbigen Rahmen (den simulierten Spaltenhintergründen) waren infolgedessen zum Teil nicht mehr lesbar. Erschwerend kam hinzu, dass diese Technik im Internet Explorer ein CSS-Anpassung benötigte, die in seltenen Fällen das Auswählen von Inhalten mit der Maus im Browser blockierte. Daher ist diese Variante nun, auch aufgrund unserer Überzeugungsarbeit, nicht mehr im Framework enthalten.
Neben diesen großen Neuerungen stehen zahlreiche kleinere Korrekturen, über die das Changelog im Detail Ausfunft gibt. Download des Gesamtpakets, Lizenzbedingungen; YAML Dokumentation: Deutsch (PDF), English (PDF)
Der Wettstreit um das beste christliche Internetangebot 2010 ist eröffnet. Zum vierzehnten Mal schreibt die Evangelische Kirche in Deutschland (EKD) den »WebFish« aus, teilte die EKD heute in Hannover mit. Besonders berücksichtigt werden Angebote, die barrierefrei sind.
Mit dem WebFish prämieren die EKD und das Gemeinschaftswerk der evangelischen Publizistik gemeinsam die besten Online-Angebote in deutscher oder englischer Sprache, die den christlichen Glauben aktuell und kreativ umsetzen. Anbieter solcher Seiten können ihre Bewerbungen bis zum 31. Dezember online einreichen.
Im Januar 2010 werden unter den Bewerbungen zehn Angebote ausgewählt. Auswahlkriterien sind das Design, der Informationsgehalt, die technische Realisierung und die Möglichkeit der Interaktion. Besonders berücksichtigt werden Angebote, die barrierefrei sind und somit allen Menschen Zugang zu Informationen bieten. Ab Februar können die Internet-Nutzer unter den so nominierten Angeboten in einer Online-Abstimmung ihren persönlichen Favoriten auswählen und so mitbestimmen, wer die Gewinner sind.
Der Erstplatzierte erhält neben dem Goldenen WebFish einen Geldpreis in Höhe von 1.500 Euro. Der zweite Gewinner bekommt einen Silbernen WebFish und 1.000 Euro und für den dritten Sieger gibt es den Bronzenen WebFish und eine Siegerprämie von 500 Euro.
(bei kobinet abgeschrieben)
Auch in diesem Jahr bieten die Webkrauts ihren Lesern wieder einen Adventskalender. Ab kommenden Montag geht es dieses Mal rund um das Beste aus der Praxis in allen Bereichen des Webs: Performance, JavaScript, Suchfunktionen, Barrierefreiheit, nützliche Tools, den Umgang mit Kunden, Navigationen oder auch Suchmaschinenoptimierung, um nur ein paar Themen zu nennen.
24 Themen für Web-Arbeiter, mal für Einsteiger, mal für Fortgeschrittene, nun schon im vierten Jahr in Folge. Wer neu auf webkrauts.de ist, findet auch in den letzten Adventskalendern aus den Jahren 2007, 2006 und 2005 gute Tipps und Tricks über Web-Standards und darüber hinaus.
Unter dem Motto »Wir wollen es wissen« haben die Webkrauts vom 7. Januar bis zum 18. Februar 2008 die weitreichende »Webworker-Umfrage 2008« durchgeführt. Der Einladung folgten 2.803 Teilnehmer. Das Ergebnis präsentieren die Webkrauts nun unter webkrauts.de/umfrage2008.
Weiterlesen …
Demnach ist der durchschnittliche Webworker männlich, 32 Jahre alt, verdient zwischen 30.000 bis 34.999 € brutto, arbeitet knapp 41 Stunden pro Woche und hat Abitur oder einen akademischen Grad.
Besonders freuen wir uns darüber, dass mehr als 80 % aller Webworker auf Webstandards achten
, sagt Jens Grochtdreis, Initiator der Webkrauts, 58 % aller Teilnehmer ist die Einhaltung von Webstandards sogar wichtig
. Das ausführliche Ergebnis liegt auf der Webseite der Webkrauts online und als PDF vor.
Vorbild für diese Umfrage im deutschsprachigen Raum ist das amerikanische Online-Magazin »A List Apart«, das im Frühjahr 2007 den »Web Design Survey 2007« initiierte hat. Die Ergebnisse der Umfrage waren auf die ganze Welt bezogen. Webkraut Michael Jendryschik hat die Umfrage für den deutschsprachigen Raum um- und aufgearbeitet.
Die Webkrauts sind ein Zusammenschluss deutschsprachiger Webworker. Sie setzen sich dafür ein, die Vorteile moderner Webstandards stärker zur Geltung zu bringen. Dazu leisten sie Aufklärungsarbeit durch Veröffentlichungen im Netz und in anderen Medien, beteiligen sich an Veranstaltungen mit Web-Bezug und unterstützen Gremien und Organisationen, die sich mit Standards und Qualitätsmaßstäben befassen.
Die Webkrauts bieten eine kurze Zusammenfassung der wichtigsten Ergebnisse. Die vollständige Auswertung kann man auf der Website von Michael Jendryschik lesen, der die Umfrage durchgeführt und ausgewertet hat. Dort gibt es auch die Ergebnisse als PDF zum herunterladen.
Seit ungefähr zwei Jahren entwickelt die Web Accessibility Initiative des W3C an der WAI-ARIA-Reihe, von der nun ein neuer Entwurf vorgelegt wurde. ARIA steht für »Accessible Rich Internet Applications« und soll als Interims-Lösung dafür sorgen, dass Web-basierte Applikationen für die Hilfsmittel behinderter Nutzer zugänglicher werden.
- WAI-ARIA Primer ist ein neues Dokument, in dem die Hintergründe und Lösungsansätze der Spezifikation erklärt werden;
- Accessible Rich Internet Applications (WAI-ARIA) Version 1.0, der aktuelle W3C Working Draft vom 4 Februar 2008, in dem die bisher getrennten Entwürfe für ›Roles‹ und ›States and Properties‹ kombiniert werden;
- WAI-ARIA Best Practices beschreibt, wie Entwickler heute schon zugängliche Web-Anwendungen schreiben können.
Die Arbeitsgruppe bittet um Kommentare bis zum 3. März 2008, spezifische Fragen finden sich in den o.g. Dokumenten jeweils im Abschnitt »Status of This Document«.
Den besten Einstieg in das gesamte Thema bekommt man beim W3C: »WAI-ARIA Overview« oder in diesem Artikel von Martin Kliehm: »Accessible Web 2.0 Applications with WAI-ARIA« bzw. in der deutschen Übersetzung: »Barrierefreie Web 2.0 Anwendungen mit WAI ARIA«. Woran es zurzeit noch (insbesondere von Seiten der Hilfsmittel her) hapert beschreibt ein Artikel von Steve Faulkner: »AJAX and Screen Readers - Content Access Issues«.
Heute mal was Grundlegendes zum Berufsbild des Web-Designers:
Auch spaßig: »An unordered list of thoughts I had during a conference call with a potential client today«
Nachtrag:
Das Innenministerium des Landes Brandenburg veranstaltet noch bis zum 11. November den Internet-Wettbewerb eKommune: Bürgerinnen und Bürger stimmen online ab, welche Brandenburger Kommunen in punkto Service und Nutzerfreundlichkeit ihrer Internetangebote die Nase vorn haben.
Allerdings gibt es in diesem Jahr auch einen Sonderpreis für ›Beste Barrierefreiheit‹, der gemeinsam mit dem Städte- und Gemeindebund Brandenburg vergeben wird und mit 3.000 € dotiert ist. Die Entscheidung trifft eine Jury, in der auch der Behindertenbeauftragte des Landes, der Landesbehindertenbeirat und der Landesseniorenrat e.V. Sitz und Stimme haben. Bewerben können sich die Landkreise und kreisfreien Städte sowie amtsfreien Gemeinden und Ämter. Bewerbungsschluss ist der 12. Oktober 2007.
Die Brandenburgische BITV (BbgBITV) verpflichtet nur die Landesverwaltung, nicht jedoch die Kommunen. Der Preis soll Kommunen fördern, die sich trotzdem damit befassen.
In der letzten Folge hatten wir uns ein paar Gedanken dazu gemacht, wer für welche Teilaspekte des Barrierefreien Webdesigns zuständig ist. Heute gehen wir einen Schritt zurück und fragen uns, wie man die Accessibility grundsätzlich in einem Web-Projekt verankern kann.
Zum Mithören:
Podcast vom 19. Sept.
(.mp3, 12′40″, 11,7 MB)
Zum Mitlesen:
Die Mitschrift des Podcasts
Zum Abonnieren:
Der Podcast im iTunes Music Store
Nicht nur im Fußball geht jede Serie mal zu Ende, auch beim großen Bundesligatest der Webkrauts ist Abpfiff und die Abschlußtabelle nun veröffentlicht. Überraschungssieger Mainz '05 schließt den Test mit deutlichem Vorsprung vor Vizemeister Alemannia Aachen ab; über das was in der Tabelle danach kommt möchte man lieber den Mantel des Vergessens decken. Aber in den Profiligen gibt's ja bekanntlich im Winter nochmal eine Transferperiode, in der Vereine aufrüsten können – vielleicht können die Verantwortlichen die Halbzeitpause nutzen, um bei den Websites nochmal eine Schüppe nachzulegen. Genug Luft nach oben ist auf jeden Fall vorhanden …
Bei den dauernden Diskussionen um die esoterischsten Details der Barrierefreien Informationstechnik wird immer gerne vergessen, dass es letztendlich um Menschen geht. Menschen, denen durch sauberes Handwerk in der Web-Entwicklung erst die Möglichkeit zur Nutzung gegeben wird. Da kommt eine Broschüre gerade Recht, die von der britischen Worshipful Company of Information Technologists (wenn wir das richtig verstanden haben ist das sowas wie eine Innung) veröffentlicht wurde: »The IT Director's Guide to Accessible IT« (PDF-Download, ca. 1,4 MB). In der Publikation werden Entscheidern die Anforderungen, aber auch die Vorteile von barrierefreien Arbeitsplätzen für Menschen mit Behinderungen erklärt. Neben organisatorischen und technischen Tipps werden auch eine ganze Reihe von Best-Practice-Beispielen britischer Unternehmen wie Tesco und Legal&General gezeigt.
Die Wikipedia soll für Menschen mit Behinderungen besser nutzbar werden und möglichst alle Arten von Behinderungen berücksichtigen. Dazu wurde das Projekt Wikipedia:BIENE ins Leben gerufen. Jeder kann mitmachen, aber besonders Benutzer der Wikipedia, die eine Behinderung haben, werden gesucht. Nur die von Barrieren betroffenen Personen selbst können sagen, was sie behindert. Das Projekt ist mittelfristig angelegt und wird über mehrere Monate dauern. Als Ergebnis sollen in der Wikipedia möglichst viele Barrieren abgebaut sein.
Wie sieht eigentlich ein sinnvoller Alternativtext von Bildern oder Grafiken auf Webseiten aus? Muss der Text ausführlich sein? Muss dieser alles beinhalten, was das Bild zeigt? Oder reicht eine kurze Bildbeschreibung?
Angie Radtke führt hierzu ein Experiment durch mit Bildern, die Emotionen darstellen, welche nur schwer in Worte zu fassen sind. Es geht hier nicht um inhaltsfreie Schmuckgrafiken, sondern um Abbildungen, die selbst den Inhalt ausmachen oder Inhalte ergänzen.
Besucher werden gebeten, Vorschläge für Bildbeschreibungen in den Kommentaren zu hinterlassen. Mitmachen.
(hier abgeschrieben)
Das Regionale Rechenzentrum der Friedrich-Alexander-Universität Erlangen-Nürnberg (RRZE) hat eine aktualisierte Version der Checkliste zur Gestaltung barrierefreier Webanwendungen und Webauftritte veröffentlicht. Die Dokumente wurde didaktisch überarbeitet und neu strukturiert. Die neue Struktur in Einzeldokumenten soll dabei helfen, die Liste übersichtlicher zu machen. Zudem erlaubt es die Struktur nun, daß die Liste leichter in anderen Organisationen des Öffentlichen Dienstes übernommen werden kann.
Aus der Einleitung:
»Die Vorteile barrierefreier Webauftritte haben sich zwischenzeitlich herumgesprochen und sind weitgehend anerkannt. Die vorliegende Checkliste dient der Einhaltung von Standards und gesetzlichen Regeln in Bezug auf Benutzbarkeit und Barrierefreiheit, aber auch zur Förderung der Nachhaltigkeit von Webanwendungen und -auftritten. Sie ist bei allen Beschaffungen auszufüllen, bei denen Webanwendungen oder Webauftritte (unabhängig von etwaigen Zugangsbeschränkungen in Form eines ›Intranets‹" erstellt werden.
»Im Falle einer Ausschreibung, ist die Checkliste vom Anbieter auszufüllen. Der Anbieter erhält hierzu die folgende Checkliste in unveränderter Form (mit Angabe der ›k.o.-Kriterien‹).
»Werden Fragen mit ›Nein‹ beantwortet, die als ›k.o.-Kriterium‹ ausgezeichnet sind, ist von einer Auftragsvergabe abzusehen. Ebenso ist von einer Auftragsvergabe abzusehen, wenn die Checkliste nicht ausgefüllt wurde oder wenn der Anbieter für die Erfüllung der Checkliste eine Preissteigerung von mehr als 10% auf den Auftragswert ansetzt.
»Sollte dennoch die Beschaffung einer Lösung notwendig sein, die die Anforderungen der Checkliste nicht erfüllen kann, ist eine schriftliche Begründung erforderlich.«
Als Dateiformate stehen wahlweise Microsoft Word, OpenOffice.org oder Adobe PDF zur Verfügung. Auf Nachfrage der Redaktion erklärten die Verantwortlichen, dass die Dokumente unter einer CreativeCommons-Lizenz stehen. Entsprechende Hinweise werden zurzeit nachgerüstet, somit steht einer allgemeinen Verwendung auch für andere Webprojekte nichts mehr im Wege. (via)
