tabindex -1 not working for child elements

html accessibility tabindex
Adarsh Konchady picture Adarsh Konchady · Mar 13, 2017 · Viewed 16k times · Source

I have a div tag with some content getting loaded inside it. The content inside can have buttons, anchor elements, etc. which are focusable. I do not have control over the content but I can modify the 'div' tag attributes.

My problem is the focus still goes to the content (anchor, buttons, etc.) even if I specify the tabIndex -1 to the div tag.

Is there a way to skip the entire content while tabbing ? It's certainly not working with the above code.

Answer

Nordling Art picture Nordling Art · Jun 26, 2019

Not sure why nobody has mentioned visibility: hidden yet. Setting display: none can in some cases mess up logic when dealing with dimensions of non-visual elements. visibility will persist the dimensions just like opacity: 0 would do, but also disable any tabbable children.

Example:

<div style="visibility: hidden;">
    <a href="#">I'm only tabbable if my parent is visible!</a>
</div>

Related questions

Adding tabindex dynamically

I'd like to add tabindex to all form elements. The form is dynamic and I can't add it to the HTML. I would like to run it as a function. If there are several radio buttons with the same name, …

Read More
Can I ignore some website element when navigating using the tab key?

As question really. I have an input box on my page that I would like to ignore when navigating using the keyboard tab key. I'm using this input box as a simple bot honeytrap and positioning it off the page, …

Read More
Add tabindex / focus to buttons in Safari without changing default browser preferences

When navigating a form using the keyboard, button elements don't gain focus in Safari (tested in v8.0 on Yosemite). This is unless tabbing is explicitly turned under Preferences --> Advanced. Is there any way to get around this? http://…

Read More