Kapitel 14

Das gesamte Joomla! 1.5 Buch ist jetzt online lesbar, die Kapitel 13-17 beschäftigen sich mit dem Ausbau von Joomla!. Eigene Templates, Komponenten, Module, Plugins und eine komplette Website mit Joomla! von A-Z wird beschrieben!

Die Website hier wird auch langsam entdeckt.

Hier ein paar Screenshots aus Google Analytics vom 7.1.2008

Zugriffe der letzten zwei Wochen

aus Deutschland

aus Österreich

aus der Schweiz

von Angie Radtke¹

Als Hagen mich fragte, ob ich dieses Kapitel in seinem Buch übernehmen würde, war mir erst mal mulmig – bis zum Abgabetermin war nur noch eine Woche Zeit. Puh.

Aber gut, ich bin ja nicht ganz unvorbereitet gewesen. Viele Dinge, die ich im Folgenden beschreibe, kommen in wesentlich detaillierterer Form in dem Buch Barrierefreies Webdesign vor, das ich gemeinsam mit Michael Charlier geschrieben habe².

Hier habe ich nur ein Kapitel und muss mich auf das Wesentliche beschränken. Dazu gehe ich auf die Grundlagen des barrierefreien Webdesigns ein und beschreibe die grundlegende Idee, die hinter dem Standard-Template Beez steckt, mit dem man in Joomla! barrierefreie Seiten erstellen kann.

Die Frage, ob Barrierefreiheit und Joomla! zu vereinen seien, war bis zur Version 1.0.3 ein heißes Eisen. Möglich war es schon, der Aufwand aber hoch. Um sie zu beruhigen – mit 1.5 und Beez stehen der barrierefreien Ausgabe Ihrer Inhalte keine wesentlichen Hindernisse mehr entgegen.

14.13.1 Allgemeines

• einfach-fuer-alle.de
• wob11.de
• barrierefrei-kommunizieren.de
• webaccessibility.de (umfangreiche Linksammlung von Martin Stehle)
• blog.der-auftritt.de

14.13.2 Assistive Technologien

• Webformator: webformator.com
• IBM Homepagereader: -5.ibm.com/de/accessibility/hpr.html
• Jaws: freedomscientific.com/fs_downloads/jaws.asp
• Windows eyes: gwmicro.com
• VIRGO: baum.at

14.13.3 Checkertools

• Colour Contrast Analyser:
  • juicystudio.com/services/colourcontrast.php
  • visionaustralia.org.au/info.aspx?page=628
  • webforall.info/html/deutsch/col_analy.php
• Vischeck: vischeck.com/
• Cynthia Says: contentquality.com
• Bobby: webxact.watchfire.com
• Validator: validator.w3.org
• Validator: htmlhelp.com
• Wave: wave.webaim.org/wave/index.jsp
• AIS Toolbar: webforall.info/html/deutsch/asistoolbar.php
• Accessibility Toolbar Mozilla/Firefox: cita.disability.uiuc.edu/software/mozilla/

14.13.4 Buchtipp

Angie Radtke u. Michael Charlier. Barrierefreies Webdesign.
Attraktive Websites zugänglich gestalten.
Addison-Wesley 2006.
ISBN 978-3-8273-2379-8.

Mit Joomla! hat man die Möglichkeit, Artikelübersichtsseiten anzulegen, auf denen einzelne Artikel angeteasert werden. In älteren Joomla!-Versionen findet sich hinter jedem dieser angeteaserten Artikel der Verweis Weiterlesen (oder read more, wenn man das deutsche Sprachfile nicht installiert hat). Dieser Link hatte bis zur Version 1.5 bei jedem Vorkommen innerhalb eines Webauftritts den gleichen Wortlaut: read more oder Weiterlesen.

Da Hilfsmittel wie z.  B. Screenreader gegebenenfalls nur die Links einer Seite anzeigen, ist es erforderlich, Linktexte inhaltlich zu formulieren, um ein erkennbares Ziel zu liefern.

Abgesehen davon gehört der textliche Inhalt des read-more-Links semantisch zum Dokumenteninhalt und sollte frei formulierbar sein.Wird diese Anforderung nicht erfüllt, fällt eine Website schon beim ersten mechanischen Test auf ihre Zugänglichkeit durch.

In Joomla! 1.5 wird standardmäßig die Artikelüberschrift vor den Weiterlesen-Link positioniert, was eine eindeutige Unterscheidung des Linkziels möglich macht.

Diese Lösung ist aber auf die Dauer wenig befriedigend, da es sich um eine redundante Information handelt und keine redaktionelle Bearbeitung möglich wäre.

In Kapitel 8.1.2 sowie in Abbildung 8.6 wurde schon auf die Artikelparameter eingegangen, mit denen man das Erscheinungsbild bzw. die Informationsausstattung jedes Artikels auf jeder Seite einzeln gestalten kann. Jetzt gibt es in Joomla! 1.5 den neuen zusätzlichen Parameter readmore:text, den Sie unter Parameters Advanced in der Artikelansicht finden (Abbildung 14.12).

Abbildung 14.12: Alternativer Weiterlesen Text

