Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Barrierefreiheit: Mehrfachkennzeichnung in der Praxis – Teil 2

Barrierefreiheit: Mehrfachkennzeichnung in der Praxis – Teil 2

Im zweiten Teil geht es um die Mehrfachauszeichnungen für Inhalte.

Zweiter Teil unseres Auszugs aus dem Buch »Barrierefreiheit verstehen und umsetzen« von Kerstin Probiesch und Jan Eric Hellbusch. Siehe auch Teil 1 über Mehrfachauszeichnungen für Links und die Navigation.

2. Inhalte

Die Mehrfachkennzeichnung beschränkt sich nicht auf Links. Ob Überschriften oder Tabellen, es gibt zahlreiche Inhaltstypen, die oft über Farbe allein und ohne zusätzliche Formatierung gestaltet werden. Im Folgenden werden einige typische Barrieren beschrieben, die insbesondere in Inhaltsbereichen entstehen können.

2.1 Überschriften

In der Regel werden Überschriften im Inhaltsbereich visuell durch Schriftgröße, Fettung und Farbe hervorgehoben. Während eine Hauptüberschrift i.d.R. größer als der Fließtext gestaltet wird, werden – je tiefer ein Dokument strukturiert ist – die Überschriftenebenen oft nur noch durch Farbe und somit nicht ausreichend gekennzeichnet.

Überschriften sind markante Informationspunkte. Sie ziehen die Aufmerksamkeit auf sich und geben im Idealfall eine Information über den nachstehenden Text. Zudem vermittelt die Überschriftenhierarchie, wo in der inhaltlichen Gliederung ein Text einzuordnen ist. Deswegen müssen Überschriften auf der Strukturebene entsprechend ihrer Hierarchie im HTML ausgezeichnet werden. Die Anforderung gilt selbstverständlich auch im Kontext der visuellen Wahrnehmung. Überschriftenebenen müssen unabhängig von einzelnen Formatierungen wie Farbe erkennbar sein.

Eine Möglichkeit, Überschriften hervorzuheben, ist über vorangestellte Symbole. Für jede vorhandene Überschriftenebene kann ergänzend zur Textgestaltung ein Symbol eingebunden werden, vgl. Listing 2.

  1. h1, h2, h3, h3 {
  2.   padding: 5px 0px 5px 25px;
  3.   display: list-item;
  4.   margin-left : 20px;
  5. }
  6.  
  7. h1 {
  8.   list-style-image:url('lib/img/h1.gif');
  9. }
  10.  
  11. h2 {
  12.   list-style-image:url('lib/img/h2.gif');
  13. }
  14.  
  15. h3 {
  16.   list-style-image:url('lib/img/h3.gif');
  17. }
  18.  
  19. h3 {
  20.   list-style-image:url('lib/img/h3.gif');
  21. }

Listing 2: CSS für vorangestellte Symbole bei Überschriften

Eine weitere Möglichkeit ist, Überschriften zusätzlich mit einem Rahmen auszuzeichnen, der links vor der Überschrift platziert wird. Horizontale Rahmen unterhalb der Überschriften sind ungeeignet, da sie wie Unterstreichungen wirken und als Links interpretiert werden könnten.

Natürlich kann mit Schriftgröße, Einrückungen und anderen Formatierungen (in Ergänzung zu Farbe) gearbeitet werden. Für die sechs Überschriftenebenen ist darauf zu achten, dass sie sich unabhängig von der Farbe unterscheiden. Bei längeren Dokumenten mit einer nummerierten Gliederung kann jedoch auf zusätzliche Formatierungen verzichtet werden, sofern die Ordnungszahlen der Gliederung nachvollziehbar sind.

2.2 Listen

Bei Aufzählungen und Listen kann es erwünscht sein, die Aufzählungspunkte durch CSS-Grafiken zu ersetzen. Dies ist unproblematisch, solange diese Grafiken keine Informationen transportieren. Wenn jedoch verschiedene Symbole zur Unterscheidung von Listeneinträgen eingesetzt werden, dann muss sichergestellt sein, dass die Bedeutung der Symbole klar ist. Ist dies nicht der Fall, dann ist ein weiterer beschreibender Text nötig, denn für über CSS eingebundene Grafiken gibt es keine Möglichkeit, Alternativtexte zu vergeben.

Bei verschiedenfarbigen Aufzählungszeichen (z.B. »rote und grüne Punkte«) kann ergänzend zur Farbe eine Form verwendet werden, etwa rote Kreise und grüne Quadrate. Werden unterschiedliche Symbole als Informationsträger in Listenpunkten eingesetzt, muss die Barrierefreiheit durch weitere Maßnahmen sichergestellt werden.

