Carousels. Some people love ‘em, and some people hate ‘em! Yet they are one of the most popular ways of displaying content. One reason for that is carousels are a quick way to appease multiple stakeholders who want their content front and center on the homepage.
Think about higher education. The admissions office wants to increase applications, the athletics department wants to increase attendance at football games, and academic units want to highlight a new research program or curriculum. Using a carousel, everyone gets what they want. And content can be easily and quickly switched out to meet changing communication needs.
Many web designers will tell you that carousels are the magic bean that solves the problem of competing content priorities and the fight for placement on the homepage. Yet many people would disagree. Sighted and unsighted people who use a keyboard to navigate a website are just a couple of examples.
If you must use a carousel on your website, here are a few ways to help make that carousel more accessible.
- Using the Tab key.
- Keyboard users must be able to tab through the entire carousel.
- When the user has reached the last panel in the set, focus should move to the next logical interactive element on the page.
- Do not create a keyboard trap; users must be able to tab out of the carousel and on to the next logical interactive element on the page.
- Do not create a carousel on auto-play.
- If you must make the carousel auto-play, provide a pause or stop button (WCAG 2.2.2 Pause, Stop, Hide) and place it before the carousel using a descriptive link such as "Pause Animation."
- Provide visual focus indicators.
- All directional arrows and / or icons should have disabled states.
- Each panel must receive focus with the entire contents of the panel wrapped in the link tag.
- Accessible to assistive technology.
- A screen reader should be able to read all the content for each panel. Don't forget your ALT text for any images those panels include.
- Use a Skip Link.
- Allow sighted and unsighted keyboard-only users the same option to skip the carousel as sighted mouse users have.
These are just a few simple ideas for creating a more accessible and usable carousel. For more detailed information on creating an accessible carousel, please check out the articles in the resources section.
Resources
- If you must use a carousel, make it accessible ~ Alison Walden
- Accessible Carousels and Content Sliders ~ Smashing Magazine
- A Content Slider ~ Inclusive Components
- The Pros and Cons of Content Carousels ~ Thomas Bacon
