Accessibility *

Сегодня веб-приложения стали сложными интерактивными системами, напоминающими полноценные десктоп приложения. Однако за красивыми интерфейсами и богатым функционалом часто скрывается важный аспект, которому уделяется недостаточно внимания — доступность (accessibility). Для миллионов пользователей с ограниченными возможностями это означает, что они не могут полноценно взаимодействовать с сайтом, выполнить базовые действия или получить информацию.

Проблема особенно ярко выражена в современных одностраничных приложениях (SPA), кастомных компонентах, модальных окнах и прочих динамических UI-решениях, которые не учитывают, как с ними будут работать вспомогательные технологии. Например:

В этой статье проанализирована разработка адаптивного интерфейса виртуальной реальности, способного подстраиваться под различные уровни остаточного зрения пользователей. Описаны ключевые принципы работы с OpenXR и Unity, показаны алгоритмы обработки визуальных данных и приведён пример реализации на C#. Статья содержит живые примеры из практики, субъективные замечания и юмор, чтобы читатель не уснул в полумраке лаборатории.

Привет, Хабр!

Недавно у меня появилась мысль поделиться распространёнными HTML- и CSS-ошибками, которые я вижу у коллег. Только мне хотелось выглядеть убедительно, чтобы не было вкусовщины. И тут я сильно задумался.

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

Давайте посмотрим, что я вам подготовил.

Есть некоторая ирония в том, как простые инструменты решают сложные задачи. Пока технические форумы гудят от обсуждений Kubernetes, пайплайнов машинного обучения и микросервисных архитектур, я хочу на минуту отвлечься и поговорить о чем-то до безобразия простом: Bash-скрипте. Не особенно изящном. Без функций. Без параметров. Без проверок корректности. Просто линейный, безжалостно прагматичный shell-скрипт, который за год сэкономил нам несколько недель работы.

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

Встречались ли вы с бейджем 18+ и думали, зачем он тут?

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

Разберёмся, откуда взялась эта маркировка, какие бывают категории и как с ней работать в интерфейсах и визуале.

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

Давайте по порядку.

После релиза первой версии стало ясно: Telegram порой ограничивает размер и скорость передачи файлов, а ещё появляется зависимость от внешнего API. Чтобы обойти эти ограничения, я решил встроить официальный сервер Telegram Bot API прямо в своё приложение.

Это позволило:

Привет, Хабр!

Меня зовут Андрей. Я техник и системный админ. И хоть я незрячий, продолжаю разрабатывать инструменты для автоматизации, системного мониторинга и просто удобной жизни за компьютером. Этот пост — о моём первом публичном проекте, который я решил выложить на GitHub и рассказать о нём на Хабре.

Проект называется AutoCraft Bot. Это гибрид: Telegram-бот и десктопное приложение на Python. Он управляет компьютером, запускает плагины, делает скриншоты, работает с голосом, поддерживает REPL и Telegram API — и всё это в виде одного .exe

В XIX веке бельгийский астроном Адольф Кетле попытался применить математику Ньютона к человеческому обществу. Он начал измерять рост, вес, силу, даже моральные качества людей — и обнаружил, что данные красиво ложатся на знакомую нам сегодня колоколообразную кривую (нормальное распределение).

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

Эта идея была настолько заразительной, что быстро проникла в медицину, антропологию, образование и даже военные стандарты. Например, американские ВВС в 1940-х сконструировали кабины самолётов под «среднего пилота». Результат? Выросло число аварий. Позже оказалось: среднего пилота не существует — ни один человек не соответствовал всем «средним» параметрам одновременно. 

Что такое BraiLex?

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

BraiLex можно использовать для ввода текста без фиксированного основания даже во время ходьбы.

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

(По состоянию на 11 июня 2025 года).