In einem anderen Beispiel haben wir eine Liste mit vier Links durch Grafiken ergänzt. Die ersten drei Grafiken waren identisch, aber die vierte Grafik machte deutlich, dass der nachstehende Link zu einer anderssprachigen Seite führt. Der letzte Eintrag wurde mit unsichtbarem Text ergänzt. Das ist so lange sinnvoll, wie der restliche Text einer Seite deutsch ist: Auf einer französischsprachigen Seite wäre es sinnvoll, auch die Links zu deutschsprachigen Seiten zu kennzeichnen.

2.3 Hervorhebungen im Fließtext

Zusätzlich zu einer Vermittlung durch Symbole oder über Farben können typografische Merkmale wie eine andere Schriftart und Schriftgröße, Unterstreichungen oder Durchstreichungen zum Hervorheben einzelner Inhalte eingesetzt werden. Die Verwendung von Farbe ist auch hier empfehlenswert, solange sie nicht der einzige Informationsträger ist.

Wenn Texte kollaborativ – z.B. in einem Wiki – geschrieben werden, können unterschiedliche Versionen angezeigt und eingefügte sowie gelöschte Texte eingesehen werden. Diese Informationen werden oft nur über Farbe vermittelt.

Abb. 5: Eingefügte und gelöschte Texte werden durch Hintergrund- und Vordergrundfarben hervorgehoben.
Abb. 5: Eingefügte und gelöschte Texte werden durch Hintergrund- und Vordergrundfarben hervorgehoben.

Auch hier sind zusätzliche Formatierungen im Sinne einer Informationsvermittlung über mehrere Wege nötig. Eine Lösung wäre, die Textpassage sowohl in Rot als auch fett darzustellen – wobei die Fettung selbstverständlich mit HTML geschehen sollte – und wie folgt darauf zu verweisen: »Textänderungen sind in Rot und fett dargestellt.«

Auf der Strukturebene könnte ein eingefügter oder gelöschter Text mit einem STRONG-Element ausgezeichnet sein. Wird jedoch das STRONG-Element auch zur Hervorhebung anderer Texte genutzt, dann lässt sich die »normale« Hervorhebung nicht mehr von der für geänderte Texte unterscheiden. Die nach der HTML-Spezifikation für diesen Zweck vorgesehenen INS- und DEL-Elemente sind nicht geeignet. Sie werden von Screenreadern nicht ausgewertet und sind daher nicht zugänglichkeitsunterstützend.

In einem solchen Fall ist es am besten, Versionsunterschiede direkt im Fließtext zu kennzeichnen und dies bereits im Screendesign zu berücksichtigen, z.B. indem solche Bereiche so gestaltet werden, dass neben einer Textfarbe die geänderten Stellen vorher und hinterher ergänzt werden.

Abb. 6: Veränderungen im Dokument werden mit Farbe und Text gekennzeichnet.
Abb. 6: Veränderungen im Dokument werden mit Farbe und Text gekennzeichnet.

2.4 Farbig hinterlegte Bereiche

Auf Webseiten werden oft Informationskästen für ergänzende oder hervorgehobene Informationen verwendet. Sie können allgemeine Hinweise, Merksätze, Linklisten u.v.m. enthalten. Meist werden solche Bereiche über Farbe (z.B. einen grauen Hintergrund) gekennzeichnet. Auch solche Informationskästen und ähnliche Seitenelemente benötigen zusätzliche Erkennungsmerkmale. In der Regel reicht ein Rahmen, hilfreich sind aber auch Bezeichnungen.

Wenn Absätze oder andere Textblöcke durch eine veränderte Farbe hervorgehoben werden, gehört auf der Strukturebene eine vorangestellte Überschrift als Bezeichnung zu den Minimalanforderungen.

  1. <div class="hinweis">
  2.   <h2>Benötigen Sie Hilfe?</h2>
  3.   <p>Einige Fragen und Antworten finden Sie in der <a href="#">Hilfe</a>.</p>
  4.   <p>Einige Begriffe finden Sie im <a href="#">Glossar</a> erläutert.</p>
  5. </div>

Listing 3