Redaktionell kann dieser Parameter zu einer Herausforderung werden. Denn er hat nicht nur die Aufgabe, einen eindeutigen Linktext zu beschreiben, sondern soll Ihre Besucher neugierig machen und zum Weiterlesen animieren.

Die Komponente com_content steuert die Ausgabe aller Inhalte und ist damit das Herzstück unseres Codes.

Sie finden die entsprechenden Dateien unter templates/beez/html/com_content.

Im Standard-Template wird die Joomla!-spezifische mehrspaltige Ausgabe mittels einer Tabelle realisiert. Dies ist die einfachste Lösung – nichts verrutscht – alles passt auch ohne CSS.

Nutzt man Beez, muss man umdenken. Es werden unterschiedlich verschachtelte divs verwandt, die mit verschiedenen CSS-Klassen versehen wurden, um in der Gestaltung möglichst flexibel zu sein. Es gibt Klassen für einzelne Zeilen und Spalten, so dass mittels CSS so ziemlich alles an Gestaltungswünschen umgesetzt werden kann. Wem dieses Klassen-Angebot zu umfangreich erscheint, der kann es mit »Suchen und Ersetzen« relativ leicht aus dem Code entfernen.

Hier ein entsprechender Auszug aus beez/html/com_conent/frontpage/default.php:

<div class="article_row<?php echo   $this->params>get('pageclass_sfx'); ?>">
<?php
for ($z = 0; 
     $z < $colcount && $ii < $introcount && $i < $this->total;
     $z++, $i++, $ii++) : ?>
  <div class="article_column column<?php echo $z + 1; ?>cols<?php echo $colcount; ?>" >
  <?php $this->item   =& $this->getItem($i, $this->params);
  echo $this->loadTemplate('item'); ?>
</div>
<span class="article_separator">&nbsp;</span>
<?php
endfor;
?>
<span class="row_separator<?php echo $this->params->get('pageclass_sfx'); ?>">&nbsp;</span>
</div>

Lineare Darstellung von Inhalten hat den großen Nachteil, dass man unter Umständen einen sehr weiten Weg zurücklegen muss, um zu »hinten« liegenden Inhaltsbereichen zu gelangen.

Beez kümmert sich an zwei Stellen um diese Sprungmarken. Zum einen in der index.php, wo ihre Position festgelegt wird und zum anderen in den eingesetzten Komponenten und Modulen, die Formularelemente enthalten.

14.6.1 index.php

Zu Beginn finden wir folgenden Code:

<ul>
  <li>
    <a href="#content" class="u2">
      <?php echo JText::_('Skip to Content'); ?>
    </a>
  </li>
  <li>
    <a href="#mainmenu" class="u2">
      <?php echo JText::_('Jump to Main Navigation and Login');?>
    </a>
  </li>
  <li>
    <a href="#additional" class="u2">
      <?php echo JText::_('Jump to additional Information'); ?>
    </a>
  </li>
</ul>

Diese Sprungmarken verlinken dokumentintern auf ihre entsprechenden Anker und sind semantisch korrekt mittels einer Liste angeordnet. Die JText-Anweisungen dienen der Übersetzung und werden je nach verwendetem Sprachfile automatisch in die von Ihnen ausgewählte Standardsprache übersetzt (siehe Kapitel 4.1, Seite 87).

Vor jedem Anker befindet sich eine mit CSS aus dem Viewport heraus positionierte Überschrift. Sie ist normalerweise unsichtbar, wird aber z.  B. in Screenreadern ausgegeben und erleichtert die nachvollziehbare Strukturierung des Inhaltes in hohem Maß.

<h2 class="unseen">
  <?php echo JText::_(' View, Navigation and Search'); ?>
</h2>
...
<a name="mainmenu"></a>  

Man könnte den Skiplink auch direkt auf die ID des umgebenden divs setzen, was sicherlich dem Konzept des strukturierten Dokumentes besser gerecht würde – leider gibt es jedoch einige ältere Screenreader, die damit nicht zurechtkommen.

14.6.2 Skiplinks in den Formularen

Senden Screenreader-Nutzer ein Formular ab, welches nicht mit einer Sprungmarke versehen wurde, landen sie am Seitenanfang und müssen erst umständlich zum eigentlichen Seiteninhalt navigieren. Um dies zu verhindern, verfügen die in Beez eingesetzten Formulare über Sprungmarken zum eigentlichen Seiteninhalt.

<form 
 action="<?php echo JRoute::_('index.php?option=com_search#content') ?>" 
 method="post"
 class="search_result<?php echo $this->params->get('pageclass_sfx') ?>"
>

Listing 14.1: Beispiel: die Suche

