WAI Level AA - problem mit onmouseover/onkeydown

[Jan]

Hallo,
ich bin gerade dabei meine seiten nach den wai richtlinien zu testen, mit bobby.
Für das level AA soll ich noch etwas tun:
http://bobby.watchfire.com/bobby/bobbyServlet?advanced=true&URL=http%3A%2F%2Fwww.fractatulum.de%2Ffraccss%2F&gl=wcag1-aa&Text=text&line=line&an_errs=an_errs&stealth=Bobby%2F3.3&output=Submit
der einzig nötige punkt ist Priority 2.1, nun will ich, dass die
mouseover grafik auch mit onkeydown funktioniert aber wie funktioniert
das, da ja erstmal ein fokus auf die grafik muss damit onkeydown auch
funktioniert aber das macht in meinen augen keinen sinn, dass mit dem fokus und vorallem welche tast soll es auslösen und woher weiß das der user.

Was kann ich machen, damit der angemeckerte punkt berichtigt wird?

Gruss, Jan aus Dresden--
http://www.w3schools.com/css/css_examples.asp
http://www.oreillynet.com/pub/a/network/2000/07/21/magazine/css_anarchist.html
http://www.alistapart.com/stories/

[Jan]

Hallo nochmal,
statt onkeydown wäre ja vieleicht onfocus sinvoller aber wie bekomme ich den focus darauf via tastatur ohne die grafik als "imaginären" link zu deffinieren?

Gruss, Jan aus Dresden

[molily]

Hallo, Jan,

eines Vorweg: Der Bobby ist nichts als ein automatisches Programm, welches lediglich anhand einiger Hinweise im Quellcode unpräzise möglicherweise nicht zutreffende Warnungen und Hinweise ausgeben kann - mehr nicht, er ist nicht das Maß der Dinge und kann AAA-konforme Seiten bemängeln und womöglich nichtmal A-konforme Seiten theoretisch Fehlerfreiheit bescheinigen (zugegeben, ich übertreibe etwas). Genau wie der HTML Validator kann Bobby nichts darüber aussagen, ob die Seite sinnvoll und verständlich strukturiert ist usw., somit kann er die wichtigsten Zugänglichkeitskriterien nur als »User Checks« aufzählen (dazu gibt es aber auch die Checklisten).
Insofern bedeutet es keinesfalls, dass die Zugänglichkeit deiner Seite eingeschränkt ist, wenn Bobby einen »Error« ausgibt, zumindest trifft das meiner Auffassung nach in diesem speziellen Fall zu.

Der Hintergrund: Deine Seite enthält ein grafischen Effekt, welcher lediglich ein schön anzusehender »Gimmick« ist, selbst aber für das Verständnis des Seiteninhalts nicht nötig ist. Der/die BenutzerIn kann die Seite auch mit abgeschaltetem JavaScript problemlos lesen. Insofern ist es, auch wenn Bobby Gegenteiliges behauptet, weil er den Gesamtzusammenhang nicht erkennen kann, zumindest *nicht zwingend notwendig*, dass du diese Funktion ausweitest, sodass die Grafik über die Eingabetechniken zum Fokussieren von Links anwählbar ist.

Es ist meiner Meinung nach auch nicht *sinnvoll*, dass du diesen Hampelmanneffekt auf biegen und brechen für diejenigen NutzerInnen nachbaust, welche die Seite primär oder zusätzlich mit der Tastatur bedienen. Es wird in der Regel erwartet, dass mit der Tabulatortaste (oder über die Tasten »Q« und »A«) die Hyperlinks des Dokuments durchgeschaltet werden, deshalb wäre es absolut nicht ratsam und sogar eine Einschränkung der Zugänglichkeit, dass du um das Bild einen blinden Link setzt, welcher keine Zieladresse enthält. Angenommen, der/die BenutzerIn kann keine Grafik wahrnehmen beziehungsweise hat sie ausgeschaltet, so würde der Linktext »zieh den Hampel« lauten (bitte ändern in alt="Hampelmann" und stattdessen diese Aufforderung im title-Attribut unterbringen), was völlig verwirrend wäre, da beim Anwählen des Links wahrscheinlich nichts passieren würde beziehungsweise höchstens aufgrund von href="#" zum Dokumentanfang gesprungen wird (dies wiederum wäre extrem nervig).

