Background images dissapear when user tabs through webpage

[svoltmer]

We are having complaints that if a user clicks on an image and then proceeds to tab to the next item on the webpage, the image he tabbed over dissapears leaving only the background color of the element. What could be causing this?

[stancevicbranko]

Link to the website?

[svoltmer]

http://test-www.rose-hulman.edu/

Try clicking on one of the images within the section under “@Rose-Hulman”, and then hit your tab key.

[Ailwyn]

My guess at what’s happening is:

It looks like each of those images is within a div of the page that’s hiding overflow with overflow:hidden.

Each of those divs contain elements that are hidden in the overflow. Some of those elements that are off screen can still acquire keyboard focus. When they acquire focus, the browser is scrolling those individual div areas up until the focused element is visible to the user. If you inspect one the image areas after it is “broken”, you’ll see that there’s an link element at the very bottom of it.

A way to fix this would be to properly hide focusable elements when not visible (display: none etc) or alternatively (and better for accessibility), cause the focus event to trigger the overlay to appear for each image.

[Author]

Posts