Auch sollte der Informationskasten einen ergänzenden, umschließenden Rahmen erhalten. Da er bei benutzerdefinierten Farben erkennbar ist, kann er die gleiche Farbe wie die farbige Hinterlegung selbst erhalten:

  1. .hinweis {
  2.   padding: 1em;
  3.   width: 320px;
  4.   height: 400px;
  5.   border: 2px solid #eee;
  6.   overflow: auto;
  7.   float: left;
  8.   margin: 0 2em 1em 0;
  9.   background-color: #eee;
  10. }

Listing 4: border-Technik für Info-Kästen

Ohne die border-Eigenschaft wird ein Info-Kasten bei benutzerdefinierten Farben nicht gut von anderen Inhalten zu differenzieren sein. Mit einem Rahmen kann die Hervorhebung hier sichergestellt werden, wie im untersten Bild von Abbildung 7 zu sehen ist.

Abb. 7: Eine farbliche Hervorhebung kann durch einen Rahmen bei benutzerdefinierten Farben besser wahrgenommen werden.
Abb. 7: Eine farbliche Hervorhebung kann durch einen Rahmen bei benutzerdefinierten Farben besser wahrgenommen werden.

2.5 Tabellen

Auch in Tabellen können verschiedene Maßnahmen der Mehrfachkennzeichnung berücksichtigt werden. Ein Beispiel sind Spalten- und Zeilenüberschriften: Die farbige Gestaltung von Kopfzellen fördert die Leserlichkeit, aber durch Fettung und/oder Zentrierungen oder andere Ausrichtungen können die Zellen auch unabhängig von der Farbe visuell hervorgehoben werden.

Vor dem Hintergrund benutzerdefinierter Bildschirmfarben sollte auch bei der Gestaltung von Tabellen auf einige wenige weitere Zeilen CSS geachtet werden, um die Wahrnehmbarkeit zu fördern.

Sind beispielsweise in einer Datentabelle die Reihen abwechselnd nur mit zwei unterschiedlichen Hintergrundfarben gestaltet (Zebratabellen), dann geht diese visuelle Leseunterstützung bei benutzerdefinierten Farben verloren. Auch wenn die Tabelle noch zugänglich ist, kann das Lesen durch weitere Maßnahmen gefördert werden. Eine sehr einfache Technik sind Rahmen für Tabellenzellen bzw. -reihen, die in der gleichen Farbe wie der Zellenhintergrund gehalten sein können und bei benutzerdefinierten Farben Orientierungsmöglichkeiten in langen Datentabellen bieten. Dies ist vor allem bei wichtigen Informationen in großen Tabellen sinnvoll.

2.6 Grafiken

Auch in Schaubildern (z.B. Kursverläufe in Charts, Diagrammblöcke) darf nicht allein durch Farbe unterschieden werden. Neben Farbe können hier ergänzend Muster (z.B. eine gestrichelte rote und eine durchgezogene blaue Kurve) eingesetzt werden. Dies ist besonders bei Farben wichtig, die für farbfehlsichtige Menschen problematisch sind.

Um etwa in einem Geschäftsbericht die Gewinne und Verluste darzustellen, darf sich nicht allein auf eine farbige Markierung der Zahlen verlassen werden: Rot für negative Zahlen und Schwarz für positive Zahlen reicht nicht aus. Empfehlenswert ist hier ein zusätzliches Plus- bzw. Minuszeichen vor den jeweiligen Zahlen. Darstellungen von Flächen (z.B. Zufriedenheit oder Unzufriedenheit mit einem bestimmten Produkt) sind durch weitere Merkmale zu ergänzen, vor allem wenn für die Flächen die Farben Rot und Grün verwendet werden. Für diesen Fall bietet sich eine Schraffierung für eine der beiden Flächen an.

Das Buch

Cover: Barrierefreiheit verstehen und umsetzen

Der Text ist ein Auszug aus »Barrierefreiheit verstehen und umsetzen – Webstandards für ein zugängliches und nutzbares Internet« von Kerstin Probiesch und Jan Eric Hellbusch. Das Buch ist im dpunkt.verlag erschienen. Wir veröffentlichen daraus das Kapitel »Mehrfachkennzeichnung in der Praxis«. Außerdem verlosen wir drei Exemplare.

Kommentare

Florian
am 28.03.2011 - 09:49

Hallo Krauts,

von mir gibt es einen Podcast, für alle die wenig Zeit finden die ganzen guten Artikel zum Thema zu lesen.
Bei der Technikwürze sind bestimmt alle Folgen empfehlenswert, die zum Thema Barrierefreiheit war für mich ein guter Einstieg.
Technikwürze 29 / Usability und Barrierefreiheit

Gruß,
Florian

Permanenter Link

