CSS для невизуальных браузеров: стилизация под скринридеры

Последние пять лет я углубленно изучаю, как сделать веб-доступным для всех пользователей, включая тех, кто полагается на скринридеры. Часто разработчики забывают, что CSS это не только про визуальную красоту. Его возможности выходят далеко за рамки цветов и анимаций. В этой статье я расскажу, как свойства вроде speak-as и атрибуты типа aria-hidden влияют на взаимодействие со скринридерами, приведу примеры кода, сравнительные тесты и практические советы.

Почему CSS важен для невизуальной доступности?

Скринридеры — программы, которые преобразуют текст и элементы интерфейса в речь или шрифт Брайля — анализируют не только HTML, но и CSS. Например:

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

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

speak-as: как управлять озвучиванием контента

Свойство speak-as из модуля CSS Speech определяет, как браузер должен озвучивать содержимое элемента. Оно особенно полезно для чисел, аббревиатур и символов.

Возможные значения:

• normal: (по умолчанию): Контент читается стандартным образом.
• spell-out: Каждый символ произносится отдельно (например, «CSS» станет «С-Эс-Эс»).
• digits: Числа читаются поциферно («2024» → «два, ноль, два, четыре»).
• literal-punctuation: Знаки препинания озвучиваются явно.
• no-punctuation: Пунктуация игнорируется.

Примеры кода

/* Озвучивание аббревиатуры по буквам */
.abbreviation {
  speak-as: spell-out;
}

/* Числа как отдельные цифры */
.phone-number {
  speak-as: digits;
}

/* Игнорирование точек в дате */
.published-date {
  speak-as: no-punctuation;
}

Как это работает в реальности:
Если применить speak-as: digits к номеру телефона +7 900 123-45-67, скринридер произнесет: «Плюс семь, девять, ноль, ноль, один, два, три, четыре, пять, шесть, семь». Без этого свойства он может прочитать «Семь миллиардов девятьсот миллионов сто двадцать три тысячи четыреста пятьдесят шесть семь», что запутает пользователя.

aria-hidden: когда и как скрывать элементы от скринридеров

Атрибут aria-hidden="true" указывает, что элемент и его дочерние элементы не должны быть доступны вспомогательным технологиям. Но важно не путать его с CSS-свойствами display: none или visibility: hidden, которые также влияют на доступность.

Сравнение методов скрытия:

Когда использовать aria-hidden:

1. Декоративные элементы: Иконки, разделители, графики без смысловой нагрузки.
2. Дублирующий контент: Например, если текст уже озвучен через ARIA-лейбл.
3. Интерактивные элементы вне фокуса: Временные уведомления, которые не нужны для навигации.

Пример:

<!-- Иконка лупы, которую скринридер проигнорирует -->
<button>
  <span class="search-icon" aria-hidden="true">🔍</span>
  <span class="visually-hidden">Поиск</span>
</button>

Сравнительные тесты: как speak-as и aria-hidden работают в разных скринридерах

Я протестировал поведение свойств в NVDA, JAWS и VoiceOver. Вот результаты:

Выводы:

• speak-as поддерживается не всеми скринридерами, поэтому дублируйте информацию в текстовой форме.
• aria-hidden — более надежный способ скрыть контент.

Рекомендации

1. Всегда проверяйте в скринридерах. Теория и реальность могут отличаться.
2. Не злоупотребляйте aria-hidden. Если элемент важен для понимания контента, не скрывайте его.
3. Комбинируйте подходы. Например, используйте speak-as вместе с ARIA-лейблами для чисел:

<div class="price" aria-label="2500 рублей">
  <span speak-as="digits">2500</span> руб.
</div>

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

Стилизация для скринридеров это набор осознанных практик. Используя speak-as, вы делаете контент понятнее, а с aria-hiddenубираете лишний шум.

Попробуйте применить примеры из статьи в своих проектах и протестируйте результат. Если есть вопросы, пишите в комментариях, обязательно отвечу!