Carousel accessibility best practices



  • I am trying to design a new carousel component but struggling to figure out any accessibility best practices.

    These are some of the things I am trying to think about:

    Pagination indicators

    1. Should these be clickable
    2. If clickable to they have to meet minimum touch target areas (44px), or if there is another form of pagination such as icon buttons with arrows does this not matter?

    Responsive design

    1. Should my designs / interactions for WEB and APPS differ?

    If anyone has any knowledge around best practices I would appreciate it!



  • According to https://www.w3.org/WAI/tutorials/carousels/ , there are four guidelines for making carousels accessible:

    1. Structure: Use semantic structure for the carousel to support proper function of assistive technology. This means that your developers should code it properly so that screen readers and other devices can control it.
    2. Functionality: Add functionality to display and announce carousel items. Make sure that those who are using screen readers understand that the content is changing as the items change.
    3. Animations: Add a transition animation between items and ensure users can stop and resume it. Animations help sighted users perceive change; thus it https://www.nngroup.com/articles/minimize-cognitive-load/ . The user must be able to pause and control every item, as reading speeds differ. https://www.boia.org/wcag2/cp/2.2.2 require giving users the ability to pause and stop animation to prevent seasickness and other vestibular disorders.
    4. Styling: Style the carousel to make sure it’s usable and readable by everyone. Make sure text doesn't become too small to read on mobile, as an example.

    Other accessibility considerations:

    • Let the user know how many items there are in the carousel, and which item they're perceiving; this is especially helpful for screen reader users. Pagination can be helpful (such as showing 1/5). Dots are sometimes easy to miss on a busy background.
    • It is more accessible to show forward/backward controls at all times vs. on hover.

    Should my designs / interactions for WEB and APPS differ?

    Yes. Per https://www.nngroup.com/articles/designing-effective-carousels/ , do not auto-forward carousel items on mobile. Remember that swiping is not available to all users on mobile (think of a person who can only use one hand, either temporarily or permanently) so you might want to provide a secondary way for your mobile users to interact with the carousel. They should absolutely be of a minimum touch target size.




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2