Я люблю делать доступные интерфейсы и стараюсь искать новый материал, чтобы перенять интересные практики. В этой статье я хочу рассказать про 3 техники, которые помогут сделать интерфейсы более понятными и простыми для пользователей скринридоров.
Дайте больше информации о контексте, где элемент находится
Мы часто имеем дело с кнопками, у которых есть ограничения. Например, ограничение пространства. Мы не можем использовать слишком длинный текст, потому что кнопки не поместятся. Поэтому мы вынуждены использовать краткий текст.
Но одного текста мало. Когда пользователь без ограничений взаимодействует с элементом, то кроме текста, он интуитивно анализирует окружающий контекст, и поэтому он может догадаться, что делает кнопка.
А что будет делать пользователь скринридера в такой ситуации? К сожалению, если человек использует только скринридер, то у него остается только краткий текст. И ему гораздо сложнее догадаться, что же делает кнопка.
Но мы можем помочь, добавив больше информации о контексте элемента с помощью атрибута 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>
P.S. Если у вас есть вопросы по CSS/HTML, то, не стесняйтесь, пишите мне на мою почту. Она указана в моем профиле на Хабре.
