But since carousel implementations are not really standardized, these commands will really just confuse real keyboard users, since there is really no reason to expect them to be there.Īt the moment, there is nothing in the HTML specification that really resembles a carousel, so defining how an accessible carousel “should” be built is tricky. Sometimes carousels come with hidden keyboard commands, like using the arrow keys to move between slides.Auto-rotation can also be very distracting and disruptive for people with cognitive conditions that affect their attention or memory. If the carousel automatically advances, keyboard and screen reader users can be constantly tossed around in the DOM, unable to make sense of the content that keeps shifting in front of them.Inaccessible icons are often used, usually without human-readable accessible names, which can make controls unusable for screen reader and voice input users.Semantic tags are often not used for actionable elements like the previous, next, and slide dot controls, so keyboard and screen reader users often aren’t able to reach, understand, and activate them.Many carousels do not hide their non-visible slides from all users, forcing keyboard and screen reader users to go through every single piece of content in them, even though mouse users don’t have to.Nearly every carousel is built differently (even if they look the same), so screen reader users can have a tough time building up a consistent mental model that makes carousels easier to navigate later on.
#Image carousel definition how to
Screen reader users very often don’t know when their virtual cursor enters or leaves a carousel, making it difficult for them to know that it even exists or how to get out of it.Through extensive live user testing with native screen reader and keyboard-only users at Accessible360 across hundreds of websites, we find the following issues over and over again: May visually emphasize a single slide to show that it is “active”.Īlthough carousels can vary quite a bit in their features and implementations, there are a few things that they consistently get wrong for accessibility.May wrap its slides around when a user tries to move past the end or beginning of the set (sometimes called “infinite scrolling”).May be oriented horizontally, vertically, or even in 3D!.May automatically advance through slides all on its own, at whatever pace the owners felt like using.May have controls to jump to specific slides.May have controls to navigate to previous and next slides.May have slides that contain simple content (like a single image each) or complex content (like form fields and tooltips and all sorts of other complicated things).May have one or more slides visible at a time.What we can do, though, is list out the most common characteristics they can have, such as: They are a region of the page that acts sort of like a slideshow, allowing users to move through a bunch of content that would normally not be possible to fit into that same amount of space.Ĭarousels vary quite a bit in their use cases, features, and implementations, which can make it pretty difficult to come up with a precise, universal definition. Those of us who design or build web experiences can usually spot a carousel from a mile (or kilometer) away. In this article we’ll look at common accessibility barriers found in carousels, talk through some good solutions, and then connect you with some practical resources you can start using right now to make your carousels more accessible! Regardless of why they are used, one thing is practically universal - carousels are almost always inaccessible to disabled users. Often the result of competing internal priorities, carousels might be thought of as a manifestation of unclear business goals or unresolved internal conflicts. Carousels! They aren’t effective or popular with real users, and yet they can be found all over the web.
0 kommentar(er)
