Autor und Datum der Veröffentlichung:

Peter Rozek | 30.07.2007

Themenbereich:

Accessibility

Dieser Artikel beschreibt in kurzer und allgemeiner Form, welche Vorteile zugängliche Webangebote mit sich bringen und welche Kriterien bei der Umsetzung von barrierefreien Webangeboten zu beachten sind.

Inhalt

  1. Definition des Begriff Accessibility
  2. Kostenersparnis standardkonformer und barrierefreier Webangebote
  3. Usability und Barrierefreiheit
  4. Suchmaschinen mögen barrierefreies Webdesign
  5. Dokumente sollen wohlgeformt und Valide sein
  6. Semantik in HTML Dokumenten
    1. Allgemeine Definition von Semantik
  7. Praxis
    1. Inhalt vom Design trennen
    2. Struktur
    3. Darstellung
    4. Abwärtskompatibel
    5. Usability
    6. Webstandards
    7. Testing
  8. Fazit

Definition des Begriff Accessibility

Im Zusammenhang mit Web Accessibility spricht man auch oft von Barrierefreien Internet oder barrierefreies Webdesign.
Barrierefreies Internet (Fachbegriff: Accessibility) bezeichnet Internet-Angebote, die von allen unabhängig von ihren körperlichen und/oder technischen Möglichkeiten uneingeschränkt genutzt werden können. Dies schließt sowohl Menschen mit und ohne Behinderungen, als auch Benutzer mit technischen (z. B. Textbrowsern oder PDA) oder altersbedingten Einschränkungen (z. B. Sehschwächen) sowie Webcrawler ein, mit denen Suchmaschinen den Inhalt einer Seite erfassen. Da dies aufgrund der unzähligen weichen, individuell geprägten Barrieren nicht vollständig erreicht werden kann, spricht man auch von barrierearm oder zugänglich. Quelle Wikipedia: Barrierefreies Internet

Im Wesentlichen kann man drei Gruppen herausfiltern für die Barrierefreiheit sinnvoll ist:

Die Zugänglichkeit von Webseiten gewinnt daher immer mehr an Bedeutung. Zum einen hat sich die Erkenntnis durchgesetzt, dass mit barrierefreien Internetauftritten neue Zielgruppen gewinnen lassen, zum anderen können langfristig die Unterhaltskosten gesenkt werden.

Kostenersparnis standardkonformer und barrierefreier Webangebote

Usability und Barrierefreiheit, Qualitätsmerkmale im Webdesign

Barrierefreie Webseiten weisen meist eine bessere Benutzerfreundlichkeit auf. Das liegt zum einem daran das wesentliche Erkenntnisse aus der Usabilityfoschung Einfluss auf die Gestaltung nehmen. Bezügl. des Quellcodes haben zugängliche Webangebote meist eine bessere Gliederung sind auf verschiedenen Ausgabemedien nutzbar und können sich dem spezifischen Nutzerverhalten einfacher anpassen.

Einfaches Beispiel: Bei barrierefreien Webangeboten ist die Schriftgröße skalierbar und kann somit den Sehgewohnheiten angeglichen werden. Für barrierefreie Webangebote heißt dies, die Schriftgröße in relativen Größen angeben, entweder mit „em“ oder in Prozent. Auf fixe Größenangaben in Pixel sollte verzichtet werden.

Barrierefreies Internet wird allerdings überwiegend mit behinderten Menschen in Verbindung gebracht. Richtig ist dass der Abbau von Barrieren gerade im Internet Menschen mit körperlichen und altersbedingten Schwächen zugutekommt oder den sogenannten Silversurfern, der Generation 55plus. Untersuchungen zeigen, dass gerade Menschen mit Behinderungen sich überdurchschnittlich im Internet aufhalten. Sei es zum Shoppen, der Recherche mittelst Suchmaschinen oder der Kommunikation via E-Mail. Interessant dürfte in diesem Zusammenhang auch die aktuelle Studie der European Interactive Advertising Association (EIAA) sein. Der Branchenverband der europäischen Online-Vermarkter ließ rund 7000 Menschen in zehn europäischen Ländern befragen. Heraus kam das ca. ein Viertel der Deutschen, die zur Gruppe der „Generation 55plus“ zählen, sich regelmäßig im Internet aufhalten.

