Пререквизиты: я предполагаю, что у вас есть некоторые базовые понимания концепций доступности, если вы не рекомендуете прочитать «Часть 1: Введение» и «Part 2: 5 Priciples, которые вы должны сразу же начать реализовать», потому что вы погружаетесь в это.
В предыдущем посте я освещал 5 принципов, которые должны быть довольно легко для каждого разработчика, чтобы начать реализацию сразу. На этот раз мы рассмотрим некоторые более сложные темы доступности, такие как ловушки для клавиатуры, петли фокусировки, уменьшение движения и скрытие вещей доступным образом. Прочитав этот пост, вы должны лучше понять, как подходить к этим проблемам.
Оглавление:
1. Клавианые ловушки и петли фокусировки 2. Доступность для людей с вестибулярными расстройствами 3. Скрытие вещей доступным образом 4. Избегайте зависимостей CSS для сводки контента
1. Клавианые ловушки и петли фокусировки
Навигация по клавиатуре является очень важным фактором создания доступного веб -приложения. Одна из проблем, которую мы должны принять во внимание, – это ловушки Focus и фокус. Я видел эти термины, используемые по -разному в разных статьях, так что вот мои определения их:
- Ловушка для клавиатуры: когда пользователь может использовать клавиатуру, чтобы перейти к части вашего приложения, но затем не может перейти назад или выхода. Они буквально пойманы в ловушку.
- Focus Loop: Когда мы хотим, чтобы фокус оставался в определенной области приложения, пока пользователь не решит двигаться дальше. Например, во всплывающем окне/модале.
В целом важно, чтобы порядок вкладки на вашей странице последовал за логическим порядком, и чтобы каждый кликбельный элемент был доступен с помощью навигации по клавиатуре. Если у вас есть очень большая область заголовка с множеством ссылок, это может быть полезно, чтобы добавить ссылку «прыгать к контенту», чтобы пользователь не должен был вмешиваться в все, чтобы добраться туда.
Как избежать ловушек для клавиатуры
Нет магического решения, которое бы решает все ловушки для клавиатуры. Лучше всего проверить по мере создания, и убедиться, что каждый новый компонент доступен и работает, как и ожидалось. Но есть некоторые вещи, которые вы должны помнить.
Использование этого .focus () на элементе может сделать его ловушкой, поэтому убедитесь, что вы тщательно проверяете его, если вы используете его.
Я создал Кодепен здесь, если вы хотите увидеть приведенный выше код в действии .
Еще одна вещь, которая может создать ловушку для клавиатуры, – это если вы неправильно установите фокус при работе с контентом, который скрыт визуально, но все еще является частью DOM и доступен через навигацию по клавиатуре. Вы должны принять меры, чтобы вернуть стиль, который скрывает элемент, если элемент находится в фокусе.
Я расскажу больше о том, чтобы скрыть вещи доступными способами позже в этом блоге.
Как достичь петлей фокусировки
Есть также ситуации, когда мы хотели бы «поймать» фокус. Наиболее распространенным примером этого является то, что у нас есть всплывающая форма или диалог, и пользователь может вмешаться через поля в форме. Когда они достигают конца, мы хотим, чтобы фокус снова вернулся к началу всплывающего окна, а не выходить на улицу на задний план.
Мы можем достичь этого, добавив немного JavaScript, который прослушивает события вкладок, и если элемент в фокусе является последним, а затем перейдите в верхнюю часть формы. Не забудьте добавить возможность для пользователя выйти из диалога. Эта статья о CSS-Tricks дает хорошее представление о фокусирующих циклах Анкет
2. Доступность для людей с вестибулярными расстройствами
В какой -то момент в вашей жизни вы, вероятно, испытали головокружение. Может быть, вы слишком быстро встали с дивана, или развернулись слишком быстро? Может, вы даже заболели от головокружения?
Представьте себе, если у вас есть состояние, которое заставило вас чувствовать себя так (или хуже). Это реальность для людей с вестибулярными расстройствами. И иногда эти симптомы могут быть вызваны движением на веб -сайте.
Как работать с уменьшенным движением Современные браузеры имеют настройку «предпочитают уменьшение движения», которые пользователь может включить. Существует также запрос CSS Media, который мы можем использовать, чтобы увидеть, будет ли установлено «Предпочитает уменьшенное движение».
@media (prefers-reduces-motion){
//do things to reduce motion here
}
@media (prefers-reduces-motion: no-preference){
//do things to create motion here
}
Если вы создаете движение с JavaScript, вы можете использовать window.matchmedia («Предпочтения-уменьшенные движения») Чтобы увидеть, предпочитал ли пользователь снижение движения или нет. Функция вернет объект со свойством «совпадает», которое будет правдой, если пользователь установит предпочтение уменьшенного движения.
const userPreferReducedMotion =
window.matchMedia('prefers-reduced-motion');
const reducedMotionSettingListener = () => {
if(userPreferReducedMotion.matches){
//do the motion things here
}
}
userPreferReducedMotion.addListener(reducedMotionSettingListener);
Другие вещи, которые следует учитывать
- Анимации, видео, ползунки или другие части вашего сайта, которые имеют движение на нем, должны не запустить автоматически.
- Не используйте подарки или другие типы контента, которые пользователь не может контролировать/отключить.
3. Скрытие вещей доступным образом
Вы можете подумать что -то вроде: «Скрыть вещи легко! Просто используйте «дисплей: нет»! Почему это покрыто «Сложным Topix»? ». Ну, к сожалению, это не так просто, когда мы хотим, чтобы контент был доступен для всех. Если мы используем «дисплей: нет», элемент не просто скрыт, он полностью удален из DOM, и поэтому он недоступен для атипийных технологий, как считыватели экрана. В некоторых случаях это то, чего мы хотим, но
Но с правильным подходом, скрытие контента также может быть очень полезным для доступности. Мы можем скрывать вещи визуально и отображать его только для считывателей экрана, мы можем скрыть контент от считывателей экрана и показывать его только визуально, или мы можем скрыть контент от обоих.
Скрытие вещей от читателей экрана
Вы можете использовать атрибут ARIA «Aria-Hided», чтобы скрыть некоторые контенты от читателей экрана. Стоит отметить, что этот атрибут не должен Будьте использованы на фокусируемом контенте, таком как входы, кнопки и ссылки.
Скрытие вещей визуально, но отображение для считывателей экрана
Это может быть очень полезно, чтобы добавить дополнительный контекст или объяснение тем, кто доступ к странице с помощью считывателя экрана. Общий способ сделать это – провести класс для визуального укрытия вещей и использования этого класса на элементах, которые вы хотите спрятать визуально – но сохраняйте доступность для читателей экрана.
У проекта A11Y есть статья об этом где они используют атрибут клипа, как показано ниже, для создания визуально скрытого стиля.
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
4. Избегайте зависимостей CSS для содержания
Если ваш сайт зависит от того, что CSS будет функциональным или понятным, он может быть большой проблемой доступности, поскольку большинство вспомогательных технологий полностью игнорируют CSS. Как упомянуто в предыдущем разделе, это может относиться к скрытию вещей. Но также, если вы используете CSS для добавления контента на вашу страницу, как в примере ниже:
.myClass::before{
content: "This content is not available for screen readers"
}
.myClass::after{}
Резюме
- Лучший способ избежать Клавианые ловушки это постоянно проверить, что каждый интерактивный элемент на вашей странице доступен с навигацией клавиатуры, и что вы также можете «вернуться» состояния FOUCS.
- Используйте JavaScript, чтобы сохранить Focus Loop Внутри всплывающего окна/модала.
- Используйте запросы CSS Media или проверьте window.matchmedia (‘(предпочтение-восстановительное движение)’), для уменьшенное движение Чтобы сделать ваш сайт доступным для людей с вестибулярными расстройствами.
- Имейте в виду, что «дисплей: нет» не всегда правильный способ скрыть вещи Анкет И что вы можете использовать атрибуты ARIA или CSS, чтобы скрыть/отображать различный контент для людей, использующих считыватель экрана, и пользователей без нарушений зрения.
- Не используйте CSS, чтобы добавить контент на вашу страницу.
Ресурсы
- Доступ к клавиатуре (Универсальный дизайн -центр)
- Как ловить FUCS внутри элемента (CSS -трюки)
- Введение в предпосылки по уменьшению Motion Media Query (CSS -трюки)
- Учебник для вестибулярных расстройств (A11yproject)
- Визуально скрыт (A11T Project)
Вам помогла данная статья? Следуй за мной в Твиттере быть уведомленным, когда я публикую что -то новое!
Кроме того, если у вас есть какие -либо отзывы или вопросы, пожалуйста, дайте мне знать в комментариях ниже.:)
Спасибо за чтение и счастливое кодирование!
/Eli
Оригинал: “https://dev.to/elischei/a-look-at-some-more-complex-accessibility-challenges-lah”