Disable tab binding if hidden by parent overflow: hidden

Question

I have a scrollable div with a list of links in it. Although I set the div to overflow:hidden to hide some links, they are still available when you use tabs in the browser. Is there a way to prevent this without using jquery?

 <div style="height: 5rem; overflow: hidden"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li> <li><a href="#">Link 8</a></li> <li><a href="#">Link 9</a></li> <li><a href="#">Link 10</a></li> </ul> </div> 

Answer 1

The short answer is no, as far as I know. This is because overflow: hidden; It is a visual modifier only and is not intended to limit functionality. This means that accessibility is designed to work. You must remove the functionality of the element in the DOM by hiding it ( display: none , visibility: hidden ), disconnecting it or removing it from tabIndex , setting the individual elements to tabIndex="-1" . Since CSS cannot really tell what is hidden and what doesn’t look like jQuery (psuedo classes have not yet arrived), jQuery is still probably the best choice.

Here is one more additional information for you: Tabbing makes overflow contents move