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.
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.
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.
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.
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.
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.
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.
It is the developer's responsibility to ensure that text on the carousel uses correct semantic markup, including heading levels.
Developers must ensure navigation buttons and user controls have text alternatives that describe the purpose of the image.
CSS for styling
Don't use images of text. Developers must use cascading style sheets (CSS) to style the text elements on a carousel.
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.
Content authors have significant impact on the ongoing accessibility of a website.
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.
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.
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.