Should the arrow buttons work for keyboard users? We do not want to trap the keyboard user in the carousel. Note that for a keyboard user, the carousel cannot wrap. Once the person has tabbed through all the panel sets, focus should move to the next interactive element that follows the carousel. Then the person can continue tabbing through that set of panels. The same action should occur as though the person had clicked on the “next” arrow. When focus is on the last panel in the set, tabbing again should bring the next set of panels into view. If they press the tab key, focus will be moved to the next panel. If the person presses “return” or “enter” on their keyboard while the panel has focus, they will be navigated to the link on that panel. Designers can work with developers to control the appearance of the visible focus indicator. This is a box that appears around content that has keyboard focus. Panel 1 call to action.” Note that for a non-sighted person, hearing only the link label may not be enough to give them context.Īn image carousel example with 3 panels and previous and next buttonsĪ sighted person navigating by keyboard will need a visible focus indicator. Here is a panel description that lets someone know what this panel is about. In that case, the screen reader will read all text: “Panel 1 title. Ideally, the panel 1 link should wrap around all panel text. Thanks to Jaimecortesf for pointing out in the comments that the carousel panels should be marked up as an unordered list.Īs a person tabs through the site, they should naturally tab into panel 1 of the carousel (without needing to know it is a carousel panel). As they tab, relevant information should be included in the focused area so that they have context on each piece of content. For a non-sighted person, the important interaction is that they can tab through each item. Carousels for people who use a keyboard to navigateĬonsider that non-sighted people do not need to know that you have collected content items for display in a carousel format. (There is a caveat about this below for keyboard users, however). Alternatively, the carousel can “wrap”, meaning that the user can always go backward or forward using the arrow keys. The “next” arrow should be disabled when the carousel is showing the last panel. The “previous” arrow should be disabled when the carousel is showing the first panel. “Previous” and “next” arrows should have disabled states. The dots should be clickable for a person using a mouse, enabling them to skip to the last panel. An active state on the dot tells the user which panel they are currently viewing. The number of dots represents the number of panel sets available to click through. If you use a pause or stop button, place it before the carousel, and provide descriptive link text like, “Pause animated content.”Įmploying navigation dots below the carousel are another great visual cue for sighted users. If you must make the carousel auto-play, then you need to provide a pause or stop button. The main carousel accessibility consideration for sighted users is to not make it auto-play.
QUICK N EASY WEB BUILDER CAROUSEL AUTOPLAY SERIES
Sighted users perceive carousel content as a series of panels usually navigated via arrow buttons. Assume there are two sets of three panels, so six panels in all.Īn image carousel example with 3 panels and previous and next buttons Carousels for sighted users (who use a mouse pointer) Let’s look at that example again, that shows a carousel with three panels in the visible area. There are a variety of other users we could consider, but let’s start with these three to create a baseline for accessibility. Sighted users who use a keyboard to navigate.Non-sighted users who use a screen reader and keyboard to navigate.Sighted users who use a mouse pointing device.But we can consider three general personas who could use them: Well, studies show that most people don’t use carousels. So, if we are going to persist in using carousels, let’s all learn to design them in an accessible way. The groups I mentioned above like them a lot, for the reason I mentioned above. However, they are also one of the most popular paradigms web designers use to display content. Studies show that users rarely interact with them. A carousel is one way to guarantee that each group’s content has an opportunity to have a turn in that spot. It exists because groups fight for that coveted front and center position on a web site homepage. The carousel paradigm for displaying content exists for one reason only. An image carousel example with 3 panels and previous and next buttons Why am I writing an article about carousels?
0 kommentar(er)
