Дайте больше информации о контексте, где элемент находится
Но одного текста мало. Когда пользователь без ограничений взаимодействует с элементом, то кроме текста, он интуитивно анализирует окружающий контекст, и поэтому он может догадаться, что делает кнопка.
А что будет делать пользователь скринридера в такой ситуации? К сожалению, если человек использует только скринридер, то у него остается только краткий текст. И ему гораздо сложнее догадаться, что же делает кнопка.
Но мы можем помочь, добавив больше информации о контексте элемента с помощью атрибута aria-label. Например, разработчики ASOS добавляют «Clear recent searches», чтобы пользователи поняли, что кнопка очищает последние результаты поиска.
Не делайте так
<button type="button">Clear</button>Можно сделать так
<button type="button" aria-label="Clear recent searches">Clear</button>Глаголы говорят пользователям, что элемент приводит к действию
Есть хорошая практика, использовать атрибут aria-label, чтобы скринридеры подсказывали пользователям, как взаимодействовать с элементом.
Люди используют существительные. Например, они пишут «Мои сохраненные товары» для ссылки, которая ведет на страницу с сохраненными товарами. Поэтому скринридеры озвучат «Мои сохраненные товары, ссылка».
Я же предлагаю использовать глаголы, чтобы пользователи понимали, что элемент приведет к действию. Например, «Мои сохраненные товары» заменить на «Перейти к моим сохраненным товарам». Скринридеры озвучат «Перейти к мои сохраненным товарам, ссылка».
Не делайте так
<a arial-label="Мои сохраненные товары" href="https://example.com/saved-lists">...</a>Можно сделать так
<a arial-label="Перейти к моим сохраненным товарам" href="https://example.com/saved-lists">...</a>Создайте более простое взаимодействие
Если вы хотите сделать удобный интерфейс для пользователей скринридоров, то вам следует знать, что все элементы с семантикой озвучиваются. Например, я создал ссылку, в которой есть 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>