Комментарии 7
Что делает кнопка? Закрывает. Где находится кнопка? В карточке товара. Получается можно создать подсказку: «Закрыть карточку товара».
Здесь еще важно, как реализован код карточки товара, и как незрячий узнает, что зайдя на некую страницу ему в виде всплывающего окна суют еще и карточку товара, и закрывая ее он закрывает лишь спам, а не открытую страницу.
Хорошая статья, спасибо.
Как пользователь скринридера могу сказать, что главное свойство описания в aria-label — его наличие. Очень важно понимать, какой элемент на странице кликабельный, и что он делает. А "современный" подход делать такие элементы через span с onClick и иконкой внутри не дает никакой информации об этом. Сам на предыдущем проекте расставлял role="button" и aria-label на каждой странице, над которой работал. А иначе даже поставленную задачу не сделать.
По поводу aria-label у nav, единственное место, где я такое заметил — m.vk.com. Там прям так и есть
<nav role="navigation" aria-label="Основная">...</nav>
<div class="mfoot" role="navigation" aria-label="Дополнительная">...</div>Насколько необходимо каждый раз слышать "Основная" и "Дополнительная" перемещаясь по спискам на странице — дискуссионный вопрос. Здесь главное не пересолить. А вот на кнопках видеоплеера метки очень нужны.
Интересная статья! Открыл для себя новый атрибут, благодарю!
Стоит упомянуть, что нет смысла добавлять aria-label на кнопку, у которой уже и так есть текстовое содержимое
<button aria-label="Закрыть окно">Закрыть окно</button>Здесь aria-label избыточен - если его нет, скринридер просто прочитает содержимое кнопки. В перспективе такое дублирование приведет к рассинхрону: поменяли текст в одном месте, оставили как было в другом
Кнопкам без текста, с свг-шкой внутри добавляю только атрибут title. aria-label обязателен в таком случае?
Прокачиваем вёрстку ARIA атрибутами. Атрибут aria-label