Die Anstrengungen, Computer auch für Behinderte zugänglich zu machen, sind tatsächlich älter als das Internet. Die UNO verabschiedete im Dezember 1982 das World Programme of Action (WPA), in dem die Zugänglichkeit moderner Technologien für Menschen mit Behinderungen eine große Rolle spielt. Große IT-Unternehmen wie IBM, Microsoft und Sun haben in den folgenden Jahren erste wichtige Beiträge geleistet, um diese Zugänglichkeit zu verbessern. Im Dezember 1993 – das HTTP-Protocol war kaum zwei Jahre alt – verabschiedete dann die Generalversammlung der UNO eine Resolution, in der gleichberechtigter Zugang zu Information und Kommunikation für Menschen mit physischen Behinderungen gefordert wurde. Schon bald entwarfen erste Staaten Verordnungen oder Gesetze, um diese Vorgabe umzusetzen.

Mit der Gründung des W3C 1994 stand dann auch ein fachkundiges Gremium zur Verfügung, das – neben anderen Standardisierungsmaßnahmen – auch die Erarbeitung von Richtlinien für den barrierearmen Webzugang zu seiner Aufgabe machte. Diese Arbeiten waren 1998 weitgehend abgeschlossen, so dass die Vereinigten Staaten auf ihrer Grundlage im Dezember 1998 Section 508 of the Rehabilitation Act Amandment verabschiedeten – damit wurde die Einhaltung bestimmter Zugänglichkeitsanforderungen für die US-Regierung und ihre Lieferanten zur gesetzlichen Pflicht. Die Web Accessibility-Initiative des W3C hat diese Richtlinien schließlich ihrerseits erst im Mai 1999 als Web Content Accessibility Guidelines 1.0 (WCAG1.0) verabschiedet. In weitgehend unveränderter Form wurden diese Richtlinien dann zur Grundlage der BITV (Barrierefreie Informationstechnologie Verordnung) nach dem deutschen Behindertengleichstellungsgesetz von 2002 und zahlreichen anderen gesetzlichen Regelungen in vielen Ländern der Erde. In den Jahren nach 2000 hat die WAI dann noch weitere Richtlinien erarbeitet, die sich z.  B. auf die zugänglichkeitsfördernde Gestaltung von Browsern und anderen User-Agents (UAAG) beziehungsweise Authoring-Werkzeugen (ATAG) beziehen.

Die Richtlinien der WCAG1 aus dem Jahr 1998 sind heute in einigen Punkten überholt und daher nicht mehr uneingeschränkt als Grundlage unserer Arbeit geeignet. Dies liegt vor allem daran, dass sich seitdem die Technik massiv weiterentwickelt hat.

Weiterhin sind die Arbeiten an einer WCAG2, die eigentlich bereits 2001 hätte fertiggestellt werden sollen, immer noch nicht zum Abschluss gekommen. Ein erster Entwurf der WCAG2 wurde Mitte des Jahres (2007) veröffentlicht und wird im Moment heiß diskutiert.³

Der kanadische Accessibility-Experte Joe Clark hat Anfang Juni 2007 die WCAG Samurai Errata mit interessanten und heftig umstrittenen Vorschlägen für die Korrektur der geltenden WCAG 1.0 veröffentlicht⁴.

WCAG1/BITV sind daher trotz ihrer Schwächen derzeit die einzige verbindliche Grundlage für die Gestaltung zugänglicher Webseiten. Wir empfehlen daher allen, die auf diesem Gebiet arbeiten wollen, sich außer in wenigen zu begründenden Ausnahmen an diese Richtlinien zu halten, gleichzeitig aber auch die weitere teilweise öffentlich geführte Diskussion um Version 2 mitzuverfolgen.

Die WCAG1 besteht aus 14 Richtlinien, die jeweils mehrere Punkte umfassen. Diese Prüfpunkte sind in drei Prioritätsstufen eingeteilt, die den Kategorien muss erfüllt sein, sollte erfüllt sein, ist sinnvoll entsprechen. Je nachdem, ob die erste, die erste und zweite oder alle drei Kategorien erfüllt sind, darf sich eine Website mit A, AA oder AAA schmücken. In der deutschen BITV sind die beiden ersten Kategorien zusammengefasst, so dass lediglich eine Unterscheidung von Pflichtpunkten und sinnvollen Anregungen vorliegt. Hier gibt es somit also nur AA oder AAA – damit sind die Anforderungen der BITV theoretisch höher als die der WCAG.

Für die meisten Menschen ist das Internet mittlerweile zur Selbstverständlichkeit geworden. Informationen aus aller Welt stehen zum Abruf bereit. Und vielleicht noch wichtiger: Auch die Sonderangebote beim örtlichen Baumarkt, die Öffnungszeiten des Einwohnermeldeamtes oder das Telefonbuch sind am heimischen Bildschirm erreichbar. Lästige Bibliotheksbesuche oder Telefonate werden unnötig, man schaut halt ins Netz.

Von dieser Entwicklung profitieren jedoch nicht alle. Gerade Menschen, denen durch irgendeine körperliche oder geistige Behinderung die volle Teilnahme am gesellschaftlichen Leben erschwert ist, könnten von der Kommunikationstechnik enorm profitieren. Doch sie scheitern oft an Barrieren, die ihnen den Zugang zu Informationen oder die Nutzung von Angeboten erschweren oder ganz unmöglich machen. Viele dieser Barrieren lassen sich überwinden, wenn die Angebote entsprechend gestaltet sind.

