Hi-Tech

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

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

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

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

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

Book of the Month — это хороший пример сайта с чёткой и понятной навигацией

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

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

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

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

На Airbnb есть понятная ссылка «Перейти к контенту»

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

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

Aldo Shoes также предлагает ссылку «пропустить», которая позволяет пользователям быстро перейти к основному контенту

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

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

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

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

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

  • Первый пункт обеспечивает быстрый доступ к различным секциям на текущей странице.

  • Второй пункт выводит быстрые ссылки на разные страницы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#дизайн

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

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

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

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

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