barrierefreie Infobox / Tooltip

[apsel]

Om nah hoo pez nyeetz!

Ich bastele grad im Selfhtml-wiki an einer Seite für Tooltipps, die möglichst barrierearm und benutzerfreundlich sein sollen.

Ansprüche an Barrierefreiheit: WIKI-Artikel

Problem: Durchsteppen mit der Tabulatortaste und Markierbarkeit des Textes schließen sich gegenseitig aus (Beispiel) weil ein funktionierender Link ein href erwartet.

Hat jemand 'ne Idee, wie sich das lösen lässt?

Matthias

[ChrisB]

Hi,

Problem: Durchsteppen mit der Tabulatortaste und Markierbarkeit des Textes schließen sich gegenseitig aus (Beispiel) weil ein funktionierender Link ein href erwartet.

Hat jemand 'ne Idee, wie sich das lösen lässt?

Kein Link nehmen, wenn es nichts zu verlinken gibt.

Fokussierbarkeit von beliebigen Elementen lässt sich durch Vergabe eines tabindex (von bspw. 0 oder -1) erreichen.

MfG ChrisB

[Malcolm Beck´s]

مرحبا

Fokussierbarkeit von beliebigen Elementen lässt sich durch Vergabe eines tabindex (von bspw. 0 oder -1) erreichen.

Mit tabindex="0" funktioniert sogar :active auf den betreffenden Elementen, selbst IE 8 im Standards-Modus kriegt es Sauber hin (Opera besteht weiterhin auf den Bugfix, aber es funktioniert -- bei mir jedenfalls).

http://dj-tut.de/sc-dir/n-infobox/

mfg

[Beat]

Problem: Durchsteppen mit der Tabulatortaste und Markierbarkeit des Textes schließen sich gegenseitig aus (Beispiel) weil ein funktionierender Link ein href erwartet.

Hat jemand 'ne Idee, wie sich das lösen lässt?

Du solltest den begriff "Tooltip" überdenken. Du willst nicht bestehende Browser-Funktionen nachbauen.
Im Übrigen gibt es die allumfassende Hover/Focus-Box nicht. Eine solche Box will etwas besonderes erreichen.
Je nach dem muss die Box dauerhaft offen bleiben, egal wohin du anschliessend klickst.

Ich bevorzuge eine CSS-Popup Box für Boxen, die sich halb-automatisch schliessen dürfen.
Ich habe diese auf
http://www.elcappuccino.ch/cgi/tok.pl
gelöst mittels :target
Dabei habe ich noch keinen JS Patch für Browser, die :target nicht unterstützen.

Anderseits: Als Kleine Info-Box für erweiterte Information dieses Code-Beispiel:
Es stellt einen Link zu einem externen Bild dar. (vermeide hotlinking)
Es soll erweiterte information angezeigt werden.

.....dass Bildlinks wie dieser  
<div class="img"><a href="http://localhost/bdeonline/static/ecbdeonline.gif" title="http://localhost/bdeonline/static/ecbdeonline.gif" target="_blank">Bild Öffnen</a> (info)  
<div>Inhalt: Logo zu BdE-Online<br>  
Ersteller: Beat Stoecklin<br>  
Eigentümer: Beat Stoecklin<br>  
</div>  
</div>  
im Textfluss erschei......

CSS

div.img  
  { display:inline; position:relative;  
    font-size:0.9px;  
    width: 26%; margin: 0.5em 0.5em 0.5em 0;  
    border: 1px solid #ccc; padding: 0 1em;  
   -moz-border-radius: 0.5em; }  
div.img div  
   {display:none; position:absolute; left:0; padding: 0.5em;  
   border:1px solid #ccc;  
   background-color:#fff; width:25em;  
   -moz-border-radius:inherit;}  
div.img:hover div, div.img a:focus + div  
  { display:block; }  
div.img a, a.externlink  
  { white-space:nowrap; }  
div.img a:before  
  { content: url( extlink.gif ) ;  
   vertical-align: middle ; padding: 0 2px; }  

mfg Beat

