How can I make a set of content carousels with a set of selection buttons more accessible?

I have a set of buttons at the top of a content block. They allow the user to show and hide individual content carousels containing information cards. Some of these carousels are not shown on page load.

Selector area
[button 1] [button 2] [button 3]

Content slider 1
[] [] [] [] [] [] [] [] [] ...

Content slider 2
[] [] [] [] [] [] [] [] [] ...

Content slider 3
[] [] [] [] [] [] [] [] [] ...

How can I offer accessible navigation between the selector area and the individual content carousels?

Some notes:

  • A user may want to select multiple buttons, so immediate scroll to that button's content isn't ideal.
  • A user may want to preview a carousel's content and return to the selector area without tabbing through as many as 50 carousel elements
  • A user may want to select a button and easily move to its carousel

Thanks much.

To address some of the comments:

@virtualnobi, the user may have selected one or more buttons previously, and those are now displayed on page load. They have the option of selecting or deselecting now, also.

@AndrewMartin, we present online training by topic, with each topic having many training elements. Each carousel contains cards that present training titles and links. It may be that we'd consider refactoring the UI overall, but at this time it seems to be well received by our customers.

Thank you for your replies.

Tags: