Почему так важно, чтобы ваш веб-сайт был доступен с клавиатуры.

Акцент на доступности всегда был одним из главных приоритетов для цифровой команды. В связи с этим, в течение последних нескольких месяцев мы сотрудничали с Iterators LLC для проведения аудита доступности сайта Boston.gov. Они помогли нам протестировать наш веб-сайт, чтобы убедиться, что люди могут более легко ориентироваться на сайте и получать доступ ко всем его услугам и ресурсам, в том числе люди с:

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

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

Почему важна доступность клавиатуры

В Руководстве по обеспечению доступности веб-контента (WCAG) 2.1 указано, что веб-сайт или цифровой продукт должен быть доступен с клавиатуры. если:

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

Что это значит? Пользователи должны иметь возможность использовать только клавиатуру — а не мышь — для навигации по веб-сайту. Многие люди с двигательными нарушениями или нарушениями зрения используют клавиатуру для навигации по веб-сайтам. Веб-сайт, который не был разработан и протестирован в соответствии со стандартами доступности для клавиатуры, может помешать им получить приятный и успешный пользовательский опыт.

Например, «индикаторы фокуса» показывают пользователям, с каким элементом веб-страницы происходит взаимодействие. Что такое индикатор фокуса? Одним из примеров является цветной контур, который появляется вокруг кнопок, ссылок и других интерактивных элементов при наведении на них курсора мыши. Для тех, кто использует клавишу «Tab» для навигации по интерактивным элементам веб-страницы, индикаторы фокуса имеют решающее значение для комфортного использования. Эти пользователи не могут полагаться на мышь, если подсветка индикатора фокуса не работает.

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

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

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

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

Работая с Iterators, мы выявили несколько проблем доступности для пользователей клавиатуры на сайте Boston.gov. Например, в видео выше вы можете увидеть, как пользователь клавиатуры перемещается по интерактивным элементам внизу главной страницы Boston.gov. Порядок индикатора фокуса не соответствует предсказуемой схеме. Это затрудняет навигацию по странице. Наиболее интуитивной была бы последовательность слева направо. Но в видео вы можете видеть, что первым выделенным элементом фокуса клавиатуры является значок BOS:311 в правом углу нижнего колонтитула, а не список ссылок в левом углу нижнего колонтитула. Обеспечивая выделение элементов фокусом клавиатуры в интуитивно понятном порядке, пользователь может легче ориентироваться на странице. В видео ниже вы можете увидеть, как изменения порядка фокуса улучшают пользовательский опыт.

Ниже приведен еще один пример веб-компонента, который ранее был недоступен с клавиатуры. В следующих видеороликах вы можете увидеть, как пользователь с клавиатурой пытается перемещаться по набору компонентов, называемых «ящиками». В первом видео фокус клавиатуры полностью пропускает ящики при переключении клавишей Tab. Это означает, что пользователь вообще не может с ними взаимодействовать. Подобные ящики встречаются на многих других страницах Boston.gov. Во втором видео вы можете увидеть, как пользователь с клавиатурой успешно открывает ящики и получает доступ к содержащейся в них информации.

Что мы будем делать дальше?

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

Хотя мы гордимся последними достижениями на сайте Boston.gov , мы понимаем, что всегда есть место для улучшения. Мы с нетерпением ждем более доступного будущего для Boston.gov, и будем рады услышать ваши отзывы. Если у вас есть какие-либо замечания или вопросы, отправьте нам электронное письмо по адресу digital@boston.gov . Мы также постоянно сотрудничаем и взаимодействуем с нашими коллегами из Комиссии по делам инвалидов . Если вы напишете им о своем опыте работы с Boston.gov или с любыми нашими цифровыми инструментами, они также обязательно передадут ваши отзывы нам.

Этот пост написала Клэр Огден, стажер, работающая этим летом в цифровой команде города Бостона. Она — студентка старшего курса Университета Брандейса, изучающая медиа и коммуникации. Вы можете связаться с ней в LinkedIn .