Menu
I'm working on a web app, and one of the repeated a (anchor) elements does not get keyboard focus as I tab through the page. Only if I add tabindex=0 can I tab to it.
(Although my goal is to make the focus visible, I'm determining whether an element gets focus by using a snippet of jQuery:
// Whenever I hit tab, show me which element has focus
$('main').on('keydown',function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
console.log("focus is now on ", $(':focus'));
}
});
)
This confuses me. According to the specs, "The tabindex attribute can also make any element into interactive content" - but a is one of the ones they list as interactive by default.
And again, from an accessibility article:
A [tabindex] value of 0 indicates that the element should be placed in the default navigation order. This allows elements that are not natively focusable (such as <div>, <span>, and <p>) to receive keyboard focus. Of course one should generally use links and form controls for all interactive elements... (http://webaim.org/techniques/keyboard/tabindex)
What would cause an anchor element to be skipped as I tab through the interactive elements of a page?
759
tabindex="0" means that the element should be focusable in sequential keyboard navigation, after any positive tabindex values and its order is defined by the document's source order.
A tabindex value of zero A tabindex equals to exactly zero will place the element in the default focus order, determined by its position in the source HTML. It can be applied to elements that are not typically focusable, and will add them to the natural focus order as if they were.
Definition and Usage The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating). The tabindex attribute can be used on any HTML element (it will validate on any HTML element.
The tabindex attribute of 1+ explicitly defines the navigation order for focusable elements (typically links and form controls) within a page. It can also be used to define whether elements should be focusable or not.
As per your question:
What would cause an anchor element to be skipped as I tab through the interactive elements of a page?
If you add tabindex="-1" the element will be skipped.
And if your <a> tag has no href, it will be skipped as well.
196
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
