www.lipfert-malik.de>webdesign>tutorial>barrierefrei Impressum

Barrierefrei: Webdesign für Alle

Kristof Lipfert
Dipl.-Des.(FH)

Barrierefreies Webdesign ist ein Thema für alle Webauftritte.

Erklärung

Alle genannten Marken- und Produktbezeichnungen sind Warenzeichen der entsprechenden Inhaber. Keine Haftung für hier vorgestellte Verfahren. Hier wiedergegebene Verfahren und Methoden werden ohne Rücksicht auf die Patentlage dargestellt. Trotz sorgfältiger Arbeit können Fehler nicht ausgeschlossen werden. Scripte sind teilweise verkürzt. Es gilt ausschließlich deutsches Recht. Copyright © 10/2002-12/2004 Kristof Lipfert, Lipfert & Malik GbR Düsseldorf Web-Design, Alle Rechte vorbehalten einschließlich Vervielfältigung, Übersetzung, elektronische Speicherung und Verarbeitung. Veröffentlichung, auch auszugsweise, nur mit schriftlicher Genehmigung des Autors Kontakt.

WA-Hack display:none ersetzen

Zusätzliche Links und Sprungmarken sollen die Barrierefreiheit verbessern, so kann ein Sehbehinderter ein langes Auswahlmenu überspringen und zügig zum Seiteninhalt gelangen. Versteckt wurden diese Links früher üblicherweise durch eine Styleanweisung display:none. Viele Screenreader verhalten sich offenbar falsch oder halten sich genauer an den möglichen Bildschirminhalt und befolgen die Anweisung display:none. Auch mittles Media-Angaben, etwa aural, läßt sich hier nicht abhelfen.

Wichtig ist hier auch der Hinweis auf die Software "webform", http://www.webformator.com, dort heißt es u.a., Zitat v.29.11.2004:

Webdesigner können mit dem WebFormator überprüfen, ob ihre Internetseiten auch für sehgeschädigte Surfer lesbar sind, vorausgesetzt ...

"webform" zeigt aber offenbar display:none einwandfrei an bzw. zeigt Elemente mit dieser Auszeichnung ausser wenn in den Voreinstellungen der Default verändert und "nur wirklich sichtbare Objekte zeigen" aktiviert wird, beim Einsatz als Kontrollwerkzeug muss also ggf. angepasst werden.

Fragwürdiger Ersatz

Etabliert hat sich nun z.Zt. offenbar ein an DHTML-Spielereien erinnernder CSS-Hack, nämlich sinngemäß folgende "rausschiebende" Codierung statt display:none:


.wai-unsichtbar{ position:absolute;
            left:1000px;width:900px;}

Nun konnte ich beim etwas drastischeren Einsatz solcher Methoden mit left:-999em;width:777em; (angewandt in "fixed" positionierten Listen) bei Mozilla und FireFox reproduzierbare Darstellungsfehler bis zum Absturz beobachten. Auch bei kleineren Werten wie -250em waren beim Einsatz ausgerechnet der Schriftgrössenverstellung, also Text-Zoom z.B. bei 90 oder 120 Prozent, Fehler - wohl auch abhängig vom Betriebssystem- zu beobachten. Deshalb sollte m.E. bei desem Hack auf die potentiellen Gefahren hingewiesen werden.

Alternative Methode

Um einen einfachen und veträglicheren Weg zu beschreiten habe ich erstmal Elementhöhe und ggf. die Farbe gewählt, und hoffte erstmal mit overflow:hidden, welches aber auch nicht so gut für Screenreaer geeignet ist, verläßlich Darstellungsreste und Scrollbalken verhindert zu haben:


 .keincss { height:0px;
            overflow:hidden;
            color:white;    }

Zugleich kann nun ggf. per CSS-Weiche für Netscape 4 display:none eingesetzt werden. Diese Vorgehensweise wäre sowieso auch bei der position:absolute nötig gewesen, denn Netscape 4 mit absoluten Positionierungen zu versorgen ist zwar gut möglich, hat aber je nach Seitenaufbau gravierende Nachteile wie Resize-Bug oder höhere Instabilität.