Brigitte Bornemann
am 28.03.2011 - 12:30

Vielen Dank für Eure filigranen Tipps! Ihr geht weit über die Basics hinaus, und ich wünsche Euren Anregungen, dass sie in die Standards des barrierefreien Webdesigns aufgenommen werden.

Mein Linktipp: www.bitvtest.de
Wenn man das Testverfahren zum Selbsttest einsetzt, kann man die Basics von barrierefreiem Webdesign lernen.

Permanenter Link

Johannes Baum
am 28.03.2011 - 14:30

Super Artikel. Ich habe das Gefühl, dieses Buch hat gute Chancen zur zukünftigen Pflichtlektüre zur Barrierefreiheit im Web zu werden.

Vielleicht gewinne ich ja mal was:)

Hier mein Link zur Barrierefreiheit: http://www.biene-award.de

Permanenter Link

Steffen Paasch
am 28.03.2011 - 14:57

Es ist erstaunlich, mit welchen doch recht einfachen Mitteln es möglich ist, Informationen im Web zugänglicher zu machen.

Linktipp: Kleine, hilfreiche Checkliste: http://tobias-otte.de/essays/accessibility-checkliste/

Permanenter Link

Thorsten Panknin
am 28.03.2011 - 15:52

Die Border-Technik für Info-Kästen finde ich sehr hilfreich.

Mein Linktipp: http://wave.webaim.org/

Permanenter Link

Tomcat
am 28.03.2011 - 16:24

Hi Thorsten, jipp, du hast vollkommen recht. Mein Favorite ist auch wave. einfach eine super darstellung die es auf den Punkt bringt. Ich denke mal hier noch wenig bekannt. tom

Permanenter Link

Gunnar Bittersmann
am 28.03.2011 - 23:09

Horizontale Rahmen unterhalb der Überschriften sind ungeeignet, da sie wie Unterstreichungen wirken und als Links interpretiert werden könnten.

Ja, wenn die Unterstreichung so breit ist wie der Text der Überschrift. Geht der Text der Überschrift nicht über die volle Zeilenbreite, die Linie darunter aber doch, ist die Gefahr der Fehlinterpretation als Link wohl geringer.

2.3 Hervorhebungen im Fließtext
Zusätzlich zu einer Vermittlung durch Symbole oder über Farben können typografische Merkmale wie eine andere Schriftart und Schriftgröße, Unterstreichungen oder Durchstreichungen zum Hervorheben einzelner Inhalte eingesetzt werden. Die Verwendung von Farbe ist auch hier empfehlenswert, solange sie nicht der einzige Informationsträger ist.

Äußerst problematisch. Bei Linien unter Überschriften wurde noch auf die Gefahr der Fehlinterpretation als Link hingewiesen, und hier wird genau das propagiert, was zur Fehlinterpretation als Link führt?

Nutzer sind es gewohnt, dass alles, was farbig oder(!) unterstrichen ist, ein Link ist. Dadurch sind sowohl Farben als auch Unterstreichungen als Mittel zur Hervorhebung in Fließtexten im Web ungeeignet. Nutzer werden auf derartige Hervorhebungen klicken und sich wundern, dass nichts passiert.

Links des Tages: Accessible Rich Internet Applications (WAI-ARIA) 1.0, WAI-ARIA 1.0 Primer, WAI-ARIA 1.0 Authoring Practices

Permanenter Link

Robert
am 29.03.2011 - 08:59

Das Buch hört sich sehr interessant an! Mit gut 800 Seiten auch ein üppiges Werk. Das mache ich gerne bei der Verlosung mit.
Ein Link zum Thema Barrierefreiheit: http://www.biene-award.de/
Hier werden jedes Jahr herausragende Websites in Bezug auf Ihre Barrierefreiheit geadelt. Von den Websites kann man sich gut das ein oder andere für die eigene Webentwicklung rauspicken.

Permanenter Link

Gunnar Bittersmann
am 29.03.2011 - 10:27

Auf der Strukturebene könnte ein eingefügter oder gelöschter Text mit einem STRONG-Element ausgezeichnet sein.

Aber nur dann, wenn das Ziel des Dokuments gerade darin besteht, die Änderungen zwischen zwei Versionen des Textes hervorzuheben (worin der Sinn des strong-Elementes besteht). Ansonsten wäre es Unfug, wegen Irrelevanz gelöschten Text nochmals hervorzuheben.

Aber auch dann wäre das strong-Element überflüssig; die Hervorhebung kann per Stylesheet für ins- und del-Elemente geschehen, ohne dass zusätzliches Markup vonnöten wäre.

