Web-Workshop: Accessibility genauer betrachtet

In unregelmäßigen Abständen veröffentlicht das World Wide Web Consortium (W3C) Empfehlungen, Arbeitsblätter und "Empfehlungsanwärter" auf ihre Web-Seiten. Die neueste Empfehlung trägt den Titel "Accessibility".

Das W3C ist gleichzeitig die wichtigste und am meisten ignorierte Gruppe. Dabei gehören schon lange nicht mehr nur Wissenschaftler dem Konsortium an - mindestens die Hälfte sind heute Firmenvertreter von Microsoft bis Adobe. Unermüdlich wird an der Weiterentwicklung des Webs gearbeitet, die letzte spektakuläre Neuerscheinung war sicherlich XML (wird berichteten). Hat sich eine Arbeitsgruppe erst einmal gefunden, wird ein Arbeitsblatt (Working Draft) erstellt, das auf Praxistauglichkeit überprüft wird und als Diskussionsgrundlage dient.

Der nächste Schritt ist der sogenannte Recommendation Candidate. Dies ist die letzte Stufe bevor das Dokument in Kraft tritt und eine Empfehlung wird.

Obwohl dem W3C lauter Firmenvertreter angehören, heißt dies noch lange nicht, dass sich diese bei der Implementierung der Standards besonders beeilen würden. So wird jetzt schon an CSS3 gefeilt, obwohl die Browser nur äußerst lückenhaften CSS2-Support bieten.

Accessibility

Die neueste Empfehlung trägt den Namen "Accessibility". Die Richtlinie beschäftigt sich mit einem Thema, das bei Web-Designern und -Programmierern bisher kaum Berücksichtigung findet: die Bereitstellung von Inhalten für Blinde und Sehgeschädigte und andere Personengruppen. Ihnen bleiben bestimmte Bereiche des World Wide Web verschlossen.

Bleiben wir bei der erwähnten Personengruppe. Blinde benötigen zur Bedienung eines Computers einige Hilfsmittel, die einerseits sehr teuer, aber andererseits gefördert werden. Als erstes gibt es die Braillezeile, die eine bestimmte Zeile auf dem Bildschirm in Punktschrift darstellt. Die gewünschte Zeile kann ausgewählt werden und manche Braillezeilen verfügen über eine Sprachausgabe, die sich verdächtig nach "ST_SPEECH" anhört. Mit dieser Braillezeile lassen sich Programme im Textmodus relativ gut bedienen.

Die Verbreitung grafischer Benutzeroberflächen erfordert natürlich leistungsfähigere Software, denn der Bildschirm ist nicht mehr ein festes Raster, auf dem jedes Zeichen einen bestimmten Platz hat. Da Ausgaben grundsätzlich im Grafikmodus erfolgen, muß sich die Software dem anpassen. Mit Windows kam allerdings auch etwas, mit dem keine Braille-Software fertig wird: Grafiken. Icons sind kaum ein Problem, da sie meistens über einem Dateinamen stehen. Wenn allerdings ein Programm statt der OK- und Abbruch-Buttons zwei Grafiken nimmt, bleibt deren Bedeutung im Dunkeln.

Das gleiche Problem existiert auch im World Wide Web. Das WWW mit seinen grafischen Möglichkeiten hat viele andere Dienste in den Schatten gestellt und einige Seiten lassen sich nur schwer mit Screenreader-Software erschließen: Frames, mehrere Spalten, Flash und Grafiknavigation.

Neben den Gruppen, die aufgrund von Behinderungen auf spezielle Software angewiesen sind, gibt es eine andere wachsende Gruppe: die PDA-Benutzer. Grundsätzlich geht die Tendenz dahin, das jedes Gerät Internet-fähig ist. Aber bis auf den PC und Fernseher wird kaum ein Gerät mit einem 17"-Bildschirm ausgestattet werden, um in 1024x768 alle Webseiten darzustellen - oder können Sie sich vorstellen, mit einer Armband Uhr mit eingebautem 17" TFT-Bildschirm herumzulaufen? Ein Browser auf solch einer Plattform muß zwangsläufig die Webseiten umformen, damit sie überhaupt angezeigt werden können.

