How to Accessibly Rotate Contents with 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: [html]

This is a text with a link 1 and another link 1

This is a text with a link 2 and another link 2

This is a text with a link 3 and another link 3

This is a text with a link 4 and another link 4

[/html]

Continue reading %How to Accessibly Rotate Contents with jQuery%

by Aurelio De Rosa via SitePoint