Готов ли интернет к брайлевским дисплеям?
Журнал TIME представил ежегодный список лучших изобретений 2025 года. Среди прорывных технологий в области ИИ, робототехники и освоения космоса отдельную категорию традиционно выделили для решений, повышающих доступность (Accessibility). Эти инновации призваны улучшить качество жизни пожилых людей и людей с инвалидностью.
Одно устройство из этой подборки заслуживает особого внимания. Речь о Monarch от American Printing House for the Blind. Если коротко, это многофункциональный, современный брайлевский дисплей, который выводит тактильную графику и текст, заменяя десятки бумажных книг.
Это натолкнуло меня на мысль: что, если бы подобные аппараты стали массовыми, а их поддержка была бы обязательной для всех систем предоставления контента — веб-платформ, сайтов, лендингов, блогов и социальных сетей?
Возникает вопрос: а что интересного прямо сейчас есть в вебе для поддержки таких девайсов? Ведь технически уже сегодня человек может подключить брайлевский дисплей к компьютеру или смартфону, зайти в браузер и открыть любой сайт. Но будет ли ему там комфортно?
Прежде чем мы углубимся в код
Для тех, кто не знаком с темой: шрифт Брайля — это не просто набор точек. Это конвертация букв алфавита в тактильные комбинации рельефных символов, расположенных в две колонки. Каждая комбинация имеет свой эквивалент в Юникоде, а значит, брайль можно выводить на экран в виде текста.
Я сделал небольшой инструмент, который переводит английский, русский или белорусский текст в шрифт Брайля и обратно:
👉 arturbasak.dev/braille-converter
@media braille: запрос из прошлого
Если вы когда-либо листали старые спецификации CSS, а именно CSS 2.1 и Media Queries Level 3, вы могли наткнуться на упоминание медиатипов:
@media braille {
/* Стили для тактильных брайлевских устройств */
}Помимо braille, там же упоминались handheld, embossed (принтеры) и aural (синтезаторы речи).
Где же сайты под braille?
Я пробовал искать. Правда, искал долго. Инструментами, вручную, по форумам… Нет ни одного крупного сайта, который бы использовал эти запросы для адаптации контента под брайль. И дело не в том, что разработчики «забили». Реализация так и не была осуществлена браузерами. Это осталось красивой, но мёртвой теорией на бумаге.
В современных стандартах, Media Queries Level 4, эти запросы официально помечены как deprecated. Спецификация прямо указывает:
«User agents must recognize the following media types as valid, but must make them match nothing».
В список попали:
tty,tv,projection,handheldbraille,embossedaural,speech
В этом есть логика. CSS исторически отвечает за визуальное представление. То, на что мы смотрим глазами. Стилизовать синтезатор речи или управлять точками брайлевского дисплея через CSS — это странно.
С другой стороны, точки шрифта Брайля — это тоже контент. Да, их нет смысла раскрашивать или менять им кегль (они тактильные). Но вот выравнивание, отступы, позиционирование на «экране» дисплея — это могло бы быть полезно. Представьте: таблица, переведённая в брайль, которая сохраняет структуру колонок.
Braille CSS: неофициальный черновик
В 2016 году появился интересный неофициальный черновик Braille CSS (последняя обновление было в 2021). Авторы попытались представить, как CSS всё же мог бы работать с брайлем.
Пример из черновика:
@page {
size: 10 3; /* 10 символов в ширину, 3 строки */
}
p {
display: block;
margin-left: 1; /* отступ слева в один символ */
}Разметка:
<body>
<p>⠤⠤⠤</p>
</body>Как это выглядело бы на дисплее:
Идея в том, чтобы управлять не цветом, а раскладкой тактильных символов. Пока что это лишь эксперимент, но он показывает: потребность в управлении формальной структурой брайлевского текста существует.
Щепотка ARIA: параллельный контент для брайля
Когда мы говорим о скринридерах, мы часто разделяем визуальный контент и тот, что озвучивается (например, с помощью aria-label). Та же логика применима и к брайлю.
Транслировать тяжеловесные интерфейсы напрямую в брайль — неэффективно. Зрячий пользователь сканирует страницу по диагонали за секунды, а человек, читающий тактильно, тратит на это гораздо больше времени. Ему нужна лаконичность.
В современном ARIA для этого есть два специальных атрибута:
1. aria-braillelabel
Позволяет задать сверхкраткий вариант текста, который будет отправлен прямиком на брайлевский дисплей, минуя стандартное содержимое.
<Button
aria-braillelabel="три" {/* адаптация для шрифта Брайля */}
aria-label="3 из 5 звезд" {/* адаптация для скринридера */}
>
{/* визуальная интерпретация для зрячих пользователей */}
<Stars value={3} total={5} />
</Button>Таким образом мы можем делать варианты текстовок для разных устройств, которые будут интерпретировать нашу веб-страницу.
2. aria-brailleroledescription
По аналогии с aria-roledescription позволяет задать сокращённое название роли элемента, адаптированное для быстрого тактильного чтения.
<div
role="article" {/* семантическая роль для интерпретации браузером и девайсами */}
aria-roledescription="slide" {/* человекочитаемая роль, которую озвучит скринридер */}
aria-brailleroledescription="sld" {/* сокращенная роль для удобства чтения по шрифту Брайля */}
aria-labelledby="slide1heading">
<h1 id="slide1heading">Welcome to my talk</h1>
<img alt="Me" src="images/me.jpg" />
</div>Триумвират ролей позволяет более тонко настроить верстку.
Идём дальше: готовый брайль в атрибутах
Обычно предполагается, что вспомогательная технология (скринридер + драйвер дисплея) сама переведёт текст атрибута в шрифт Брайля. Но ничто не мешает нам подготовить его вручную, чтобы гарантировать точность сокращения.
<Button
aria-braillelabel="⠠⠞⠗⠊" {/* Три */}
aria-label="3 из 5 звезд"
>
<Stars value={3} total={5} />
</Button><div
role="article"
aria-roledescription="slide"
aria-brailleroledescription="⠎⠇⠙" {/* sld */}
aria-labelledby="slide1heading">
<h1 id="slide1heading">Welcome to my talk</h1>
<img alt="Me" src="images/me.jpg" />
</div>Визуальный веб построен на метафоре света, скорости и дистанции. Брайль же требует иного — тактильной речи, медленного вчитывания, физического контакта. Мы умеем технически адаптировать контент для брайлевских дисплеев, но не делаем этого массово не потому, что сложно, а потому, что вся философия современного интернета противится осязанию. Нас научили смотреть, скроллить, пролистывать — но не касаться. И в этом смысле брайль для веба — не просто очередная опция доступности, а вызов самой природе цифрового: напоминание о том, что информация может быть не только лучом света, падающим на сетчатку, но и рельефом под подушечкой пальца.
Слово, которое нельзя потрогать, всё ещё наполовину не сказано.