Is it possible to prevent hidden elements from being hidden in focus
I was tasked with creating an accessible / responsive carousel and ran into an issue in Chrome regarding the focus of hidden elements.
As per this jsfiddle ( http://jsfiddle.net/ft1oosep/ ); if you tab until a hidden element receives focus, you will see the link is hoisted up in view without any update to that element's CSS properties.
For a carousel, this causes problems as I need to keep track of where the carousel is at any given time. I tried to blur the focus, but even that seems too late. Is there an easy solution to this problem or am I going to develop some sophisticated focus / tab controls?
Thank you in advance
(Please, no answers suggesting carousels is a bad idea ... Its the challenge I posed)
Sample 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>
source to share
In my case, I added a dynamic attribute tabindex
so that when hidden tabbed items were hidden, it was tabindex="-1"
(exclude all tabs), and when visible, it becomes tabindex="0"
(you can use the tab in the normal browser tab order).
The code is likely to be instance specific, but in general, set the attribute tabindex
of the problatic element to tabindex="-1"
on render and then in case the problmatic element is seen set tabindex="0"
on that element when it is visible (and back to tabindex = "- 1", once it's hidden again.)
Accessibility note: It is very rare to use a tabindex
value other than -1 (disable tabs) or 0 (normal tab flow) for values .
source to share