wcag compliance issue with play/pause button

Question

As part of making our site WCAG compliance we are adding play/pause buttons for carousel.Here the screen reader is reading in different manner

<div id="imageCarouselPlayBtn" class="cblt-button imageCarouselPlayBtn" tabindex ="0">
    &#9658;
</div>
<div id="imageCarouselPauseBtn" class="cblt-button imageCarouselPauseBtn" tabindex ="0">
    &#8214;
</div>`

in this case screen reader is reading pause button as double vertical line and group for play button. if we use sprite image instead it is reading as group for both play/pause buttons. Is there any good solution for this problem instead of using image tags for both ?

Answer 1

You could use WAI-ARIA’s aria-label attribute:

It provides the user with a recognizable name of the object.

Also: Is there a reason why you don’t use button/input instead of div for the play/pause buttons? With buttons, your markup could look like:

<button type="button" aria-label="Play">►</button>
<button type="button" aria-label="Pause">‖</button>