2017-02-07 1 views
0

Ich habe eine Frage zum folgenden Code. Der Code wird verwendet, um den Fokus auf das Element #skipcontent zu erzwingen, wenn der Benutzer in das Fenster wechselt. Das Problem, das ich habe, ist, dass, wenn ich den ganzen Weg durch die Seite durchgebe und wieder in der Adressleiste lande, ich nicht zurück in das Fenster einsteigen kann. Gibt es irgendwelche Vorschläge, warum dies passieren könnte? & vielleicht ein besserer Weg, dies zu erreichen? Fokus zu zwingen, zu dem '#skiptocontent' Element, wenn die Benutzer Registerkarten in das FensterForced Tab Focus

$(window).keydown(function(e) { 
 
    if(e.keyCode === 9 && $("#skiptocontent a") !== undefined && $("#skiptocontent a").attr("data-focused") === "false") {  
 
    $("#skiptocontent a").focus(); 
 
    $("#skiptocontent a").attr("data-focused", "true"); 
 
    return false; 
 
    } 
 
    return true; 
 
});

+0

Hat das Element tatsächlich einen Tab-Index? (Edit: Ich falsch gelesen, aber die Verwendung von Tab-Indexes scheint immer noch wie die Lösung) – DBS

+1

Tun Sie dies nicht. Gib stattdessen 'tabindex =" 1 "'. – Ryan

+3

Das Erzwingen des Fokus auf ein bestimmtes Element ist schlecht für die Barrierefreiheit. Sie sollten den Browser nativ behandeln lassen. Attribute wie 'tabindex' und' autofocus' können verwendet werden, um dem Browser mitzuteilen, was Sie gerne tun würden. –

Antwort

1

Der Code wird verwendet.

  1. Ihr Sprung Link Machen Sie das erste tabable Element Ihrer Seite

Code:

<body> 
    <a href="#content" id="skipcontent">Skip to main content</a> 
  1. JavaScript entfernen.

  2. Das ist alles.

Hinweis: Wenn Sie die Sprung Link unsichtbar machen wollen, wenn es fokussiert ist, die ich entmutigen, weil es nicht mit Tastatur lose Zugänglichkeit Geräte verwendet werden können, gibt es nur Lösung eine Menge CSS (zB . what is the use of sr-only-focusable class in bootstrap?)