[apsel]

Du solltest den begriff "Tooltip" überdenken. Du willst nicht bestehende Browser-Funktionen nachbauen.

Ursprünglich wollte ich genau das, weil ich mit den Tooltips der Browser nicht zufrieden war. (Beispiel)

Im Übrigen gibt es die allumfassende Hover/Focus-Box nicht. Eine solche Box will etwas besonderes erreichen.

ACK, z.B. die unzureichende, weil nicht via CSS formatierbare Browser-Funktion für Tooltips umgehen

Ich bevorzuge eine CSS-Popup Box für Boxen, die sich halb-automatisch schliessen dürfen.

Sieht auch gut aus.

Dabei habe ich noch keinen JS Patch für Browser, die :target nicht unterstützen.

und das hast du auch nicht vor, wie ich bei dir gelesen habe.
("Ich lehne es ab, meine Seiten für Browser zu optimieren. Ich denke, dass das Internet aktualisierte Browser verlangt, die sich auch technisch weiterentwickeln, und so in der Lage sind, moderne Webpräsentationen befriedigend darzustellen.")

Anderseits: Als Kleine Info-Box für erweiterte Information dieses Code-Beispiel:

Das ist im Wesentlichen die angestrebte Lösung.

Matthias

[Malcolm Beck´s]

مرحبا

Hat jemand 'ne Idee, wie sich das lösen lässt?

Eine möglichkeit wäre noch <button>, stellt sich nur die Frage, wie Sinnvoll button an dieser stelle ist.

mfg

[apsel]

Om nah hoo pez nyeetz, Malcolm Beck´s!

tabindex funktioniert schon. Ich hab in einem ersten Versuch alle durchnummeriert, das ist natürlich kontraproduktiv, wenn man mal die Seite ändert. Für alle tabindex=0 hab ich noch nicht getestet.

Matthias

[Malcolm Beck´s]

مرحبا apsel

Ich hab in einem ersten Versuch alle durchnummeriert, das ist natürlich kontraproduktiv, wenn man mal die Seite ändert.

Das ist Generell keine gute Idee, da ja jede einzelne Seite eine unterschiedliche Anzahl Infoboxen haben kann.
Die Moderne Infobox soll ja möglichst Flexibel sein und den unnötigen eingriff ins HTML verhindern.
Da tabindex für einige Elemente leider nicht Valide ist, könnte man auch überlegen, diese via Javascript zu setzen, Bspw. für alle abbr-Elemente.

Für alle tabindex=0 hab ich noch nicht getestet.

In meinen Tests hat alles wunderbar geklappt, selbst :active.

mfg

[apsel]

Om nah hoo pez nyeetz, Malcolm Beck´s!

Da tabindex für einige Elemente leider nicht Valide ist, könnte man auch überlegen, diese via Javascript zu setzen, Bspw. für alle abbr-Elemente.

einige? - viele!

The following elements support the tabindex attribute: A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA. [HTML-Spezifikation]

Javascript widerspricht wiederum den Forderungen der Barrierefreiheit.

Also nächste Idee Linkelemente ohne href-Attribut aber mit tabindex. Das ist zumindest valides HTML, aber:

Was sagen die Semantiker dazu?

Matthias

[Malcolm Beck´s]

مرحبا

Was sagen die Semantiker dazu?

<http://de.selfhtml.org/html/referenz/elemente.htm#a@title=Definiert einen Anker oder einen Hyperlink>

Ich habe es jedenfalls mit Javascript gelöst, hat auch den Vorteil, das ich nur an 2 Dateien ran musste, und nicht an alle vorhandenen Datensätze.

mfg

[apsel]

Om nah hoo pez nyeetz, Malcolm Beck´s!

Was sagen die Semantiker dazu?

einen Anker

braucht das name-Attribut

oder einen Hyperlink]

braucht href.

zu JS: Es hat natürlich Vorteile, aber es geht hier nicht um ein konkretes Projekt, sondern vordergründig um den Wiki-Artikel, deshalb auch der Themenbereich.

Matthias