[SOLVED] <input/> element must have a text alternative, even though it does

<input/> element must have a text alternative, even though it does

First ESLint kept complaining that there were click handlers without keydown events and focus, so I changed the code from this:

<img src="start-button.png" alt="Start Button" class="start-button" (click)="startSequence()">

to this:

<input type="image" src="start-button.png" alt="Start Button" class="start-button" (click)="startSequence()"/>

While that got rid of those messages, it leaves me stuck at a point where I can't seem to go on. Namely, it now produces this message:

 <input/> element must have a text alternative  @angular-eslint/template/alt-text

As you can see above, the element has an alt attribute. But I didn't just leave it at that. I also tried name, aria-label and aria-labelledby, and all of them at the same time. The message won't go away.

What do I have to do to satisfy that rule? The documentation just keeps telling me to do the things I already did.

Solution

You could use a button with an img inside, like so:

<button class="start-button" (click)="startSequence()" aria-label="Start Sequence">
  <img src="start-button.png" alt="">
</button>