Anatomy of an accessible carousel

Our Web Accessibility Evangelist, Sarah Pulis, dissected a commonly used website element: the carousel or slideshow.

Accessibility is a cross-functional responsibility for all web teams and defining who is responsible for specific tasks at each stage prevents your teams from having to fix errors and problems at the end.

Rotating displays of content, usually called carousels or slideshows, are a common element on many websites, providing a way of focusing attention on particular content, while making effective use of limited space.

However, carousels can present accessibility issues that affect people with a disability. For example, a blind or vision impaired user may require a screen reader to read out the content for them, and someone with a physical disability may navigate using only a keyboard — which is often not considered when implementing a carousel on a webpage.

To help ensure your carousel is accessible, here are some things you should do:

  • provide user controls to pause or stop the carousel.
  • ensure user controls are keyboard navigable.
  • confirm controls are correctly labelled for screen readers.

The following images show some of the elements that form part of the creation of an accessible carousel and highlights the individual responsibilities of designers, developers and content authors.

The designer's role in the creation of an accessible carousel

Designers need to be aware of all the various design elements that are required for a carousel to be accessible. For instance, it is essential to include user controls to play, pause and advance content on the carousel.

Colour contrast
User controls and text on the carousel must meet colour contrast requirements.

Designers must consider the colour contrast of all link states, and any text on its background.

Colour contrast on a carousel in the design phase.

Keyboard controls

Designers must ensure that user controls to stop, start and pause the carousel are included in the design. This not only ensures they are part of the visual design but also makes it clear to the developers that this functionality must be included.

Keyboard controls on a carousel in the design phase.

Keyboard focus

Some users with disabilities are only able to navigate websites using a keyboard. Clearly showing users what element has focus is an essential accessibility requirement which should be defined within the visual design. Other states, such as style of a button that is toggled on or off should also be included in the visual design and these states should not be communicated to a user using only colour changes.

Link states on a carousel in the design phase.

Heading level

Designers should clearly identify text that is a heading, and show the heading level of any heading within the carousel. The heading level or levels within a carousel must be considered with the rest of the website. Best practice is to ensure there is only one <h1> element on any webpage and all subsequent headings within a section must be appropriately nested. Heading levels should not be skipped. You can have headings that are the same level within a webpage that have different styles associated with them.

Heading level on a carousel in the design phase.

The developer's role in the creation of an accessible carousel

Developers are responsible for ensuring a functional and accessible carousel. When accessibility considerations are annotated in the design phase, it assists developers in implementing the functionality.

Semantic markup

It is the developer's responsibility to ensure that text on the carousel uses correct semantic markup, including heading levels.

Heading level markup on a carousel in the development phase.

Text alternatives

Developers must ensure navigation buttons and user controls have text alternatives that describe the purpose of the image.

Text alternative markup on a carousel in the development phase.

CSS for styling
Don't use images of text. Developers must use cascading style sheets (CSS) to style the text elements on a carousel.

CSS for styling on a carousel in the development phase.

Preserve sequence

Developers must ensure sequence is preserved in the code for each carousel item. If sequence is not preserved, it can affect the reading order of the content and even change its meaning.

Preserved sequence on a carousel in the development phase.

The content author's role in the creation of an accessible carousel

Content authors have significant impact on the ongoing accessibility of a website.

Meaningful links

Content authors are responsible for ensuring meaningful link text is applied to links on a carousel. Designers and developers may need to ensure that sufficient space is allowed, as meaningful links may take up more space than "click here" or "read more" — some of the most commonly used, but inaccessible link text.

A meaningful link on a carousel in the authoring phase.

Images and alternative text

All images must have an alt attribute, even if its value (the alt text) is empty e.g. <img alt=”” />

If an image is purely decorative, the alt text must remain empty. An image is only decorative if it can be removed and no information is lost. If an image is meaningful, the alt text must describe the purpose of the image.

A text alternative on a carousel in the authoring phase.

The orignal Anatomy of an accessible carousel: everyone's responsible! presentation by Access iQ™ Web Accessibility Evangelist Sarah Pulis is available on SlideShare.

SlideShare includes an auto-generated text transcript, though it should be noted that this does not include alternative text for images within the slides. If you require an accessible version of the presentation, please contact us.

For more detailed information, see our resources on carousels for developers and designers.