Что нужно учесть в разработке специальной навигации по сайтам для людей с ограничениями зрения и других возможностей

Перевод материала дизайнера Barrel Николаса Крамера.

Что нужно учесть в разработке специальной навигации по сайтам для людей с ограничениями зрения и других возможностей

Определение навигации

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

Разрабатывая навигационный опыт, дизайнеры должны убедиться, что все пользователи с ограничениями или без способны перемещаться по контенту сайта в собственном темпе. Желательно, чтобы они не испытывали чувства неудовлетворённости.

Если ориентироваться только на широкий круг пользователей, то достаточно просто создать понятный заголовок на странице, описательный заголовок (title) на вкладке и убедиться, что контент на каждой вашей странице имеет связное повествование. Люди с ограниченными возможностями часто могут получить доступ к вашему сайту только с помощью клавиатуры, и вы должны учитывать эти уникальные задачи при разработке.

<a href="https://www.bookofthemonth.com/" rel="nofollow noopener" target="_blank">Book of the Month</a> — это хороший пример сайта с чёткой и понятной навигацией
Book of the Month — это хороший пример сайта с чёткой и понятной навигацией

Если при разработке продумывать специальные возможности, нужно уметь ввести на своём сайте некоторые действенные функциональности, тогда любой пользователь сможет с ним работать.

Позвольте пользователям пропускать контент

Вы должны дать пользователям возможность пропустить неактуальный или избыточный контент, когда это возможно. Самый простой способ сделать это — добавить скрытую ссылку «перейти к контенту» в заголовке. Пользователь активирует эту ссылку нажатием клавиши Tab и переходит к основному контенту, например, к главной секции или в низ страницы.

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

На <a href="https://www.airbnb.com/" rel="nofollow noopener" target="_blank">Airbnb</a> есть понятная ссылка «Перейти к контенту»
На Airbnb есть понятная ссылка «Перейти к контенту»

Airbnb, Target и Wikipedia — это лишь несколько примеров сайтов, которые показывают скрытые ссылки перехода на контент, когда пользователь передвигается по сайту с помощью клавиши Tab.

Airbnb позволяет пользователям сразу перейти к основному контенту страницы, Target даёт пользователям возможность перейти к основному контенту или в низ страницы. Wikipedia сделала скрытые ссылки внутри основной страницы и даёт возможность перескочить либо на общую навигацию, либо на строку поиска.

<a href="http://www.aldoshoes.com/" rel="nofollow noopener" target="_blank">Aldo Shoes</a> также предлагает ссылку «пропустить», которая позволяет пользователям быстро перейти к основному контенту
Aldo Shoes также предлагает ссылку «пропустить», которая позволяет пользователям быстро перейти к основному контенту

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

Добавьте меню «Специальные возможности»

Некоторые сайты прикладывают дополнительные усилия, чтобы создать полномасштабное меню «Специальные возможности», к которому можно получить доступ через клавиатуру. Такое меню представляет собой альтернативный способ навигации, который нужен для того, чтобы упростить опыт людей с ограниченными возможностями.

Посмотрите на специальное меню на Facebook, которое выпадает на страницу сверху
Посмотрите на специальное меню на Facebook, которое выпадает на страницу сверху

Facebook предлагает простую альтернативу основной навигации, потому что она состоит всего из трёх пунктов раскрывающегося списка:

  • Первый пункт обеспечивает быстрый доступ к различным секциям на текущей странице.
Что нужно учесть в разработке специальной навигации по сайтам для людей с ограничениями зрения и других возможностей
  • Второй пункт выводит быстрые ссылки на разные страницы.
Что нужно учесть в разработке специальной навигации по сайтам для людей с ограничениями зрения и других возможностей
  • Третий пункт показывает ссылку на "Accessibility Help", которая выдаёт остальную информацию на все специальные возможности, которые предлагает Facebook.
Что нужно учесть в разработке специальной навигации по сайтам для людей с ограничениями зрения и других возможностей

Такое меню просто использовать и легко понять, особенно для программ чтения с экрана.

Самое лучшее в этом меню то, что его можно быстро активировать через комбинацию клавиш opt + / вне зависимости от того, где на сайте находится пользователь. Так он может вернуться к началу навигации, не обновляя страницу или не нажимая «Назад» большое количество раз.

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

