Навигация по ориентирам: как пользователи перемещаются по странице

Зрячий пользователь быстро осматривает страницу. Пользователь программы чтения с экрана вместо этого переходит от области к области с помощью определённых вами ориентиров.

Большинство программ чтения с экрана позволяют переключаться между ориентирами с помощью клавиши. В NVDA клавиша D переходит к следующей области без использования мыши.

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

Главное преимущество — возможность пропуска. Пользователи переходят через уже услышанные header и nav прямо к новому содержимому.

На Mac пользователи VoiceOver открывают ротор и выбирают «Ориентиры», чтобы переходить между областями по их названию и роли.

В этом списке ориентиров значения aria-label становятся пунктами меню, поэтому именно хорошие названия делают переходы полезными.

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

Если каждая область объявлена ориентиром, список превращается в шум. Используйте ориентиры для настоящих разделов страницы, а не для общей разметки.

В идеале всё видимое содержимое должно находиться внутри какого-либо ориентира. До осиротевшего содержимого за пределами всех областей труднее добраться с помощью переходов.

Откройте программу чтения с экрана и нажмите клавишу перехода по ориентирам. Если вы можете аккуратно перейти через всю страницу, ваши области работают правильно. 🎧

Переходы по ориентирам лучше, чем нажатие Tab десятки раз. Несколько нажатий клавиш заменяют долгий утомительный просмотр каждой ссылки.

Вы узнали, как пользователи переходят между ориентирами с помощью клавиши или ротора, почему важны названия областей и порядок DOM, а также как проверять результат на слух. 🙌