Kurz gesagt sind viele Richtlinien Auslegungssache, das heißt, ihr Geltungsbereich ist unterschiedlich und hängt von der Interpretation ab. Generell solltest du dich nah an den Empfehlungen (http://www.w3.org/Consortium/Offices/Germany/Trans/WAI/webinhalt.html inklusive »Techniques«) halten, aber vor allem auch von Fall zu Fall abwägen, welche Richtlinien auf deine Seite überhaupt zutreffen und ob es im konkreten Fall nötig und sinnvoll ist, den Richtlinien zu folgen. (Bobby kann das nicht, er wirft pauschal immer denselben Fehler aus, wenn ihm ein onmouseover ohne onkeydown oder onfocus begegnet. *In einigen Fällen* mag es zutreffen, dass zusätzlich onkeydown/onfocus nötig ist, hier aber nicht.)

Auf den zweiten und dritten auf http://www.barrierefreies-webdesign.de/verweise/diverse.htm genannten Mailinglisten kannst du übrigens praxiserfahrene Leute fragen, wenn dir ein solcher Fall unklar ist beziehungsweise du nicht weißt, ob und wie du eine Richtlinie anwenden sollst, das heißt ob tatsächlich die Zugänglichkeit dadurch steigt. Generell gibt es viele hilfreiche Indikatoren, beispielsweise ob die Seite ohne Grafiken mit Lynx verständlich und voll navigierbar ist, ob die Farben invertierbar sind, ob die Links ohne ihren Kontext verständlich sind usw.

Speziell solltest du ändern:
<a href="index.htm"><span class="maroon">&#8226; </span>Startseite<span class="info">Hier geht es zur Startseite</span></a>

Ohne CSS wird folgender Linktext ausgegeben:
  StartseiteHier geht es zur Startseite

Vielleicht bekommst du es hin, dass der Linktext folgendermaßen »transformiert«:
  Startseite: Hier geht es zur Startseite

Möglicherweise würde schon folgendes reichen:
<a href="index.htm"><span class="maroon">&#8226; </span>Startseite<span style="display:none;">: </span><span class="info">Hier geht es zur Startseite</span></a>

(Übrigens habe ich ein schlechtes Beispiel gewählt, denn »Startseite: Hier geht es zur Startseite« ist redundant. Die anderen Erklärungstexte sind vielsagender gewählt.  Ein Link zum Überspringen der Navigation wäre vielleicht angebracht, vergleiche Richtlinie 13.6.)

der einzig nötige punkt ist Priority 2.1, nun will ich, dass die
mouseover grafik auch mit onkeydown funktioniert aber wie funktioniert
das, da ja erstmal ein fokus auf die grafik muss damit onkeydown auch
funktioniert aber das macht in meinen augen keinen sinn, dass mit dem fokus und vorallem welche tast soll es auslösen und woher weiß das der user.

Ja, es ist tatsächlich nicht logisch. Der Bobby sieht ein onmouseover und schreit, da er nicht weiß, dass es nur ein optionaler Effekt ist, der nichts Essentielles zur Folge hat.

statt onkeydown wäre ja vieleicht onfocus sinvoller aber wie bekomme ich den focus darauf via tastatur ohne die grafik als "imaginären" link zu deffinieren?

Gar nicht - es geht vor allem darum, welchen Nutzen es für den/die BenutzerIn hätte: Meiner Meinung nach keinen oder sogar einen negativen.

Was kann ich machen, damit der angemeckerte punkt berichtigt wird?

Die Meckerei vom Bobby ist hier nur zweirangig, er kann lediglich Impulse, Anhaltspunkte und Vorschläge geben. Wenn du auch bei der Benutzung der Tastatur zum Durchspringen der Links auf den Effekt nicht verzichten willst, benutze einen »blinden Link« und onfocus="flip(0,h);" bei diesem (onkeydown ist Blödsinn - der Event würde erst gefeuert, wenn der/die BenutzerIn schon in der Sackgasse des funktionsunfähigen Links wäre). Allen anderen Links (beziehungsweise den unmittelbar davor und danach stehenden) könntest du flip(0,n) bei onfocus vergeben (eventuell global durch eine Schleife). Dies würde im MSIE und Mozilla funktionieren, im Opera 6/7 nicht.
Von dieser Methode würde ich dir jedoch abraten, wie gesagt.

Grüße,
Mathias

[Jan]

Hallo,
erstmal vielen dank für die ausführliche antwort.

Es stimmt schon, dass der bobby etwas histerisch scheint.
In einigen fällen, die er überprüfungswürdig hält, fragt er ja immer nach ob diese und jenes der fall ist und wenn ja dann repariere es.
Nun stieß mir das "repair needed" etwas auf und scheinbar war ich nun histerisch obwohl du ja vollkommen recht hast, die grafik und der effekt haben eigentlich null informationsgehalt der verloren gehen könnte, sinnigerweise sollte das programm hier auch nachfragen und nicht eine reparatur fordern.
Ich lass es wie es ist.

Speziell solltest du ändern:
<a href="index.htm"><span class="maroon">&#8226; </span>Startseite<span class="info">Hier geht es zur Startseite</span></a>
Möglicherweise würde schon folgendes reichen:
<a href="index.htm"><span class="maroon">&#8226; </span>Startseite<span style="display:none;">: </span><span class="info">Hier geht es zur Startseite</span></a>

Ich teste ja auch mit lynx und es störte mich auch nur wusste ich nicht wie ich es besser machen könnte ohne ein zusätzliches zeichen, dass ich jenes auch auf display:none setzen kann kam mir ja überhaupt nicht in den sinn.
Danke für den tip.

(Übrigens habe ich ein schlechtes Beispiel gewählt, denn »Startseite: Hier geht es zur Startseite« ist redundant. Die anderen Erklärungstexte sind vielsagender gewählt.  Ein Link zum Überspringen der Navigation wäre vielleicht angebracht, vergleiche Richtlinie 13.6.)

Wenn ich das richtig verstehe, sollte ich sowas wie eine sitemap anlegen wenn ja, die gibt es schon, ist aber noch nicht fertig/online.

Nochmal danke für die antworten und tips!

Gruss, Jan aus Dresden