Berücksichtigt man diese Erkenntnisse, kann man mehreren Argumentationen folgen, nämlich das barrierefreie Webangebote zur Kostensenkung beitragen, benutzerfreundlicher sind und eine höhere Reichweite haben. Jakob Nielsen hat im Bericht „Return on Investment for Usability“ dargestellt, dass durch Usability- Verbesserungen einer Webseite die Abschlussquote um 100% gesteigert werden kann.

Eine ebenso wichtige „Zielgruppe“ Barrierefreier Webseiten sind Suchmaschinen.

Suchmaschinen mögen Barrierefreies Webdesign

Zugängliche Webseiten gestalten heißt suchmaschinenfreundlich handeln. Webcrawler durchsuchen Ihr Webangebot und Verschlagworten dieses. Vom Prinzip her sind Webcrawler blinde Besucher. So wie der „normale“ Internetnutzer zur Orientierung ein funktionierendes Screendesign vorfinden sollte um Informationen schnell erfassen zu können. So braucht der blinde Besucher oder die Suchmaschine eine klare Gliederung zur Orientierung.

Gliederung erhalten Websites durch den zweckgebundenen Gebrauch von HTML – Elementen. Das W3C hat mit der Web Accessibility Initiative (WAI) eine Reihe von Richtlinien herausgegeben, die Kriterien für zugängliche Websites auflisten. (Web Accessibility Initiative Guideline 1.0)

HTML bringt durch seine Struktur die ideale Voraussetzung mit, Dokumente logisch zu gliedern. In der Vergangenheit wurde der eigentliche Zweck von HTML-Elementen durch ein Gemisch von Struktur und Design zweckentfremdet.

Dokumente sollen wohlgeformt und Valide sein.

Ein kleines Beispiel, wie es nicht aussehen sollte:

<html>
  <head>
  <title>Beispiel</title>
  </head>
  <body>
  <table>
  <tr><td>
  <div align="left"><font size="6" face="Arial, 
  Helvetica, sans-serif">Überschrift</font><br>
  <font face="Arial, Helvetica, sans-serif"> Ein Absatz ist ein 
  Absatz und sollte auch so behandelt.</font></div>
  </td></tr>
  </table>
  </body>
  </html>

Eleganter, schlanker und mit sinnvoller Gliederung würde das Beispiel so aussehen:

<html>
  <head>
  <title>Beispiel</title>
  </head>
  <body>
  <h1>Überschrift</h1>
  <p>Ein Absatz ist ein Absatz und sollte auch so behandelt.</p>
  </body>
  </html>

Im Beispiel oben sieht man ein buntes Gemisch an HTML-Elementen, während die elegante Lösung eine klare Struktur aufweißt. Die Überschrift ist entsprechend mit <h1> ausgezeichnet und der Text ist mit <p> ebenso sinnvoll markiert. Das Design wird über Stylesheets visualisiert.

Suchmaschinen und Benutzer von Screenreader brauchen diese Struktur um die Gliederung und Inhalte von Dokumenten zu erfassen. Das eigentliche Design einer Website spielt hier keine Rolle, weil sie nicht von Bedeutung ist.

Semantik in HTML Dokumenten

Bei strukturierten HTML-Dokumenten spricht man auch von semantischem Code.

Allgemeine Definition von Semantik
Die Semantik oder Bedeutungslehre, kommt aus dem griechischem und heißt so viel wie bezeichnen, anzeigen. Quelle Wikipedia: Semantik

Für zugängliche Webseiten ist Semantik ein entscheidender Punkt, der leider oft außer acht gelassen wird. In beiden Seitenbeschreibungssprachen HTML und XHTML haben alle Elemente eine bestimmte Bedeutung und sollten entsprechend ihrer Bedeutung verwendet werden.

Auf beide Seitenbeschreibungssprachen übertragen kann man folgende Charakteristika für semantischen Code festhalten:
Semantischer Code ist die Verwendung von HTML-Elementen, welche in ihrem Kontext das Höchstmaß an Bedeutung kommunizieren.
Semantischer Code stellt einen Bezug zum Inhalt her. Er umschließt oder repräsentiert Inhalt und übermittelt dessen Bedeutung oder Funktion.
Semantischer Code ist nicht präsentationsgebunden, sondern informationsgetrieben. Er transportiert Sinngehalt nicht über die visuelle Gestalt, sondern über universell verständliche “Etiketten”. Er ist eine plattformunabhängige Meta-Information.
Semantischer Code kommuniziert nicht nur Bedeutung, sondern verleiht auch Struktur. Es werden Beziehungen hergestellt und Hierarchien aufgebaut.

