Выбор ответа Junior Доступность спрашивают часто обновлено
Имя у кнопки-иконки
Вопрос
У кнопки закрытия только SVG-иконка крестика. Скринридер говорит «кнопка» без названия. Как исправить?
<button type="button" class="close">
<svg aria-hidden="true" viewBox="0 0 24 24">...</svg>
</button>
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Добавить aria-label="Закрыть" на <button. aria-label на кнопке задаёт её доступное имя, и скринридер скажет «Закрыть, кнопка». role="button" на иконке создаст вторую кнопку внутри первой. <label подписывает поля форм, а не кнопки. <title внутри SVG иногда даёт имя, но поддержка…
Варианты ответа
- Добавить атрибут
title="Закрыть"к<svg> - Добавить
aria-label="Закрыть"на<button>правильный ответ - Добавить
role="button"иtabindexна<svg> - Обернуть кнопку в
<label>с текстом «Закрыть»
Разбор
aria-label на кнопке задаёт её доступное имя, и скринридер скажет «Закрыть, кнопка». role="button" на иконке создаст вторую кнопку внутри первой. <label> подписывает поля форм, а не кнопки. <title> внутри SVG иногда даёт имя, но поддержка разнится, надёжный способ это имя на самой кнопке.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.