Die nach der HTML-Spezifikation für diesen Zweck vorgesehenen INS- und DEL-Elemente sind nicht geeignet. Sie werden von Screenreadern nicht ausgewertet und sind daher nicht zugänglichkeitsunterstützend.

Dieses Problem sollte in den Screenreadern gelöst werden. Es kann nicht Aufgabe von Webautoren sein, aus Gründen der Barrierefreiheit unsinniges Markup verfassen zu müssen.

In einem solchen Fall ist es am besten, Versionsunterschiede direkt im Fließtext zu kennzeichnen

Auch das sollte mit CSS möglich sein:
del::before { content: " (Beginn des gelöschten Textes) " }
del::after { content: " (Ende des gelöschten Textes) " }
ins::before { content: " (Beginn des eingefügten Textes) " }
ins::after { content: " (Ende des eingefügten Textes) " }

Bei der visuellen Darstellung kann man dafür sorgen, dass dieser generierte Inhalt nicht angezeigt wird.

Permanenter Link

Peter
am 29.03.2011 - 12:54

Hallo,

vielleicht noch eine Idee? Ein Kontrasttest kann hilfreich beim Gestalten einer barrierefreien Site sein.

Permanenter Link

Rosi
am 29.03.2011 - 13:12

Hallo,

ein interessantes Buch!

Gruß und viel Erfolg damit, Rosi

Permanenter Link
Jan Hellbusch

Jan Hellbusch (Autor)
am 29.03.2011 - 13:39

@Gunnar

Auch hier gebe ich Dir recht, wenn Du sagst, dass es nicht Aufgabe des Webentwicklers ist ... aber: Einer der wichtigsten Begriffe der WCAG20 ist die Zugänglichkeitsunterstützung. Wenn eine Technik (z.B. von Screenreadern) nicht unterstützt wird, dann kann diese Technik nicht zur Barrierefreiheit führen. Wenn DEL und INS als alleinige Kennzeichnung eingesetzt werden um Löschungen und Einfügungen zu kennzeichnen, ist das nicht barrierefrei. As simple as that.

Anders gesagt: Standardkonformität und Barrierefreiheit haben eine Schnittmenge.

Permanenter Link

Gunnar Bittersmann
am 29.03.2011 - 14:44

@Jan: Und was soll man als Webautor tun? Etwa auch jede Überschrift als Überschrift auszeichnen? Beim Markup sollte wie beim Programmieren gelten, Redundanzen zu vermeiden. (Was keinesfalls ausschließt, dass Informationen auf einer Webseite für Nutzer redundant, also mehrfach gekennzeichnet dargestellt werden.) Durch ins/del sind eingefügte/gelöschte Inhalte im Markup eindeutig als solche gekennzeichent. Simple es that.

Wenn unterstützende Programme wie Screenreader es nicht fertigbringen, per HTML richtig(!) ausgezeichnete Informationen adäquat widerzugeben, dann erfüllen sie ihre Aufgabe nicht richtig und sollten nachgebessert werden. Simple es that.

Permanenter Link

Gunnar Bittersmann
am 29.03.2011 - 14:47

Oops, vergessen zu maskieren. Es sollte heißen:
Etwa auch jede Überschrift als <h1><em>Überschrift</em></h1> auszeichnen?

Eine Vorschaufunktion wäre hier durchaus sinnvoll.

Permanenter Link

Steffen Paasch
am 29.03.2011 - 20:33

Echt interessanter Artikel und die Diskussion ist auch spannend.

Link zur Filament Group, die auch immer wieder sehr gute Ansätze für Accessability - für mich eine passende Ergänzung zu diesem Buch:

http://filamentgroup.com/lab

Permanenter Link

Rosi
am 31.03.2011 - 20:40

Hallo,

da erfahre ich mit Eurem Buch ja viel Neues. :-)

Auch auf dieser Seite fand ich gute Tipps

www.wogibtes.info/eintrag/751837/1342735/wob11.de+-+Aktionsb%FCndnis+f%F...

Permanenter Link
Nicolai Schwarz

Nicolai Schwarz (Webkraut)
am 01.04.2011 - 00:01

Donnerstag Abend, Mitternacht. Das heißt: Ihr könnt diesen Beitrag gerne weiter kommentieren, aber für das Gewinnspiel zählen nur die bisherigen Kommentare. Wir geben die Gewinner in der kommenden Woche bekannt.

Permanenter Link

Die Kommentare sind geschlossen.