Accessibility: Slideshow icons have no alternative text

[swashbuck]

Subject of the issue

We have recently had an accessibility audit for one of our clients. The consulting agency flagged the following issue regarding the progress dots underneath Narrative images.

The slideshow component has dot indicators below to inform users:

1. how many slides are present
2. which slide they are on

However, they do not have a text alternative to describe its purpose.

Screen reader users who rely on text alternatives to understand the purpose of non- text content will not be provided with this information.

Their recommendation:

Ensure that all meaningful icons have the text alternatives available. In this case, the dots are marked up using background colours.

• Add role="img" to the container of the icons
• Add an informative aria-label to accurately describe its purpose ◦ Update the aria-label when the slide position changes

Code example:

<div class="narrative__indicators narrative__slide-indicators" role="img" aria-label="Slide 1 of 2"></div>

Type: WCAG 2
Principle: Perceivable
Level: A
Severity: High
Guideline: 1.1 Text Alternatives
Success Criteria: 1.1.1 Non-text Content (A)

Screenshots

[oliverfoster]

The slideshow component has dot indicators below to inform users:

1. how many slides are present
2. which slide they are on

However, they do not have a text alternative to describe its purpose.

The primary method of navigation, the left/right buttons, have the alternate labels containing (item {{itemNumber}} of {{totalItems}}):

adapt-contrib-narrative/properties.schema

Lines 15 to 30 in a31a64b

	"previous": {
	"type": "string",
	"required": true,
	"default": "{{#if isAtStart}}{{_globals._accessibility._ariaLabels.previous}}{{else}}{{#if title}}Back to {{{title}}}{{else}}{{_globals._accessibility._ariaLabels.previous}}{{/if}} (item {{itemNumber}} of {{totalItems}}){{/if}}",
	"inputType": "Text",
	"validators": [],
	"translatable": true
	},
	"next": {
	"type": "string",
	"required": true,
	"default": "{{#if isAtEnd}}{{_globals._accessibility._ariaLabels.next}}{{else}}{{#if title}}Forward to {{{title}}}{{else}}{{_globals._accessibility._ariaLabels.next}}{{/if}} (item {{itemNumber}} of {{totalItems}}){{/if}}",
	"inputType": "Text",
	"validators": [],
	"translatable": true
	},

Here is a summary of why those dots are not accessible:
#273 (comment)

Previous conversations on the subject:
#244
#288

[swashbuck]

Thanks, @oliverfoster . I'll include this in our response back to the a11y consultants.