Zitiert aus: Vorsprung durch Webstandards

Aus den vorangegangenen Erkenntnissen können für die Gestaltung barrierefreier Webangebote folgende Empfehlungen für die Praxis gegeben werden.

Empfehlungen für die Praxis

Inhalt vom Design trennen

Durch die strikte Trennung von HTML und CSS ist der erste Schritt zur Zugänglichkeit bereits vollzogen. Der HTML-Code definiert die Dokumentenstruktur, während die Stylesheets Layout und Designinformationen enthalten. Somit können Ausgabegeräte, die mit Designangaben nichts anfangen, können Informationen aus dem HTML-Dokument herausfiltern und logisch darstellen.

Struktur

HTML-Elemente sollten entsprechend Ihrer Funktion als semantische Gliederungsbefehle verstanden werden.

Darstellung

Websites sollten nicht nur für grafische Browser gestaltet werden. Sie sollten Plattform übergreifend (z. B. durch Screenreader) nutzbar sein und von verschiedenen Browsern dargestellt werden können.

Abwärtskompatibel

Bereits in der Projektplanung sollte daran gedacht werden dass Angebote nicht nur mit dem neusten Browser und aktuellen Plugins genutzt werden können. In der Navigation sollte auf JavaApplet oder Flash-Umsetzungen verzichtet werden. Wenn auf bestimmte Funktionen nicht verzichtet werden kann die problematisch sein könnten, sollten entsprechende Alternativen bereitgestellt werden.

Usability

Sorgen Sie für eine bestmögliche Benutzbarkeit des Webangebot. Überprüfen Sie bereits das Screendesign auf Bedienbarkeit um mögliche Schwachstellen zu erkennen.

Webstandards

Bei der Umsetzung sind die Webstandards des W3C zu beachten. Der ausgegebene Quellcode sollte wohlgeformt sein und mit den vom W3C bereitgestellten Validatoren getestet werden.

Testing

Das Webprojekt sollte während der gesamten Entwicklungsphase immer wieder Tests unterzogen werden, um mögliche Fehler aufzudecken. Am einfachsten ist der Test des Codes auf syntaktische Korrektheit (Validierung).

Fazit

Der Begriff der Barrierefreiheit ist mittlerweile nicht nur ein reines Marketingversprechen, sondern es sprechen handfeste Argumente dafür auf barrierefreies Webdesign zu setzen. Barrierefreie Websites weisen eine bessere Bedienbarkeit (Usability) auf, haben eine höhere Reichweite, sind für Suchmaschinen zugänglicher und die möglichen Kosteneinsparungen sprechen für eine durchgängig barrierefreie Gestaltung von Webseiten. Tatsache ist, das Barrierefreies Webdesign von vielen Webentwicklern immer noch ingrnoriert wird oder falsch verstanden wird.

Links


nach oben


CSS-Design: Grundlagen Druck-Stylesheets

(vom 28.10.2007) Druck-Stylesheets sollten prinzipiell fester Bestandteil einer jeden guten Website sein. Der allgemeine Gebrauchswert einer Website wird gesteigert und sorgt für zufriedene Benutzer.

Zugänglichkeiten fixer-, fluider oder elastischer Layouts

(vom 10.09.2007) Welche Vorgehensweise beim Layout eignet sich für die Gestaltung von zugänglichen Websites am besten? Jede Layout-Variante bietet Vor- und Nachteile. Wenn Sie eine zugängliche Website erstellen wollen oder müssen, sollte bereits in der Entwurfsphase berücksichtigt werden, mit welchem Layout der Entwurf umgesetzt werden kann.

Sprungmarken setzen und Zugänglichkeiten maskieren

(vom: 15.07.2007) Sprungmarken bilden ein nützliches Element in Dokumenten und unterstützen vor allem bei komplexen Dokumenten die schnelle Navigation und Zielfindung. Die dargestellten Empfehlungen dienen der Orientierung und dokumentierten einen Schritt in Richtung Usability und Barrierefreiheit zu gehen.

Checkliste barrierefreier Webanwendungen

(vom: 01.07.2007) Die Vorteile barrierefreier Webauftritte liegen klar auf der Hand und sind weitgehend anerkannt. Mit einer Checkliste zur Gestaltung barrierefreier Webanwendungen und Webauftritte können Auftraggeber sicherstellen das Vorgaben erfüllt werden und die Agenturauswahl ein wenig erleichtert wird.
» zur Checkliste