Accessibility *

Встречались ли вы с бейджем 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 - мой любимый инструмент. Требует чуть больше времени при настройке проекта, но зато в дальнейшем помогает выявлять явные ошибки.

Мозг людей с эпилепсией похож на электрическую цепь с перегрузкой. Резкие вспышки света или мигание (3+ раз в секунду) вызывают «короткое замыкание» — приступ. Дизайн с такими эффектами становится буквально опасным».

Microinteractions play a huge role in UX design despite being labelled “micro”. They include all the small details you can find in a software product, i.e. animations, emotive reactions, clicks, vibrations, etc. Not only do they make it more interesting and joyful for users to interact with a product, they also help ease the navigation process and make it more intuitive by providing important information. Which types of microinteractions can be used in apps, what makes them a vital part of software products, how to implement them correctly and which common mistakes to avoid when designing small details? 

Types of microinteractions

Цвет — это неотъемлемая часть нашей повседневной жизни: он помогает нам ориентироваться, принимать решения и воспринимать информацию. Однако для миллионов людей по всему миру восприятие цвета ограничено из-за дальтонизма.

По данным Colour Blind Awareness (https://www.colourblindawareness.org/), дальтонизм встречается у 1 из 12 мужчин и 1 из 200 женщин. Это значит, что примерно каждый десятый человек испытывает трудности с восприятием цветов. Для дизайнеров, разработчиков и создателей контента цветовая доступность становится необходимостью.

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