Opera bietet gerade Tastaturnutzern eine interessante Möglichkeit sich innerhalb eines Dokuments mit der Tastatur zu bewegen.
Ähnlich wie bei Screenreadern kann man mit den Tasten W und S die einzelnen Überschriften anspringen.
Jan Eric hatte nun die Idee unsichtbare Überschriften bei onfocus einzublenden und hervorzuheben. Den meisten wird dieses Prinzip von den Sprungmarken her bekannt sein.
Er bat mich ihm bei der Erstellung einer entsprechenden Javascriptfunktion zu helfen. Ich selbst bin nicht gerade der Javascript-Experte, aber mit Hilfe der netten Anleitung von Chris Heilmann auf ichwill.net hat es dann doch ganz gut geklappt.
Das nachfolgenden Skript erfüllt zwei unterschiedliche Aufgaben. Es blenden, die zuvor ausgeblendeten Strukturüberschriften bei onfocus ein und bei onblur wieder aus.Gleichzeitig bietet es die Möglichkeit Navigationselemente bei onfocus der Strukturüberschriften gestalterisch hervorzuheben.
Jan zeichnet seine Strukturnavigation in diesem Beispiel mit eine h6 aus.
{
// Suche Überschriften der Ordnung h6
var heads=document.getElementsByTagName(’h6′);
for(var i=0;i<heads.length;i++)
// Suche darin nach der Klasse ausblenden und setze sie bei onfocus auf einblenden
{
if (heads[i].className == ‘ausblenden’)
{
var tohide=heads[i] ;
cssjs(’add’,tohide,’ausblenden’)
heads[i].tohide=tohide;
heads[i].onfocus=function()
{
cssjs(’add’,this.tohide,’einblenden’);
cssjs(’remove’,this,’ausblenden’);
}
// bei onblur klasse wieder auf ausblenden
heads[i].onblur=function()
{
cssjs(’swap’,this.tohide,’einblenden’,'ausblenden’);
}
}
// Struktur hervorheben , Suche nach klasse unsichtbar
if (heads[i].className == ‘unsichtbar’) {
// bei onfocus Suche nach Element mit der Klasse strukturHighlighting und Klassenwechsel
heads[i].onfocus=function()
{
test=getElementsByClassName(document, ‘div’, ’strukturHighlighting’)
for(var i=0;i<test.length;i++)
{
cssjs(’swap’,test[i],’strukturHighlighting’,'hervorhebung’);
}
}
heads[i].onblur=function()
{
test=getElementsByClassName(document, ‘div’, ‘hervorhebung’)
for(var i=0;i<test.length;i++)
{
cssjs(’swap’,test[i],’hervorhebung’,’strukturHighlighting’);
}
}
}
}
}
// Funktion für den Wechsel der Klassennamen
function cssjs(a,o,c1,c2)
{
switch (a){
case ’swap’:
o.className=!cssjs(’check’,o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);
break;
case ‘add’:
if(!cssjs(’check’,o,c1)){o.className+=o.className?’ ‘+c1:c1;}
break;
case ‘remove’:
var rep=o.className.match(’ ‘+c1)?’ ‘+c1:c1;
o.className=o.className.replace(rep,”);
break;
case ‘check’:
return new RegExp(’\\b’+c1+’\\b’).test(o.className)
break;
}
}
window.onload=klassen;
// Funktion zum Suchen einer bestimmten Klasse im gesamten Dokument
function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/-/g, "\-");
var oRegExp = new RegExp("(^|\s)" + strClassName + "(\s|$)");
var oElement;
for(var i=0; i<arrElements.length; i++){
oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}
Beispiel auf Jans Seite ansehen
