[HTML, Accessibility] 3 техники с атрибутом aria-label, которые прокачают ваш HTML

Ответить на тему

Автор

Сообщение

news_bot ^®

Стаж: 6 лет 9 месяцев
Сообщений: 27286

news_bot ^® написал(а)
28-Июн-2021 22:42

Цитировать

Я люблю делать доступные интерфейсы и стараюсь искать новый материал, чтобы перенять интересные практики. В этой статье я хочу рассказать про 3 техники, которые помогут сделать интерфейсы более понятными и простыми для пользователей скринридоров. Дайте больше информации о контексте, где элемент находитсяМы часто имеем дело с кнопками, у которых есть ограничения. Например, ограничение пространства. Мы не можем использовать слишком длинный текст, потому что кнопки не поместятся. Поэтому мы вынуждены использовать краткий текст.Но одного текста мало. Когда пользователь без ограничений взаимодействует с элементом, то кроме текста, он интуитивно анализирует окружающий контекст, и поэтому он может догадаться, что делает кнопка. А что будет делать пользователь скринридера в такой ситуации? К сожалению, если человек использует только скринридер, то у него остается только краткий текст. И ему гораздо сложнее догадаться, что же делает кнопка. Но мы можем помочь, добавив больше информации о контексте элемента с помощью атрибута aria-label. Например, разработчики ASOS добавляют "Clear recent searches", чтобы пользователи поняли, что кнопка очищает последние результаты поиска.Не делайте так

<button type="button">Clear</button>

Можно сделать так

<button type="button" aria-label="Clear recent searches">Clear</button>

Глаголы говорят пользователям, что элемент приводит к действиюЕсть хорошая практика, использовать атрибут aria-label, чтобы скринридеры подсказывали пользователям, как взаимодействовать с элементом. Но, по моему мнению, тут есть проблема.Люди используют существительные. Например, они пишут "Мои сохраненные товары" для ссылки, которая ведет на страницу с сохраненными товарами. Поэтому скринридеры озвучат "Мои сохраненные товары, ссылка".Я же предлагаю использовать глаголы, чтобы пользователи понимали, что элемент приведет к действию. Например, "Мои сохраненные товары" заменить на "Перейти к моим сохраненным товарам". Скринридеры озвучат "Перейти к мои сохраненным товарам, ссылка". Не делайте так

Можно сделать так

Создайте более простое взаимодействиеЕсли вы хотите сделать удобный интерфейс для пользователей скринридоров, то вам следует знать, что все элементы с семантикой озвучиваются. Например, я создал ссылку, в которой есть img, p и span. Когда пользователи будут взаимодействовать с интерфейсом, то они будут вынуждены сделать 3 действия.Но мы можем упростить это, создав альтернативный способ взаимодействия. Например, разработчики ASOS дают всю информацию в атрибуте aria-label, а затем скрывают все дочерние элементы с помощью атрибута aria-hidden. В результате, когда пользователи попадают на ссылку, то они получают понятное описание и стоимость товара, и уже сразу могут перейти на его детальную страницу.Не делайте так

<a href="https://www.asos.com/only-sons/only-sons-oversize" class="product-card">
<div class="product-card__preview">
<img src="only-sons-oversize.jpg" alt="Only Sons oversize vest with palmistry back print in white">
</div>
<div class="product-card__body">
<div class="product-card__description">
<p>Only Sons oversize vest with palmistry back print in white</p>
</div>
<span class="product-card__price">£14.00</span>
</div>
</a>

Можно сделать так

<a href="https://www.asos.com/only-sons/only-sons-oversize"
aria-label="Only Sons oversize vest with palmistry back print in white. Price £14.00"
class="product-card">
<div aria-hidden="true" class="product-card__preview">
<img src="only-sons-oversize.jpg" alt="Only Sons oversize vest with palmistry back print in white">
</div>
<div aria-hidden="true" class="product-card__body">
<div class="product-card__description">
<p>Only Sons oversize vest with palmistry back print in white</p>
</div>
<span class="product-card__price">£14.00</span>
</div>
</a>

P.S. Если у вас есть вопросы по CSS/HTML, то, не стесняйтесь, пишите мне на мою почту. Она указана в моем профиле на Хабре.
===========
Источник:
habr.com
===========
Похожие новости:

Теги для поиска: #_html, #_accessibility, #_html, #_a11y, #_accessibility, #_html, #_accessibility

Профиль ЛС

Ответить на тему

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 22-Ноя 21:29
Часовой пояс: UTC + 5