Tabindex oder Fokus für Tastaturnavigation

Ich mache im Moment viel Arbeit mit Barrierefreiheit und WCAG, aber eine Sache, die ich versuche, gut für alle Benutzer und vor allem diejenigen mit Tastaturnavigation zu arbeiten, ist ein Link zum Inhaltslink .Tabindex oder Fokus für Tastaturnavigation

Das klingt einfach zu tun, werfen Sie einen Link zu einem Anker im oberen Teil der Seite und die Leute können "klicken", um die Navigation oder andere weitgehend unwichtige Inhalte zu überspringen.

Das Problem ist jedoch, wenn Sie mit der Tastatur auf einen Ankerlink klicken und dann erneut die Tabulatortaste drücken, gelangen Sie direkt nach dem Link zum Inhalt und nicht zum nächsten zum Element Element im Hauptinhaltsbereich. Dh der Anker, mit dem Sie verlinkt haben, hat keinen Fokus erhalten.

Es scheint, dass dies ein häufiges Problem ist, weil ich noch eine Website mit einem "Skip to content" -Link finden muss, die dies richtig funktioniert. Sogar die Vision Australia Seite hat dieses Problem.

Ich hatte gehofft, dass jemand von einer Technik/Hack/Bibliothek wusste, um diese Arbeit so zu machen, wie es sollte.

EDIT: Ich kann bestätigen, dass dieses Problem in Chrome und Safari auftritt, aber nicht Firefox auf meinem Mac.

Quelle

2012-10-24 Christian

Dies ist eigentlich ein Chrome/WebKit-Problem; Es funktioniert wirklich gut in IE und FireFox unter Windows; Das Problem ist also, wie man einen Browser-Fehler umgehen kann, der HTML-Code selbst ist in Ordnung. – BrendanMcK

Die meisten Browser scrollen visuell zum Ziel des Links derselben Seite, stellen aber den Tastaturfokus nicht auf diesen Link. Sie können JavaScript (oder JQuery, wie im Beispiel unten) konzentrieren sich auf das Ziel zu geben verwenden:

$("a[href^='#']").not("a[href]='#'").click(function() { 
    $("#"+$(this).attr("href").slice(1)+"").focus(); 
});

Allerdings gibt es einen Fehler in WebKit, dass auch diese Lösung von der Arbeit in WebKit-Browsern wie Chrome und Safari verhindert . Ich schrieb einen Blog-Post auf das vor etwa einem Jahr, und einige andere haben darauf gebaut:

Quelle

2012-10-25 03:17:11

Während IE und Firefox das Zielelement nicht unbedingt fokussieren (einfache A's ohne Href sollen eigentlich gar keinen Fokus bekommen), verhalten sie sich doch richtig, indem der * nächste * Druck der TAB Taste * * Verschieben Sie den Fokus auf das nächste tabellierbare Objekt nach dem Ziel. Dies ist seit den frühen Versionen von IE seit langem bekannt. Chrome/WebKit zeichnet sich dadurch aus, dass nur scrollt und das Tabbing vom ursprünglichen Link und nicht von der Zielposition fortgesetzt wird. – BrendanMcK

Toller Beitrag, Terril. Ich mag das Konzept der Verknüpfung mit einer ID und nicht mit einem benannten Anker. Trotz der Mängel der Browser, wenn die Hauptbildschirmleser es richtig machen, denke ich, dass es besser (aber immer noch nicht perfekt.) – Christian

Tabindex oder Fokus für Tastaturnavigation

Antwort

Verwandte Themen