2

I have a scrollable div with a list of links in it. Even though I have set the div to overflow:hidden, to hide some of the links, they are still accessible when tabbing 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>
PEHLAJ
  • 9,980
  • 9
  • 41
  • 53
Eric
  • 6,563
  • 5
  • 42
  • 66

1 Answers1

1

The short answer is no, not to my knowledge. This is because overflow: hidden; is a visual modifier only and is not intended to limit functionality. That's the way accessibility is intended to work. You must remove the functionality of an item in the DOM by hiding it (display: none, visibility: hidden), disabling it, or removing it from tabIndex by setting the individual elements to tabIndex="-1". Since the CSS can't really tell what is hidden and what isn't like jQuery can (psuedo classes haven't come that far yet), jQuery is still likely your best bet.

Here's some good extra info for you: Tabbing causes overflow content to shift up

Community
  • 1
  • 1
Tammy Shipps
  • 865
  • 4
  • 13