Хабрахабр

Автостопом по доступности: Ссылки для пропуска навигации и секции

Предлагаю вашему вниманию перевод статьи «The Hitchhiker’s Guide to Accessibility: Skiplinks and Landmarks» автора Attila Vágó о паре незаменимых инструментов UI и их особенностях. Привет, Хабр.

Незаметные, но очень полезные помощники UX и непризнанные гении UI, skiplinks как концепция не являются чем-то новым, ими с благодарностью пользуются сообщества инвалидов на протяжении десятилетий. Ссылки для пропуска навигации (далее skiplinks) — невоспетые герои каждого уважающего себя доступного (accessible) веб-сайта и веб-приложения. Если Вы слышали выражение ”мелочи решают все", то это выражение как раз про skiplinks.

В течение многих лет мышь была просто мышью, пушистым грызуном, независимо от того, где она жила – на Вашем чердаке, в воображении Уолта Диснея или на улицах Дублина. Вопреки общему мнению, раньше компьютеры не использовались в комплекте с мышью. Клавиатура была в приоритете для большинства пользователей, что наводит меня на мысли о важности навигации именно с помощью клавиатуры.

Основные клавиши: tab, стрелки вверх-вниз-влево-вправо, пробел и enter. Клавиатурная навигация проста в реализации и в использовании. Не так радует тот факт, что современные веб-приложения – это намного больше, чем простой HTML, и в них сложная навигация. Просто написанная страница на семантически правильном HTML должна привести Вас к полностью клавиатурной навигации в веб-приложении, и это здорово. Такие системы проектирования приводят к довольно серьезной и раздражающей проблеме для пользователей клавиатуры: повторяющиеся элементы и содержимое.

Каждый раз, когда пользователь переходит на новую страницу, та же навигация появляется снова и снова, и пользователь должен скроллить страницу, чтобы найти интересующий его контент. Основная тому причина – навигация в приложении. На сайте BBC, например, есть целых 28 пунктов в основной навигации:

image

Вы видите сразу, что это крупный новостной сайт, ведь в нем 28 пунктов меню!

Это морально и физически выматывает ее! Теперь представьте себе, что старушка с болезнью Паркинсона почти умеет пользоваться клавиатурой (о мыши не может быть и речи), чтобы переключиться через каждый из 28 элементов, когда она переходит к другой новостной статье. Само зрелище того, как она борется, было бы душераздирающим. Мы же не допустим, чтобы бедной бабушке пришлось пройти через эту боль? В BBC поступили именно так. Хороший профессионал и разработчик UX знает это, поэтому он реализует то, что индустрия называет skiplinks. Скрестим пальцы, чтобы RTE последовали их примеру… Как и New York Times и NBC.

image

Что пропускаем?!?

Возьмем, к примеру, американский флаг в веб-формате (по ссылке attilavago.github.io/fun-with-flags/usa). Большим аспектом skiplinks является то, что они улучшают жизнь каждого, кто часто использует клавиатуру или брайлевский дисплей. Представьте, что Вам нужно проходить через 50 звезд флага каждый раз! Я могу быстро перейти к наиболее актуальному для меня разделу данной страницы, независимо от того, использую ли я клавиатуру или дисплей Брайля. Как бы Вы ни любили дядю Сэма, Вы бы сошли с ума.

Простыми словами, skiplinks скрыты и просты, но эффективны, с их помощью люди, скорее всего, попадают в самый лучший UI.

На самом деле это простой шаблон. С точки зрения кодинга их уровень сложности находится где-то между завязыванием обуви после двенадцати пабов на Рождество и поиском ванной в темноте. В первый раз, когда я увидел их в UI, я ожидал десятки запутанных строк JavaScript, и скажу Вам, что это не так. Если Вы реализовали его пару раз, то в дальнейшем вряд ли ошибетесь. Ваш HTML будет выглядеть примерно так:

image

В то время как Ваш CSS будет чем-то таким:

image

Очевидно, что если Вы хотите потренироваться, вам нужно взять это на вооружение. Таков результат. Переключитесь на любимый контент.

Иллюстрация ссылки для пропуска навигации с помощью Screengrab на attilavago.github.io/fun-with-flags/usa

image

А что тогда с секциями?

Никто о них толком не говорит, они ничем не выделяются, но все ожидают, что они будут на своих местах и сделают свою черную работу, не ожидая в ответ никакого признания. Секции–своего рода дети веб-UI. Никогда!

Хотите верьте, хотите нет, но это все. Вы, наверное, помните, что в начале этой статьи я упоминал семантический HTML. Вот несколько хороших примеров: Секции оформляются легко, если Ваша UI архитектура продумана семантически.

image

И более наглядный пример с некоторыми атрибутами ARIA, приведенными тут:

image
Пример секций

Если элементы секционирования HTML5 используются без понимания соответствующей знаковой структуры, то люди, пользующиеся вспомогательными технологиями, скорее всего, будут сбиты с толку и ограничены в доступе к контенту и взаимодействию с веб-страницами. Важно понимать, что многие элементы секционирования в HTML5, например, main, nav, aside, по умолчанию определяют секции ARIA. Его суть в том, что необходимо держать свой семантический код в чистоте, и все само встанет на свои места.
Одна важная деталь, которую нужно иметь в виду – секции веб-страницы не заменяют skiplinks. Чтобы избежать путаницы в разработке и пользовательском опыте, взгляните на этот официальный документ о секциях. Конечно, брайлевский дисплей даст пользователю механизмы для перехода и навигации между секциями страницы, но этот же механизм недоступен для пользователей клавиатуры.

Skiplinks отлично подходят как для навигации с клавиатуры, так и для дисплея Брайля, в то время как секции отлично подходят только для дисплея Брайля, однако ни один из них не заменяет другой. Надеюсь, теперь Вы понимаете ключевые различия между skiplinks и секциями, а также методы их реализации. Это ведь не так сложно, правда? Реализация любого из них проста, поэтому, если Вы хотите по-настоящему заняться доступностью своего веб-сайта или приложения, Вам нужно убедиться, что Вы справитесь и с тем, и другим.

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть