Явно.Дизайн

Что учитывать при проектировании UI для скринридеров?

Скринридеры — это специальные программы для чтения с экрана, которые помогают незрячим пользоваться компьютером и телефоном.

В одном из американских законов о доступности озвучивается принцип: там, где предполагается визуальный отклик системы, продумайте также такой способ взаимодействия, для которого не будет требоваться наличия зрения.

Для слепых и слабовидящих людей доступность — это ключевой фактор: смогут они работать с сайтом или приложением или не смогут.

Как сделать интерфейс более читаемым для скринридера?

◆ Пишите релевантные alt-text для картинок

◆ Помечайте ссылки и кнопки и делайте их информативными: не «Нажмите здесь», а «Узнайте больше о том, кто мы такие»

◆ Используйте tab-index и убедитесь, что элементы попадают в фокус в правильном порядке. Чаще всего это слева направо, сверху вниз, но в зависимости от контекста порядок чтения и группировки элементов может поменяться

◆ Используйте корректные семантические HTML-теги:
header — для шапки сайта;
nav — для навигации;
main — для основного контента;
aside — для дополнительного контента;
section — для разделения страницы на смысловые блоки;
footer — для подвала сайта

◆ Сохраняйте иерархию заголовков: соблюдайте логическую последовательность заголовков от самого крупного h1 к самому мелкому h6

Чтобы протестировать доступность получившегося экрана, попробуйте озвучить его в скринридере. На этапе проектирования это поможет сделать программа VoiceOver Designer (есть версия для iOS и macOS).

Лучше один раз увидеть своими глазами, как это работает, поэтому вот видео об этой программе от её автора — Михаила Рубанова (Mobile Head at Dodo Brands)

#заметка #гость #доступность

🔥5👍1

1.31K views11:17