3

I've been tasked to create an accessible/responsive carousel and have come across an issue in Chrome regarding the focus of hidden elements.

As per this jsfiddle (http://jsfiddle.net/ft1oosep/); if you tab until the hidden element gets focus you'll see the link is hoisted into view without any update to the css properties of the element.

For the carousel, this causes problems as I need to keep track of where the carousel is at any given time. I've attempted to blur on focus but even that seems too late. Is there an easy solution to this problem or am I going to develop some complex focus/tab management?

Thanks in advance

(Please, no responses suggesting carousels are a bad idea... Its the task I've been set)

Example Code:

<style>
    body {
        background-color: #f2f2f2;
        font-family: 'Arial';
        font-size: 13px;
    }

    div {
        width: 200px;
        height: 200px;
        overflow: hidden;
        background-color: #ffffff;
    }

    a {
        width: 200px;
        height: 200px;
        text-align: center;
        background: #A6C6DD;
        display: block;
        color: #ffffff;
        text-decoration: none;
    }

    a:last-child {
        background: #746F9E;
    }
</style>
<p>Pressing tab forces hidden link into view.</p>
<div>
    <a href="#">Visible Link</a>
    <a href="#">Hidden Link</a>
</div>
Chris GW Green
  • 1,145
  • 9
  • 17
  • 1
    That's a jsFiddle, not a jsPerf. And you aren't hiding any links, so I don't see a problem. It happens to be "hidden" because of the overflow, right? But I feel like you should be truly hiding it – Ian Oct 07 '14 at 16:24
  • Updated "jsFiddle". Yeah youre right, they're out of sight (as in 'carouselled' out of view) but I still want them to be accessible on tab. However, as with the jsfiddle, chrome appears to automatically pull 'out-of-view' elements into view without any changes to the elements css. – Chris GW Green Oct 08 '14 at 10:21

2 Answers2

1

In my case, I added a dynamic tabindex attribute, so that when the tab-able elements where hidden, it was tabindex="-1" (prevent all tabbing) and when visible it becomes tabindex="0" (tab-able in the normal browser tab-order).

The code will likely be specific to the instance, but in general, set the tabindex attribute of the problmatic element to tabindex="-1" on render, then in the event that makes the problmatic element visible set tabindex="0" on that element whenever it is visible (and back to tabindex="-1"` once hidden again.)

Accessibility note: very rarely should anything other than -1 (disable tabbing) or 0 (normal tabbing flow) be used for tabindex values.

LocalPCGuy
  • 6,006
  • 2
  • 32
  • 28
0

Would adding a node with js after the first link gets blurred be of any help ? So while the carousel is running there is no node there until tabbed through.

Billy
  • 2,448
  • 1
  • 10
  • 13