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

Question

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

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

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

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

Answer 1

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

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

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

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

Да.