Betreiber von Online-Shops oder Banken, die Internetbanking anbieten, sollten sich dieser nicht so kleinen Zielgruppe durchaus bewusst sein.

Barrierefreies Webdesign zielt dementsprechend darauf ab, Inhalte und Interaktionen im Netz für (möglichst) alle Nutzergruppen und Endgeräte zugänglich zu machen.

Ca. 8% der deutschen Bevölkerung haben eine physische Einschränkung, die den Betroffenen den Zugang zu Informationen aus dem Internet erschwert. Landläufig wird barrierefreies Webdesign mit dem Begriff Internet für Blinde gleichgesetzt. Ich möchte betonen, dass das nicht alles ist – tatsächlich sogar nur der kleinste Teil. Ich habe mich schon oft gefragt, warum das so ist. Wahrscheinlich liegt das daran, dass der Monitor zum klassischen Symbol für den Computer geworden ist, und wer nichts sieht, kann ihn nicht bedienen. In meiner täglichen Arbeit ist mir aber immer wieder aufgefallen, dass gerade blinde Menschen mit weniger zugänglichen Seiten viel besser zurecht kommen als Menschen mit andersartigen Behinderungen.

Als blind gelten Personen, deren restliche Sehkraft nur noch wenige Prozent des Durchschnittswertes beträgt. Die Zahl der so bestimmten Blinden wird für Deutschland mit 150.000 bis 200.000 angegeben. Einige von ihnen können am Computer durch Schriftvergrößerung und individuelle Farbeinstellungen Texte gerade noch entziffern, während andere darauf angewiesen sind, sich die Information akustisch ausgeben zu lassen oder diese über die Braillezeile zu ertasten.

Erheblich größer ist der Anteil der Menschen mit starken Sehbehinderungen.

Über verschiedene Grade von Fehlsichtigkeit klagt etwa ein Viertel der Bevölkerung im berufstätigen Alter – später nimmt der Anteil stark zu. Einige Fehlsichtigkeiten lassen sich durch Brillen recht gut kompensieren, andere nur sehr begrenzt. Bestimmte Augenerkrankungen wie Grauer oder Grüner Star lassen sich operativ beheben oder zumindest abmildern. Wieder andere wie Retinopathia pigmentosa oder Diabetische Retinopathie führen zu einer ständigen Verschlechterung des Sehvermögens und letztlich oft zu völligem Verlust der Sehfähigkeit. Beim so genannten »Tunnelblick« ist das Gesichtsfeld der betroffenen Personen extrem eingeschränkt – manchmal auf die Größe einer Zwei-Euro-Münze, die man auf die Entfernung der Länge eines Armes vor das Gesicht hält.

Etwa 10% der männlichen Bevölkerung ist von leichten Formen der Farbenblindheit betroffen – meistens heißt das, dass bestimmte Rot- und Grüntöne nicht voneinander unterschieden werden können. Blindheit gegenüber anderen Farben, völlige Farbenblindheit oder Rot-Grün-Blindheit bei Frauen sind sehr selten.

Einer anderer potenzieller Nutzerkreis hat Probleme mit der üblichen Eingabetechnik – nicht jeder kann eine Maus führen oder eine Standardtastatur bedienen.

Dafür kann es viele Gründe geben: Arme und Finger sind bewegungsunfähig oder bewegen sich spontan und schwer kontrollierbar. Andere haben überhaupt keine Hände und Arme oder sind vom Hals abwärts oder nach einem Schlaganfall halbseitig gelähmt. Solange ein Mensch in der Lage ist, auch nur ein binäres Signal – also die berühmte 0 oder 1 – gesteuert abzusetzen, reicht das, um mit Energie, Lernaufwand und geeigneter Software einen Computer in allen Funktionen bedienen zu lernen.

Es gibt in Deutschland etwa 60.000 bis 100.000 Menschen mit extrem eingeschränkter Hörfähigkeit. Einige Tausend davon waren dadurch auch so stark beim Erlernen der deutschen Sprache behindert, dass sie diese Sprache nur unvollkommen (Stand 4. bis 6. Schuljahr) beherrschen. Was die Forderung nach verständlicheren Texten klarer macht.

Für die Kommunikation untereinander, aber auch für die Aufnahme fremder oder anspruchsvollerer Inhalte ziehen sie die Deutsche Gebärdensprache vor – das ist ein Idiom auf einer eigenen, von der Lautsprache unabhängigen Grundlage eines Systems von Zeichen und Gesten.

Je mehr das Internet alle Lebensbereiche erobert, desto mehr treten auch situative Behinderungen in den Vordergrund: Langsame Verbindungen im Hotel, unkontrollierbare Lichtverhältnisse im fahrenden Zug, angeordneter Verzicht auf Ton am Arbeitsplatz.

Von zugänglichen Websites profitieren alle Menschen. Dabei muss es nicht immer um die volle Beachtung aller Richtlinien gehen, zu deren Einhaltung staatliche Stellen verpflichtet sind. Auch kleine Schritte in Richtung Zugänglichkeit können die Benutzbarkeit von Seiten wesentlich verbessern.

