Text alternative does not match dynamically changing image

Rule

The alternative text for actionable images MUST be meaningful (accurately conveying the purpose or result of the action).

Background

People who are blind cannot see images on a page. In order to give people who cannot see an image access to the information conveyed by the image, it must have a text alternative. The text alternative must describe the information or function represented by the image. Screen readers can then use the alternative text to convey that information to the screen reader user.

For actionable or functional images - such as links or buttons - the alternative text must describe the destination, purpose, or function of the image - not necessarily the image itself. For example, the alternative text for an image that is a link or a button will describe the link destination or the button function, not the shape or other visual characteristics of the image.

How to Fix

Fix this issue by updating the alternative text as the image changes.

The play button changes to a pause button:

<button class="playbtn" aria-label="play"></button> <button class="pausebtn" aria-label="pause"></button>