Die Initiative des W3C richtet sich an Software-Produzenten (Web-Browser, Mediaplayer) und Webmaster gleichermaßen. In dieser Ausgabe soll lediglich letzteres erläutert werden.

Maßnahmen

Eine Web-Seite, die den Ansprüchen des W3C genügt, ist praktisch kompatibel mit allen Browsern. Es ist den Autoren der Empfehlung durchaus bewußt, das z.B. Webseiten in Lynx (textorientierter Browser) nicht so gut aussehen können wie in Adamas. Die Vorschläge zielen darauf ab, den Inhalt einer Web-Seite jedem zugänglich zu machen.

Es gibt auch ein paar nützliche Nebeneffekte, die einige Seitenbetreiber überzeugen sollten:

Struktur von Aussehen trennen

Um das Anpassen von Webseiten an verschiedene Ausgabegeräte zu erleichtern, muss der Inhalt vom Aussehen getrennt werden. Am besten sind dazu Stylesheets geeignet, da diese notfalls auch durch den Browser deaktivierbar sind. Die Stylesheets sollten natürlich in eine externe Datei verschoben werden, denn InLine-Stylesheets wie diese

<td style="height:100%;width:100%;vertical-align:top">

sind zwar im Gegensatz zu

<td height="100%" width="100%" valign="top">

"korrekter" und moderner, aber letztendlich nicht einfacher zu pflegen. Einige InLine-Stylesheets werden übrigens auch von HighWire unterstützt, während Adamas mit Version 2.0 volle CSS-Unterstützung bringt.

Ist der Content erst einmal vom Aussehen getrennt, lässt sich dieser vielfältig einsetzen - so könnten verschiedene Web-Projekte die gleichen Daten benutzen, und diese mit Stylesheets jeweils in ihr Layout integrieren.

Ein externes Stylesheet wird gecached. Bei manchen Web-Projekten lassen sich einige KB einsparen und die Seite wird dadurch schneller.

Sehr schick sind personalisierbare Web-Seiten. Atari-Portale wie Atari-Source, Atari-Users.net, oder GemCandy können den gleichen Inhalt mit verschiedenen Layouts. Wer feststellt, das eine bestimmte Farbgebung auf einem TFT blass wirkt, schaltet einfach auf ein anderes Aussehen um.

Was hilft und auch von einigen Suchmaschinen benutzt wird, kann mit Stylesheets in die gewünschte Form gebracht werden:

<div class="blau">Headline</div>
<h1>Headline</h1>

Beide Beispiele können gleich formatiert werden. Der Unterschied ist, das <h1> auch bei ausgeschalteten Stylesheets eine Überschrift bleibt und das erste Beispiel auf normale Schriftgröße schrumpft. Anhand der unterschiedlichen Headlinegrößen (also <h1> bis <h6>) erkennen manche Suchmaschinen die Struktur und auch Screenreader profitieren davon. Weiteres Plus: Der Benutzer kann sich relativ einfach ein eigenes Stylesheet definieren.

Bilder

Das W3C wendet sich weder gegen Bilder, noch gegen Frames oder Tabellen. Für erste wurden Vorschläge gemacht, mit der die Kompatibilität mit Screenreadern und Spezial-Browsern sichergestellt werden soll.

Zunächst wäre da das gute, alte ALT-Attribut. Dieses ist eigentlich seit HTML 4.0 vorgeschrieben und wird auch von den meisten HTML-Editoren ausgegeben. Beim Schreiben per Hand wird es hingegen oft vergessen. Im ALT-Attribut sollte eine kurze Beschreibung des Bildes stehen:

<img src="grafiken/foto.jpg" alt="Ferien auf Texel." width="350" height="201">

Bei der Gelegenheit kann auch gleich eine Regel von XHTML beachtet werden (obwohl dies kein XHTML-Kurs ist): Tags werden grundsätzlich klein geschrieben, ihre Parameter in Anführungszeichen gesetzt.

Einige Bilder sollten einen leeren ALT-Wert erhalten. Dazu zählen die sogenannten "Fill-GIFs", Grafiken, deren einziger Zweck es ist, den Inhalt in eine bestimmte Form zu bringen:

<img src="grafiken/fill.gif" alt="" width="5" height="50">