Durch seinen hohen Verbreitungsgrad hat Joomla! die Möglichkeit, viel zu bewegen. Mit dem Standard-Template Beez ist es nun relativ einfach geworden, zugängliche und für viele nutzbare Seiten zu erstellen.

14.3.1 Trennung von Content und Layout

Die erste und wichtigste Regel für die Entwickler ist die möglichst vollständige Trennung von Inhalt und Layout:

• Sauberer und reiner HTML-Code für die Inhalte
• Keine unnötigen Layouttabellen
• Formatierung ausschließlich über CSS
• Ein logischer semantischer Aufbau
• Sprungmarken

Die linearisierbare Ausgabe des Inhalts und die Formatierung ausschließlich über CSS ist eine der wichtigsten Bedingungen für praktische Zugänglichkeit.

Nur dann hat Assistive Technologie die Möglichkeit, den Inhalt nach Belieben aufzubereiten, während die visuelle Präsentation völlig unberücksichtigt bleiben kann. Die Auslagerung der Präsentation in Stylesheets gibt dem z.  B. sehbehinderten User überdies die Möglichkeit, eigene Stylesheets in seinem Browser zu definieren und damit die Seiten exakt seinen Bedürfnissen anzupassen. Eine lineare Darstellung der Inhalte und eine adäquate semantische Struktur ist für Screenreader-Nutzer besonders wichtig.

Screenreader erfassen den Inhalt einer Website von oben nach unten – also linear. Verwendet man umfangreiche Layoutabellen, ist diese Linearisierung nicht mehr gegeben.

Unter dem Begriff Semantik im Web kann man sich erst einmal wenig vorstellen. Man denkt wahrscheinlich an den Deutschunterricht, aber auch beim Schreiben von Webinhalten spielt sie eine besondere Rolle. Zum Beispiel bieten Screenreader ihren Nutzern an, von Überschrift zu Überschrift oder von Liste zu Liste zu springen, was einen schnelleren Überblick über das Gesamtdokument verschafft. Beinhaltet ein Webdokument keine Überschriften, ist diese Funktionalität nicht nutzbar.

Die formale Struktur eines Webdokumentes sollte der inhaltlichen Struktur weitgehend entsprechen. Je nach Webprojekt kann die Wahl der entsprechenden Überschriftenhierarchie durchaus eine Herausforderung sein.

Sprungmarken

Lineare Darstellung von Inhalten hat allerdings einen großen Nachteil: Unter Umständen muss man einen sehr weiten Weg zurücklegen, um zu »hinten« liegenden Inhaltsbereichen zu kommen. Auf dem Bildschirm können bei einem Drei-Spalten-Layout dagegen mehrere Bereiche »oben« zumindest anfangen, und das Auge kann gleich dorthin springen, wo es – durch visuelle Hilfen unterstützt – die gerade interessierende Information vermutet. Abhilfe bietet hier das Konzept der Sprungmarken. Es bildet faktisch ein nicht visuelles Gegenstück zum grafischen Layout und ermöglicht es dem Anwender linearer Wiedergabegeräte, wesentliche Inhaltsbereiche bereits am Anfang der Seite zu identifizieren und dann unmittelbar dorthin zu springen, wo er die Informationen vermutet, die ihn interessieren.

Praktisch läuft der Einsatz von Sprungmarken darauf hinaus, an den Anfang jeder Seite noch einmal ein zusätzliches Menü für die seiteninterne Navigation zu stellen. In den meisten Fällen wird es sinnvoll sein, dieses Menü im grafischen Layout auszublenden – für sehende User ist es mitunter höchst irritierend, wenn sie einen Link betätigen, aber es geschieht (scheinbar) nichts, weil das Linkziel ja bereits im Viewport sichtbar ist. In jedem Fall sollte das »Übersprungmenü« nicht zu lang und sehr durchdacht aufgebaut sein, weil es ja unter den Bedingungen der Linearisierung selbst ebenfalls zur Verlängerung und Verkomplizierung des Wahrnehmungspfades beiträgt. Im Allgemeinen dürfte es empfehlenswert sein, als erstes Sprungziel »zum Hauptinhalt« anzubieten – dann haben Stammbesucher, die sich auf einer Site auskennen und die Navigation gezielt handhaben, den kürzesten Weg dorthin, wo sie tatsächlich hin wollen.

Spätestens hier wird deutlich, dass insbesondere Seiten mit komplexeren Inhalten nicht nur ein grafisches Layout benötigen, sondern auch ein Content-Design, das darauf abzielt, den Seiteninhalt in einer Form anzuordnen, die für Anwender linearisierender Clients keine überflüssigen Barrieren enthält.

14.3.2 Anforderungen an das Design und den Inhalt

Die Gestaltung einer Website ist mehr als ein nettes Design, sie unterstützt die Besucher bei der Aufnahme der angebotenen Informationen. Sie zeigt ihm Interaktionsmöglichkeiten und drückt gleichzeitig die Corporate Identity des Seitenbetreibers aus. Sie führt den Betrachter in logischer Folge durch die wichtigsten Inhalte einer Seite und hilft ihm so beim Erfassen des Gesamtkonzepts.