weitere Fehler beim position:absolute Hack und IE 4, NN 4

Problematisch ist der position:absolute Hack wie dargelegt für Netscape 4, denn die Anweisung kann Resize-Bugs bedingen, stabile Layouts stören und bei einigen Elementen gar nicht funktionieren.

Und auch beim Internet Explorer 4 sind mit der Anwendung des position:absolute Hack bei bestimmten Elementen erkennbare Probleme möglich, im einfachsten Fall werden die Elemente einfach angezeigt, zugleich werden aber dann u.U. bereits Nachbarelemente verschoben.

Kompatibel

Die position:absolute-Methode ist also keineswegs per se für Netscape 4 geeignet, hier wird display:none eingesetzt. Mit visibility:hidden können Fehler bei Opera 6 vermieden werden, der Code sieht jetzt so aus:


 .keincss, .keincss * {
              height:0px;
              overflow:hidden;
              color:white;
              visibility:hidden; }
 /*/*//*/\{! i{}
 .keincss  {  display:none;      }
 *}{}/* */

Nachdem ja wie dargelegt overflow:hidden, wenn auch nicht so umfassend wie display:none, von einigen Screenreadern ungeeignet behandelt wird, beschränkt sich der Einsatz erstmal auf Opera 6 bzw. erfolgt perCSS-Weiche für Opera 6, da dieser Browser sonst falsch anzeigt; zugleich wird für Internet Explorer 4 nachgeholfen bei dem der position-Hack oft wirkungslos bleibt:


 .keincss , .keincss *   {
            height:0px;
            overflow:hidden;    }

html * body .keincss, [xfilter] {
            visibility:hidden;   }

 /*/*//*/\{! i{}
 .keincss  {  display:none;      }
 *}{}/* */

   * html * body .keincss {
              display:none;      }

Alternative

Da nicht viele Möglichkeiten zur Verfügung stehen und unklar ist wann das Screenreaderverhalten durch Vorgaben des W3C eindeutiger ansprechbar ist, bleibt wohl derzeit als Alternative zu height:0px; nur noch die eingangs erwähnte Methode mit folgenden allgemeinen Hinweisen und einem kleinen Restrisiko:

Vorsicht bei Elementen aus per position:fixed beschriebenen Ebenen
Keine Angaben mit em, sondern px verwenden
Vorsicht bei grossen Werten, unter 2000px (1000px?) bleiben
Ersatzmethode für Netscape 4 verwenden
Ersatzmethode für IE 4 verwenden

Accesskeys für Netscape 4

Bei Netscape 4 ist es kaum möglich, mittels Tab-Taste die Links zu durchlaufen, die meisten Formatierungen per CSS können hier bereits stören.

Als Ersatz können mit dem folgenden Skribt Accesskeys automatisch per JavaScript generiert werden, dabei wird hier immer der erste Buchstabe des Linktextes als Grossbuchstabe, also Shift +, gewählt.

/* Kristof Lipfert Duesseldorf 2001-2002 */

if(document.ids){ window.onload=function(){
function doLinksArray(){ var c=0;LA=[];
for(g=0;g<document.links.length;g++){
LA[c++]=document.links[g];}
with([window.document]){while(length){with(shift()){
for(i=0;i<layers.length;i++){
if(layers[i].document.links)
for(g=0;g<layers[i].document.links.length;g++){
LA[c++]=layers[i].document.links[g];}
unshift(layers[i].document);
}}}}}
doLinksArray();
document.onkeydown=function(e){
if(e.modifiers&&Event.SHIFT_MASK)
if(e.which){var Taste=String.fromCharCode(e.which);
for(j=0;j<LA.length;j++){
if(LA[j].text&&LA[j].text.substr(0,1).toUpperCase()==Taste)
location.href=LA[j].href;}}}
self.focus();}}

Beim vorgestellten Script wird vom Document und von allen vorhandenen Layern ein Array aller Links erstellt und mit Accesskeys versehen, die aus dem Anfangsbuchstaben des Link-Text und Shift bestehen.