Für besonders wichtige Bilder, die zum Verständnis der Seite notwendig sind, hat das W3C ein weiteres Attribut eingeführt: LONGDESC. Damit wird eine längere Beschreibung definiert, die z.B. eine Chart-Grafik erklärt:

<img src="grafiken/foto.jpg" alt="Ferien auf Texel." longdesc="ferien.html"
 width="350" height="201">

Browser die das Attribut unterstützen, werden einen optionalen Link auf "ferien.html" anbieten.

Image-Maps

Die beliebten Image-Maps sind ein weiteres Hindernis, an dem viele Spezial-Browser scheitern. Deshalb sollte unter jeder Image-Map eine Linkliste mit den Verweisen des Bildes stehen.

![ ](/

<IMG "SRC="img/stc.gif" ALT="Image-Map:Bitte benutzen Sie die Links")

SRC="img/stc.gif" ALT="Image-Map:Bitte benutzen Sie die Links am Ende dieser Map."
TITLE="Die Navigation der st-computer"
USEMAP="#map1" BORDER=0>
<MAP NAME="map1">
<AREA COORDS="0,0,39,39" HREF="aktuell.htm" ALT="Zur aktuellen Ausgabe.">
<AREA COORDS="40,0,79,39" HREF="uptodate.htm" ALT="Uptodate-Liste.">
<AREA COORDS="80,0,120,39" HREF="kontakt.htm" ALT="Kontakt zur Redaktion.">
<AREA COORDS="121,0,160,39" HREF="impress.htm" ALT="Impressum dieser Seite">
</MAP>
[ <A HREF="aktuell.htm">Zur aktuellen Ausgabe</A>
¦ <A HREF="uptodate.htm">Uptodate-Liste</A>
¦ <A HREF="kontakt.htm">Kontakt</A>
¦ <A HREF="impress.htm">Impressum</A> ]

Multimedia

Multimedia-Objekte wie Filme oder Sound-Dateien können nicht vollständig durch Texte ersetzt werden. Wie bei Bildern sollte aber eine Beschreibung hinzugefügt werden, die bei Bedarf angezeigt wird:

<OBJECT data="atarist.mov" type="movie/mov" height=100 width=100>
Mein Atari ST im Video-Portrait. 
</OBJECT>

Der Text wird nur dann angezeigt, wenn das Objekt nicht angezeigt werden konnte.

Das LINK-Tag

Dieses Tag ist schon fast in Vergessenheit geraten. Auf dem Atari unterstützte nur CAB dieses Tag, dass die Navigation erheblich erleichtert. Anders sieht es bei den Spezialbrowsern aus, die Link-Tags auf zum Teil unterschiedliche Weise interpretieren. Ein kleiner Lichtblick: mit Mozilla erhält das Link-Tag Unterstützung durch einen "Mainstream-Browser":

	<LINK rel="Next" href="impressum.html">
	<LINK rel="Prev" href="news.html">
	<LINK rel="Start" href="index.html">
	<LINK rel="Glossary" href="glossar.html">

Würden alle Seiten diese Navigation unterstützen, stünde eine immer gleiche Navigation zur Verfügung in Ergänzung zu der Webseiten-Navigation. Mozilla blendet eine zusätzliche Navigationsleiste ein, sobald Link-Tags festgestellt werden.

Aber das LINK-Tag ist noch mächtiger. Folgendes Beispiel führt Textbrowser und spezielle Braillesoftware auf eine separate Seite:

<LINK title="nur-Text Version" rel="alternate" href="start.php?look=text"
 media="aural, braille, tty">

Wer fit in PHP ist und seine Seite auf Template-Basis angelegt hat, ist natürlich fein raus, denn die PHP-Seite kann dann einfach ein Alternativ-Template laden. Die Webpräsenz der st-computer ist eine solche Seite. Mit nur wenig Aufwand konnte eine Alternativ-Version erstellt werden, die noch etwas schlanker ist und keine Tabellen benutzt (Bild). Wie man sieht: eine schöne Webseite kann nichts entstellen...

Die Sprache

Es kommt durchaus vor, das sich auf einer Webseite mehrere Sprachen tummeln. Damit sind nicht etwa Anglizismen gemeint, sondern so etwas

"Je t'aime", lallte er und die spröde Schönheit 
antwortete: "You're making me depressed!"

Ein Programm, das mittels Sprachausgabe einen Text vorliest, wird bei diesem Satz zwar nicht ins Schleudern kommen, aber zumindest noch komischer klingen, als es das ohnehin schon tut. Die Zeiten, in denen Sprachausgabe grundsätzlich in amerikanischem Englisch erfolgten, sind aber zum Glück vorbei. Damit das Programm die richtigen Audiodaten für die jeweilige Sprache auswählt, braucht es etwas Nachhilfe:

<span lang="fr">"Je t'aime"</span>, lallte er 
und die spröde Schönheit antwortete: 
<span lang="en">"You're making me depressed!"</span>

Nicht nur die Sprachausgabe kann darauf reagieren, auch Braille-Übersetzungsprogramme profitieren von der eindeutigen Identifizierbarkeit einer Sprache.

Die primäre Sprache wird im <HTML>-Tag festgelegt:

<html lang="de">

Erklärungen

Von der Erklärung von Fachbegriffen profitiert jeder. Was in der st-computer unter "Apropos..." steht, löst das W3C mit dem <ABBR>- und <ACRONYM>-Tag:

Willkommen auf den Webseiten der 
<abbr title="st-computer">st-c</abbr>!

Das Title-Attribut ist ohnehin ein gutes Mittel, um Erläuterungen im Text zu plazieren. Leider wird es noch von keinem Atari-Browser unterstützt.

Keyboard-Shortcuts

Eine Seite läßt sich noch schneller bedienen, wenn ein paar Shortcuts eingerichtet wurden. Das ist nicht schwer und erfordert auch kein JavaScript. Mit dem Attribut ACCESSKEY können Formular-Felder und Links mit Shortcuts ausgestattet werden:

<a href="#top" title="Zum Anfang der Seite" accesskey="h">

Mit Alt+H wird in Browsern, die das Attribut unterstützen, der Link angesprochen. Der Browser führt den Link jedoch noch nicht aus, sondern verschiebt nur den Fokus. Der Benutzer muss noch die Return-Taste drücken, um wirklich zum Seitenanfang zu gelangen.

Praktisch ist das Attribut bei Formularen, die sich dadurch sehr schnell bedienen lassen. Für die Shortcuts sollte es eine extra Seite, ähnlich einer Legende, geben, die alle Tastaturkommandos auflistet.

Eine weitere Möglichkeit, die Seite per Tastatur erschließbar zu machen, ist die Tabular-Reihenfolge. Viele Browser gestatten das Springen von Verweis zu Verweis mit der Tab-Taste. Es gibt nun ein Attribut, mit der die Springreihenfolge kontrolliert werden kann:

<A HREF="aktuell.htm" tabindex="2">Zur aktuellen Ausgabe</A>
<A HREF="uptodate.htm" tabindex="1">Uptodate-Liste</A>

Dank einem niedrigeren Tabindex-Wert steht der zweite Link in der Tabulator-Reihenfolge ganz oben. Das schöne: das Tabindex-Attribut ist sehr verbreitet.

HTML-Validator

Bevor der Kurs für diesen Monat beendet wird, noch ein kleiner Web-Tipp. Auf den Webseiten des W3C finden sich nicht nur viele Arbeitspapiere, sondern auch einige nützliche Programme. Um schnell und systemunabhängig Seiten überprüfen zu können, gibt es den HTML-Validator. Es ist grundsätzlich schon ein gutes Zeichen, wenn die Seite als gültiges HTML 4 durchgeht. Wie bei allen Validatoren entstehen aber auch bei relativ "sauberen" Seiten viele Fehlermeldungen. Die meisten davon beziehen sich auf Attribute, die nicht unterstützt werden:

<table bgcolor="#ffffff">

Die alternative Schreibweise lautet:

<table style="background-color:#ffffff">

Wird eine Hintergrundfarbe im Body-Tag definiert, sollte sie auch mit Stylesheets erfolgen - ansonsten könnte es eine böse Überraschung geben, falls der Browser die Farbe in der Tabelle ignoriert, aber im Body-Tag nicht.

http:/validator.w3.org/


Mia Jaap
Aus: ST-Computer 01 / 2003, Seite 22
Links
Copyright-Bestimmungen: siehe Über diese Seite