Im Rahmen von barrierefreier Gestaltung ist besonders zu achten auf:

• Sinnvolle Anordnung der Inhalte
• Durchdachte Farbwahl
• Ausreichende Kontraste
• Variable Schriftgrößen
• Skalierbare Layouts
• Keine Schriftgrafiken
• Keine transparenten Hintergründe für Grafiken
• Sinnvolle Alternativ-Texte für Grafiken
• Ausreichend große Navigationselemente
• Vorsicht bei mausgesteuerten Events

14.3.3 Visuelle und inhaltliche Anordnung der Inhalte

Die optische Gliederung der einzelnen Seitenbereiche ist ein zentrales Element, um Inhalte zu präsentieren und den Benutzer strukturiert durch das jeweilige Webangebot zu führen. Je strukturierter und logischer der Aufbau ist, desto besser werden sich die Benutzer auf Ihrer Website zurechtfinden.

Die inhaltliche Struktur ist dabei genauso wichtig wie die gestalterische Struktur. Der inhaltlichen Konzeption fällt eine besondere Bedeutung zu: Eine wichtige Richtlinie bei der Strukturierung der Inhalte ist:

Strukturieren Sie Ihre Inhalte immer so, dass sie den Erwartungen Ihres Nutzers entsprechen.

Das ist nicht immer ganz einfach, denn oftmals muss man umdenken. Ein Anbieter kennt seinen Betrieb und die internen Abläufe, so dass man aus dieser Sicht Dinge anders strukturieren würde, als es für den Nutzer vielleicht sinnvoll erscheint.

Im Lauf der Jahre haben sich im Web einige deutlich erkennbare Konventionen zur optischen Gliederung entwickelt: Im Kopfbereich findet man in der Regel Informationen über den Anbieter; Sinn und Zweck der Seite sowie zentrale Navigationselemente wie Kontakt, Impressum und mögliche Navigationshilfen wie etwa Links zu einer Sitemap oder einer Suchfunktion. An dieser exponierten Position befinden sich diese Informationen direkt im Blickfeld des Betrachters und können bei möglichen Problemen direkt angewählt werden.

Entsprechend der westlichen Leserichtung bewegt sich das Auge von links nach rechts und von oben nach unten über die Seiten, deshalb befindet sich das Logo meistens oben links, im primären optischen Bereich. Dort wird es gefunden – wenn man es sucht.

Der durchschnittliche User erwartet die Navigation auf der linken Seite. Oftmals diskutiert, wird diesem Konzept Langeweile und fehlende Innovation vorgeworfen. Menschen bewegen sich jedoch auch im Netz nach vertrauten Mustern. Sie haben ihre eigenen Erfahrungen und reagieren entsprechend. Gewohnte Positionierungen verkürzen die Zeit, die der User zum Erfassen der Gesamtinhalte benötigt, er kann sich schneller den eigentlichen Inhalten zuwenden.

14.3.4 Die Farbwahl

Die Farbwahl ist gerade im barrierefreien Zusammenhang besonders wichtig, denn auch Menschen mit eingeschränkter Farbwahrnehmung sollen Ihre Website uneingeschränkt nutzen können.

Konvertiert man ein Layout in Graustufen, gewinnt man eine ungefähre Vorstellung davon, was z.  B. farbenblinde Menschen sehen. Allerdings ist die Wahrnehmung sehr individuell und je nach Ausprägungsgrad der Fehlsichtigkeit unterschiedlich. Viele farbenblinde Menschen haben allerdings im Lauf ihres Lebens gelernt, welche Farben hinter dem, was sie tatsächlich sehen, stecken. Sie wissen z.B., dass Rasen grün ist, und können durch Vergleiche auch andere Grüntöne identifizieren.

Abbildung 14.1: Die Beez, in Graustufen konvertiert

Wesentlich verbreiteter als die totale Farbenblindheit ist die so genannte Rot-Grün-Blindheit. Durch eine genetische Besonderheit sind Betroffene nicht in der Lage, die Farben Rot und Grün zu unterscheiden. Mischfarben, die diese Farbanteile enthalten, verschwimmen.

14.3.5 Kontraste

Farben spielen auch bei verschiedenen anderen Arten der Sehbehinderung eine wichtige Rolle, denn nicht nur der Farbwert, sondern auch ein deutlicher Farbkontrast kann bei der Nutzung einer Webseite hilfreich sein.

Vorder- und Hintergrundfarbe sollten innerhalb der Textelemente einen deutlichen Kontrast bilden, allerdings ist es nicht möglich, Farb- und Kontraststellungen auszuwählen, die allen gerecht werden. Schwarzer Text auf weißem Hintergrund erzielt einen größtmöglichen Farbkontrast. Um störende Blendeffekte zu vermeiden, kann eine leichte Tönung des Hintergrundes sinnvoll sein. Manche fehlsichtige Menschen benötigen sehr starke Kontraste, um die einzelnen Elemente einer Seite inhaltlich voneinander trennen zu können. Für sie sind Farbkombinationen wie z.  B. weiße Schrift auf hellem, orangefarbenem Hintergrund nicht kontrastreich genug. Auf andere hingegen wirken starke Kontraste als Überstrahlung – der Inhalt wird schwer lesbar.

