barrierefreie Infobox / Tooltip

[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