Originally published at: http://www.sitepoint.com/accessibly-rotate-contents-jquery/
Together with the parallax scrolling effect, rotating content is another example of an effect that you often see implemented in websites. You can see it used to rotate news, tweets, Facebook posts, and so on. When built using jQuery, often developers create the widget employing the hide()
and the show()
methods (or the similar methods such as fadeIn()
/fadeOut()
and slideUp()
/slideDown()
). The problem with them is that, after performing the animation (if any), these methods change the value of the display
property of the selected element(s) to none
and back to the original value respectively. This behavior leads to an accessibility issue.
In this article weâll describe what the issue is and how you can use different jQueryâs methods to achieve the same effect but taking care of accessibility.
The Problem
Some people, usually but not limited to visually impaired people, use the TAB key to navigate a website. If youâre not familiar with this concept, what happens is that every time a user hit the TAB key a focusable element of the page is focused. The order in which the elements are focused follows the the order they appear in the DOM (exceptions apply) starting from the very beginning of the page. Some examples of focusable elements (learn more in When Do Elements Take the Focus?) are links, input fields, buttons, and everything that has a value for the tabindex
attribute greater than or equal to 0
(learn when and how to use tabindex
). The important point to understand is that an element hidden by setting its display
property to none
is not focusable.
With this in mind you can see that if a TAB user is focusing an element (for example a link) that has been hidden using the hide()
method and then the user presses the TAB key, there is a problem. Being hidden in that way is like the element has been temporarily removed from the DOM, so there isnât a next element to focus. What browsers do in this case is to reset the position, usually focusing the URL of the page. This causes a lot of frustration to the users because they have to start from the beginning of the page every time they reach this death zone. Even more, some of your users canât even see your awesome rotating effect â all they want to do is access your content easily.
Show Me the Code
To give you a better handle on this situation, consider the following markup:
<div class="rotating-content"> <p>This is a text with a <a href="#">link 1</a> and <a href="#">another link 1</a></p> <p>This is a text with a <a href="#">link 2</a> and <a href="#">another link 2</a></p> <p>This is a text with a <a href="#">link 3</a> and <a href="#">another link 3</a></p> <p>This is a text with a <a href="#">link 4</a> and <a href="#">another link 4</a></p> </div>