14.3.6 Variable Schriftgrößen

Eine weitere, ebenfalls außerordentlich wichtige Regel ist, die Schriftgrößen variabel zu gestalten.

Die gängigen Browser bieten uns glücklicherweise die Möglichkeit, Schriften zu zoomen. Dies funktioniert aber nur dann, wenn wir relative Angaben für die Schriftgrößen machen und keine feste Pixelgröße wählen. Sie haben die Wahl zwischen Prozentangaben und der em-Angabe. Beide Angaben beziehen sich, wenn man sie auf die Eigenschaft font-size anwendet, auf die elementeigene Schrifthöhe.

14.3.7 Skalierbare Layouts

Innerhalb des Webdesigns unterscheidet man zwischen festen und fluiden Layouts.

Fluide Layouts passen sich der Bildschirmgröße an und bieten skalierbarem Text Raum. Die Breitenangaben einzelner Spalten des Designs werden in Prozent oder em angegeben, das bietet die Möglichkeit, den Darstellungsbereich des Bildschirms maximal auszunutzen. Ändert sich die Größe des Browserfensters, passt sich der Inhalt automatisch an.

Das ist generell eine sehr schöne Art, Inhalte zu präsentieren. Ich selbst halte es aber so, eine maximale Breite von ca. 950 bis 980 Pixeln festzulegen, was den Vorteil bietet, dass bei sehr großen Bildschirmauflösungen die Zeilenlänge nicht zu lang wird, was nämlich die Lesbarkeit des Inhalts einschränken würde.

14.3.8 Grafiken

Grafiken können wir auf unserer Seite unterschiedlich einsetzen. Zum einen in unserem Template und zum anderen in dem eigentlichen Inhaltsbereich.

Für die Gestaltung ist besonders wichtig, dass wir z.  B. beim Einbinden eines Logos darauf achten, transparente Hintergründe zu vermeiden. Stellen Sie sich vor, Sie hätten ein Logo mit einem schwarzen Schriftzug auf transparentem Hintergrund eingebunden.

Menschen mit bestimmten Fehlsichtigkeiten surfen z.B im Windows-Invertierungsmodus, wobei in der Regel helle Schrift auf schwarzem Hintergrund verwendet wird (Abbildung 14.2).

Abbildung 14.2: Invertierte Darstellung

Das Beez-Logo hat einen weißen Hintergrund und ist auch bei schwarzem Hintergrund noch erkennbar.

Ihr Logo ist für diese Menschen nicht zugänglich, da der Schriftzug von dem schwarzen Hintergrund überlagert wird.

Generell sollte man auf Schriftgrafiken verzichten, eine textliche Alternative ist in den meisten Fällen möglich, denn Schriftgrafiken sind in der Regel nicht skalierbar und damit vom Nutzer nicht beeinflussbar.

Es gibt Situationen, in denen der Kunde einen besonderen Schriftzug fordert. In diesen Falle kann ich Ihnen dazu raten, die Schriftgrafiken größer anzulegen und mit der relativen Größenangabe em auf die Wunschgröße herunterzuskalieren. So sind sie wenigstens etwas vergrößerbar.

Und denken Sie daran, einen sinnvollen Alternativ-Text zu vergeben.

Grundsätzlich sollten Sie sich immer Gedanken über sinnvolle Alternativ-Texte für Grafiken machen. Denn Menschen, die nichts oder nur eingeschränkt sehen können, bleibt die Information, die diese Grafiken transportiert, verschlossen.

Mithilfe des alt-Attributes des img-Elements haben Sie die Möglichkeit, einen alternativen Text zu formulieren.

Das Formulieren eines solchen Textes ist nicht immer einfach, grundsätzlich sollte er kurz, aussagekräftig und prägnant sein.

Bilder, die keine Information enthalten, erfordern auch keinen alt-Text. Allerdings gibt es zwischen Bildern, die klar erkennbare und eindeutige Information enthalten, und solchen, die nur eine Stimmung transportieren oder ganz ohne bestimmbaren Inhalt nur zur Gestaltung in der Fläche dienen, ein breites Spektrum von Möglichkeiten. Unter diesen Umständen ist es wirklich oft nicht leicht, das von der BITV an die erste Stelle ihres Forderungskataloges gesetzte Gebot zur Angabe von textlichen Alternativen zu erfüllen.

Um z.  B. Grafiken mit vielen Informationen – ich denke da etwa an eine grafische Auswertung der letzen Bundestagswahlen – zu beschreiben, bietet sich das longdesc-Attribut an.

Das Attribut enthält einen Verweis auf eine externe Quelle, die den beschreibenden Text enthält.

<img src="wahlergebnisse.jpg" width="271" height="265" alt="Übersicht der Wahlergebnisse der Bundestagswahl" longdesc="wahlergebnisse.html">

Leider hat longdesc Schwächen in der Implementierung – es wird nicht von allen Screenreadern ausgewertet.

