Приемы CSS, которые могут повредить доступности

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

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

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

Имея это в виду, давайте рассмотрим несколько приемов CSS, которые могут повредить доступности. Они включают в себя общие функции, которые требуют тщательного рассмотрения, прежде чем вы начнете писать код. Давайте начнем!

Отображение важного текста с использованием свойства content

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

Но последнее может быть особенно проблематичным. Текст, добавляемый через свойство content , не включается в объектную модель документа (DOM). Это означает, что вспомогательные технологии, такие как программы чтения с экрана, могут не распознать его.

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

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

Создание анимационных эпизодов с интенсивным миганием

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

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

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

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

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

Неинтуитивные состояния :hover или :focus для интерактивных элементов

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

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

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

Первоначальный стиль интерактивного элемента — это только полдела. Предлагая интуитивно понятные стили для псевдоклассов :hover и :focus дополняют пользовательский интерфейс.

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

Принятие основ доступного дизайна как должное

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

Довольно часто остаются позади основы доступного дизайна. Те приемы CSS, которые дизайнеры могут принять как должное и предположить, уже соответствуют стандартам.

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

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

Речь идет об ответственном использовании CSS

Поскольку CSS настолько мощен, легко соблазниться возможностями, которые он может предложить. Зачем довольствоваться простой анимацией, если можно создать что-то кинематографическое? И как мы могли не полюбить удобство его использования для создания контента?

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

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

CSS нужен для облегчения доступности. Все дело в том, как мы его используем.