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

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

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

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

Как работает доступность клавиатуры?

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

Основы навигации с помощью клавиатуры

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

• Переход к следующему элементу управления: вкладка (или клавиша со стрелкой вправо или вниз для соответствующих переключателей и выбора параметров)
• Переход к предыдущему элементу управления: Shift + Tab (или клавиша со стрелкой влево или вверх для соответствующих переключателей и выбора параметров)
• Щелчок по элементу управления: Enter и/или пробел
• Навигация между связанными переключателями или выбор опций: клавиши со стрелками

Порядок фокусировки

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

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

Специальные возможности клавиатуры и Рекомендации по доступности веб-контента (WCAG)

Руководство по доступности веб-контента (WCAG) определяет три уровня соответствия — уровень A, уровень AA и уровень AAA — которые были приняты в качестве стандартов для региональных или национальных законов о доступности веб-сайтов по всему миру.

Доступность клавиатуры — один из критериев соответствия уровню A. Критерии уровня A описывают обязательные функции для всего веб-контента. Они также считаются самыми простыми в реализации.

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

Тем не менее, доступность клавиатуры также легко ошибиться, если мы не будем осторожны. Вот примеры распространенных проблем со специальными возможностями клавиатуры, обнаруженных в Интернете:

• Незаметные состояния фокусировки
• Неправильный порядок фокусировки
• Интерактивные элементы, которые не могут получить фокус
• Сложные компоненты, которые не воспринимают взаимодействие с клавиатурой

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

5 шагов для создания приложений, доступных с клавиатуры

1. Создавайте интуитивно понятные взаимодействия

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

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

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

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

2. Создайте свое приложение так, чтобы клавиатура могла делать все, что может мышь.

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

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

Всякий раз, когда мы добавляем интерактивность к элементам, не являющимся элементами управления, нам нужно установить для их атрибута tabIndex значение 0 . Это позволит элементу получать фокус в правильном порядке при нажатии клавиши Tab. Нам также необходимо реализовать обработчики событий нажатия или нажатия клавиши для регистрации «кликов» с помощью клавиши Enter и/или пробела (ссылки можно нажимать с помощью обеих клавиш, а кнопки поддерживают только клавишу Enter).

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

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

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

3. Выполните дополнительную работу при переопределении порядка фокуса по умолчанию

Порядок фокусировки — еще одно требование WCAG, тесно связанное с доступностью клавиатуры. Чтобы соответствовать критериям уровня А, порядок фокуса должен соответствовать визуальной последовательности интерактивных элементов на странице. Пользователи клавиатуры должны иметь возможность перемещаться по элементам управления на экране сверху вниз и в том же горизонтальном направлении, что и текстовое содержимое (слева направо или справа налево).

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

Вам также может понравиться: Создание доступной навигации с помощью Liquid и Shopify.

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

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

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

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

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

Браузеры используют CSS-свойство outline , чтобы отобразить своего рода визуальную индикацию того, что элемент находится в фокусе. Состояния фокуса предназначены для того, чтобы помочь пользователям определить, какой элемент будет регистрировать события клавиатуры, когда они перемещаются по странице с помощью клавиатуры.

Дизайнеры и разработчики очень часто заменяют состояния фокуса по умолчанию, отображаемые браузерами. Это может включать обновление outline по умолчанию или его полное удаление и замену другим свойством CSS, таким как background , border , box-shadow , color или transform .

Вам также может понравиться: Создание доступной пагинации с помощью Liquid.

Как бы мы ни решили отображать настраиваемые состояния фокуса в наших приложениях, мы должны убедиться, что они соответствуют следующим требованиям доступности:

• Достаточный цветовой контраст: должен быть достаточный контраст между нашим состоянием фокусировки и цветами вокруг него, чтобы пользователи с ослабленным зрением могли легко отслеживать, какой элемент в данный момент находится в фокусе.
• Изменения цвета сочетаются с другими визуальными индикаторами: изменение цвета границы, шрифта или фона элемента может быть незаметно для пользователей с дальтонизмом. Его следует сочетать с другими визуальными изменениями, которые не требуют от пользователей способности различать цвета. Это также относится к состояниям наведения и ошибки, которые связаны с изменением цвета.
• Отображается в высококонтрастных темах: некоторые свойства CSS, включая background и box-shadow , игнорируются, когда на устройствах Windows включен режим высокой контрастности. Изменения в цвете также могут не регистрироваться, поэтому вдвойне важно полагаться на дополнительные индикаторы, которые воспринимаются людьми, которым нужен больший контраст между цветами фона и переднего плана.

Хотя допустимо переопределять свойство outline по умолчанию, никогда не удаляйте состояния фокуса по умолчанию без замены.

5. Обеспечить ярлыки для пользователей клавиатуры

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

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

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

Пропустить ссылки — это больше, чем просто удобные ярлыки. Это пример обходных блоков, которые должны соответствовать стандартам уровня A WCAG.

Часто тестируйте свое приложение, став пользователем клавиатуры.

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

Вот несколько вопросов, о которых следует помнить, когда мы тестируем наше приложение на совместимость с клавиатурой:

• Могу ли я использовать клавиатуру для взаимодействия со всем, что реагирует на щелчки мыши и жесты?
• Кто-нибудь знает, как взаимодействовать с этим элементом, когда он получает фокус?
• Соответствует ли порядок фокуса визуальной последовательности интерактивных элементов на странице?
• Могу ли я отслеживать, какой элемент в данный момент находится в фокусе, даже если мне требуется более высокий контраст между цветами?
• Могу ли я легко перейти к основному содержанию страницы?

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

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