14.3.9 Ausreichend große Navigationselemente

Menschen, denen es aus unterschiedlichen Gründen nicht möglich ist, eine Maus zu führen, sind auf alternative Techniken angewiesen. Viele von ihnen nutzen entweder die Tastatur oder alternative technische Hilfsmittel. Das klassische Beispiel für motorische Behinderungen ist sicherlich Steven Hawking⁵. Der Physiker leitet an amyothropher Lateralsklerose und steuert seinen Rollstuhl mit dem Mund. Die angebotenen Hilfsmittel sind in vielen Bereichen technische Wunderwerke, die Dinge ermöglichen, die wir für unmöglich halten würden.

Jahrelang gab es die Richtlinie, auf mausgesteuerte Events zu verzichten, da diese von motorisch eingeschränkten Menschen und Screenreader-Nutzern nicht bedienbar sind, die Hilfsmittel sind aber mittlerweile in der Lage, adäquat damit umzugehen⁶.

Reinen Tastaturnutzern bleiben mausgesteuerte Events jedoch nach wie vor verborgen.

In jedem Fall sollte man darauf achten, ausreichend große Schaltflächen anzubieten. Links, die nur einen kleinen sensitiven Bereich aufweisen, sind schwer zu treffen, Und das nicht nur für Menschen mit Behinderung.

14.3.10 Formulare

Interaktivität wird im Netz immer wichtiger, um Kommunikationsprozesse zwischen dem Anwender und dem Seitenbetreiber zu vereinfachen. Der Besucher gibt persönliche Daten ein, und ein Programm im Hintergrund verarbeitet diese weiter.

HTML-Formulare sind beim aktuellen Stand der Technik immer noch das bevorzugte Mittel zur Realisierung dieser Interaktion.

Unter dem Aspekt der Accessibility ist das auch sehr zu begrüßen, weil HTML zumindest grundlegende Möglichkeiten bereitstellt, Interaktion plattformübergreifend und geräteneutral zu ermöglichen. Solange diese Funktionalität auch für Anwender von alternativen Technologien erreichbar ist, ist nichts dagegen einzuwenden.

Die zugängliche Gestaltung von HTML-Formularen ist in erster Linie ein Problem der Linearisierung und der Gruppierung des Inhalts.

Die Elemente fieldset und label

Webdesigner neigen dazu, Formulare in Layouttabellen darzustellen. Tatsächlich erscheint die Gestaltung der Formulare damit deutlich einfacher. Leider verleitet das aber auf der anderen Seite zu Konstruktionen, bei denen die inhaltliche Verbindung zwischen der Beschriftung und dem Formularelement verloren gehen kann.

Um einen logischen Bezug zwischen den Formularelementen und der Beschriftung zu ermöglichen, ist in (X)HTML das label-Element vorgesehen.

<label for="Vorname" title="Vorname">Vorname:</label>
<input id="Vorname" type="text" size="20" name="Vorname" value="" />

Das Eingabefeld erhält mithilfe des Universalattributes ID einen eindeutigen Namen, auf den dann das Attribut for des label-Elements verweist.

Hat man innerhalb eines Formulars ähnlich lautende Eingabefelder, z.  B. getrennte Angaben für Ehefrau und Ehemann, ist die Gruppierung mit fieldset ein hilfreiches Instrument, diese Bereiche eindeutig voneinander zu trennen.

<fieldset>
  <legend>Angaben Ehefrau</legend>
  <label for="Vornamefrau">Vorname</label>
  <input id="Vornamefrau" 
         type="text" size="20"
         name="Vorname"
         value=""   />
   ...
</fieldset><fieldset>
<legend>Angaben Ehemann</legend>
  <label for="Vornamemann">Vorname</label>
  <input id="Vornamemann"
         type="text" 
         size="20"
         name="Vorname"
         value="" />
</fieldset>

...  

Für Nutzer des Screenreaders Jaws bietet der Einsatz von Legend eine zusätzliche Navigationshilfe, denn er kann von fieldset zu fieldset springen, um damit eine schnellere Übersicht über die Formularelemente zu gewinnen. Der Webformator kann das z.  B. nicht.

Tabellen sind nicht immer störend. Wenn sie tatsächlich Datenstrukturen abbilden, sind sie die geeignete Wahl.

Joomla! verwendet an mehreren Stellen wenig komplexe Datentabellen. Zum Beispiel bei der Darstellung der Weblinks oder bei der Kontaktübersicht.

Datentabellen sind grundsätzlich zugänglich, wenn sie als solche ausgezeichnet und entsprechend ausprogrammiert sind.

Das Attribut headers stellt für jede einzelne Datenzelle (td) eine Verbindung zwischen dieser Zelle und einer Überschrift (th) her, indem es die ID der jeweils zugehörenden Überschrift benennt oder – es können auch mehrere Überschriften sein – diese IDs aufzählt. Diese Darstellung wurde auch für die Joomla!-internen Datentabellen verwendet.

Über die Menükonfiguration der Weblinks oder Kontaktübersicht haben Sie die Möglichkeit, die Kopfzeile der angebotenen Tabellen auszuschalten.