В мире SMM и digital-аналитики Telegram — кладезь инсайтов, трендов и идей. Но как быстро и удобно собирать посты из десятков каналов, не тратя часы на ручной копипаст? Я, как маркетолог с опытом работы с крупнейшими брендами, знаю цену времени и автоматизации. Сегодня расскажу, как можно решить эту задачу с помощью Python и Telethon — и почему профессионалы выбирают готовые решения.

Попрощайтесь с хаками в виде бордеров и псевдоэлементов и поздоровайтесь с CSS gap decorations.

Команда разработчиков Microsoft Edge рада сообщить, что CSS gap decorations - новый способ стилизации отступов между элементами flex, grid и многоколоночных макетах - теперь доступны для пробного использования разработчиками в Chrome и Edge 139!

Попробуйте его и поделитесь своими отзывами, чтобы помочь сформировать будущее этого API.

Константин Евтеев @beginner760собирает Java-код с помощью диктора NVDA, редактирует его в Блокноте и передает на Linux по SSH через самописные bash-скрипты. После потери зрения он не потерял интереса к жизни и желания быть полезным и выстроил собственную инженерную экосистему: оглавления по строкам .txt-файлами, навигация по main и маленьким методам, отладка на слух.

Я написала свой ESLint-плагин для доступности. Вот как и зачем.

Я люблю автоматизацию: если что-то можно доверить инструменту, это стоит делать. Особенно то, что повторяется из проекта в проект: aria-label, alt, tabIndex.

Линтер - это как фоновый напарник: один раз настроил - и он работает. Не устает, не отвлекается, не забывает. А в контексте доступности, где многое завязано на деталях, это особенно важно.

DOM предоставляет API для валидации пользовательского ввода. Вообще говоря, мы им пользуемся часто, например:

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

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильей. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.

Сегодня мы рассмотрим следующие аспекты:

• что можно сделать лучше для пользователей с дислексией;
• как незаметно улучшить интерфейс для пользователей с травмой кистей рук;
• есть ли сложности с сокращениями для пользователей скринридера.

Давайте начнём!

В предыдущей статье рассмотрели, как быстро настроить Cypress и axe-core для запуска автоматических тестов доступности (подробнее здесь).

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

В этой статье — 5 простых, но эффективных идей для автоматизированных accessibility-тестов, которые помогают системно повышать качество интерфейсов при минимальных затратах.

Всем привет! В этой статье мы разберем одну из важнейших тем при разработке любого веб‑сайта — доступность.

Она позволяет сделать наш сайт или веб‑приложение доступным максимальному количеству пользователей. И под максимальным количеством имеются ввиду не только пользователи со слабыми устройствами или интернетом, для которых мы должны предоставить максимально оптимизированное решение, но и пользователи с ограниченными (постоянными или временными) возможностями: люди без слуха, зрения, без возможности использовать мышь или клавиатуру для взаимодействия с контентом веб‑сайта.

Для чего же нам нужно работать над доступностью? Ответ напрашивается сам собой – расширение аудитории и привлечение новых клиентов (если вы оказываете услуги). По данным AccessiCart, при улучшенной доступности мы увеличиваем потенциальную аудиторию до 25%. (Ссылка на статью)

Помимо расширения аудитории, улучшение доступности положительно влияет на органический трафик (переходы на сайт из поисковых систем). Исследование, проведенное Semrush, показало, что 73,4% сайтов, внедривших решения по доступности, зафиксировали рост органического трафика, при этом 66,1% из них отметили увеличение трафика от 1% до 50%. (Ссылка на статью)

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

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

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

Эта статья - своеобразный мини-гайд для быстрого старта вместе с Cypress и axe-core. 

Почему такое сочетание технологий? 

Axe-core - это надежный движок, соответствует стандартам WCAG. Он проверяет действительно реальные проблемы: контраст, aria-label, роли, альтернативный текст. Его легко интегрировать.

Cypress - удобный фреймворк, с огромным количеством функций “из коробки”. Легкая установка, большое количество примеров. Сохраняет скриншоты, делает запись видео, идеален для пользовательских тестов.

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