Как сделать кнопку, содержащую только изображение, доступной?

Question

У меня есть <img>, то есть при нажатии должен выполнить действие , поэтому я обернул его внутри <button> следующим образом:

<button>
    <img src="" alt="Cat">
</button>

Что касается доступности, кнопка в дереве доступности должна иметь роль и метку , связанную с ней. Роль выполняется с помощью тега <button>, и обычно метка кнопки - это ее содержимое внутри открывающего и закрывающего тегов, но в нашем случае есть только изображение.

Так как же сделать кнопку доступной в этом случае? Достаточно ли атрибута alt?

Answer 1

Что касается доступности, кнопка должна иметь роль и метку.

Вы должны предоставить role, только если семантика по умолчанию элемента не дает его. A <button> - кнопка отправки. Ему не нужно role, если вы используете его для этого.

Аналогично, label должен предоставляться только в том случае, если его нет. Содержимое <button> помечает его, а ваш элемент <img> имеет атрибут alt.

Так как же сделать кнопку доступной в этом случае? Достаточно ли атрибута alt?

Да.