Настройте клавиши быстрого доступа

Клавиши быстрого доступа позволяют пользователям передвигаться и выполнять на вашем сайте множество действий только одной кнопкой. Это значительно уменьшает разочарование у людей с ограниченной подвижностью или с проблемами со зрением.

Twitter так описывает их подход к внедрению клавиш быстрого доступа: «Наши клавиши быстрого доступа функционируют как автомагистрали, а переход с помощью Tab — это как завернуть в маленький переулок».

Другими словами, клавиши j и k являются инструментами перехода между твитами в ленте, в то время как клавиша Tab перемещает внутри одного твита. Это умный и простой способ дать пользователям возможность пропустить контент, если он им кажется неактуальным, и одновременно дать им возможность посмотреть подробнее, если контент понравится.

Полный набор быстрых клавиш, работающих в Twitter
Полный набор быстрых клавиш, работающих в Twitter

Ещё одна интересная быстрая клавиша в Twitter — это «.». При её нажатии в ленту загружаются новые твиты, а пользователь перенаправляется на верх страницы. Сайты с лентой в режиме реального времени только выиграют, если создадут кнопку, которая будет обновлять и загружать новый контент на страницу.

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

Различные быстрые клавиши, доступные на Facebook
Различные быстрые клавиши, доступные на Facebook

Чтобы открыть такие ключевые страницы, как страница уведомлений, тоже нужно нажать лишь комбинацию клавиш ctrl + opt + 5. Если на вашем сайте есть несколько основных страниц, то назначив горячие клавиши, вы предоставите пользователям мгновенный доступ к контенту, и им не придётся искать определённую ссылку или путь.

И Twitter и Facebook занимаются специальными возможностями, потому что их основная цель — чтобы пользователи продвигали, делились и потребляли контент. Когда вы добавляете клавиши быстрого набора на свой сайт или цифровой продукт, делайте это с учётом своей цели, а не просто чтобы они были.

Элементы структуры и маркировки

Что нужно учесть в разработке специальной навигации по сайтам для людей с ограничениями зрения и других возможностей

Во всех последних устройствах Apple предустановлена VoiceOver — вспомогательная программа чтения экрана, которая позволяет людям с ограниченными возможностями пользоваться своими устройствами. Когда вы активируете VoiceOver, подключается набор быстрых клавиш и жестов для быстрого доступа к контенту. Кроме того, помощник произносит название активных элементов по мере продвижения пользователя по интерфейсу устройства.

Когда люди с ограниченными возможностями зайдут на ваш сайт, они будут полагаться на VoiceOver (или другие скринридеры), чтобы совершить покупки, заполнить формы и понять, где находится контент.

Одна из наиболее полезных возможностей VoiceOver — функциональность Rotor. Rotor даёт пользователям быстрый доступ к заголовкам, статьям, ссылкам, элементам управления и другим важным элементам. Если пользователь активирует Rotor (ctrl + opt + u, VoiceOver при этом должен быть активирован) появится диалоговое окно (modal), из которого программа чтения экрана прочитает все элементы. Затем с помощью стрелок пользователи могут выбрать нужный им элемент, работая лишь с одной кнопкой.

Посмотрите на функциональность Rotor в VoiceOver. Она обеспечивает быстрый доступ к различным элементам на вашем сайте
Посмотрите на функциональность Rotor в VoiceOver. Она обеспечивает быстрый доступ к различным элементам на вашем сайте

Если все разделы вашего сайта будут правильно промаркированы, описательно промаркированы как навигационный ориентир (landmark) и иерархия типов будет правильная, пользователи смогут уверенно пропускать целые неактуальные разделы сайта, чтобы найти тот контент, который они ищут.

Если вам неизвестно, как работают программы чтения экрана, я рекомендую включить VoiceOver на своем Mac (нажать ⌘ + F5) и попробовать поперемещаться по своим любимым сайтам. Это маленькое упражнение даст вам ценную информацию о том, как расстраивают простые задачи вроде онлайн-заказа продуктов, если нельзя воспользоваться мышью или трекпадом. А кроме того, вы поймёте, какие компании уделяют внимание нуждам всех своих пользователей, а не только широким слоям населения.

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

44
Начать дискуссию