Accessibility *

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

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

• какие сюрпризы есть при использовании свойства display;
• о чём нужно помнить при вёрстке кнопки «Показать пароль»;
• зачем нужны подсказки с помощью атрибута aria-label при разметке областей навигации;
• как можно переборщить с заголовками и какие проблемы будут.

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

Привет! Меня зовут Павел Конон, я аналитик в команде Антиробота в Яндексе. Занимаюсь развитием инструмента капчи в команде Антиробота. Думаю из названия команды понятно, что мы работаем над системой онлайн классификации источников запросов — робот или человек.

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

Компьютерные и мобильные игры — это реальность современных подростков. Но все ли дети могут играть в игры? Да, включая и тех, у кого инвалидность по зрению. Сегодня благодаря современным технологиям доступных игр для незрячих людей становится всё больше, а сами игры — разнообразнее.

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

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

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

Меня зовут Женя Тютюев, я iOS-разработчик в компании 2ГИС. Хочу поделиться, как адаптировал наше приложение под VoiceOver: 

— Делюсь историей про сдвиг парадигмы и как перешёл из стадии «делать, потому что Эпл советует» в совершенно новую — «делать для людей». 

— Как разработал новый вид snapshot-тестирования, чтобы ничего не ломалось при добавлении новых неадаптированных элементов. 

— И описал несколько нюансов, которые важно учесть в работе: escape, динамический расчёт доступности, укрупнение элементов.

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

Всем привет! Меня зовут Ксения Анисимова, я студентка ИТМО. Весной этого года наша команда ― Rangers of Accessibility ― победила в хакатоне МТС True Tech Hack в треке «Улучшение клиентского опыта витрины МТС Live для пользователей с особыми потребностями». В рамках конкурсного проекта мы придумали новый способ отображения карты зала, а также переработали пользовательский путь для скринридеров, чтобы незрячие и слабовидящие люди тоже могли покупать билеты. А еще добавили фильтрацию мероприятий (и площадок) по опциям доступности (наличию тифлокомментирования, маршрутов для маломобильных граждан и сопровождения на русском жестовом языке). В финале хакатона мы представили свой проект в рамках конференции True Tech Day.

В этой статье расскажу о деталях решения ― какие проблемы мы выявили и как их решали.

В 1824 году 15-летний незрячий французский мальчик Луи Брайль изобрел рельефный шрифт, которым сегодня пользуются люди с нарушениями зрения по всему миру. Так появилась первая полноценная ассистивная технология в истории. В этой статье я расскажу, какие еще технологии подобного рода у нас есть сегодня в цифровом мире — в котором так многое зависит от способности видеть, читать и кликать.

Современный мир сложно представить без компьютерных игр. Только за 2023 год российские пользователи потратили на компьютерные игры и внутриигровые товары 161 млрд рублей.

Однако есть категория людей, которым зачастую путь в мир гейминга закрыт — это незрячие люди. «Обычные» компьютерные игры для незрячего пользователя недоступны, поскольку подразумевают графический интерфейс и делают упор на визуальную составляющую. Исключение здесь, пожалуй, только текстовые квесты, браузерные игры и муды (MUD).  В основном же компьютерные игры, доступные для незрячих пользователей, создаются специально для них. А потому их разнообразие несравнимо с разнообразием «обычных» игр. В этой статье мы расскажем о некоторых, самых интересных компьютерных играх для операционной системы Microsoft Windows, которые доступны для незрячих пользователей. После описания каждой игры, можно будет прослушать короткий ролик, иллюстрирующий то, как организована игра.

Обзор подготовил Владимир Довыденков, автор и сооснователь портала для незрячих людей Тифлокомп, при поддержке команды базового курса по цифровой грамотности для незрячих людей, созданного инклюзивным проектом Everland в партнерстве с билайн и «Альянсом по защите детей в цифровой среде».

В целом игры для незрячих пользователей можно разделить на 2 вида:

· Текстовые, то есть игровые события озвучиваются с помощью программы экранного доступа (скринридеров);

· Звуковые – это игры, в которых скринридер нужно отключать, а вся обратная связь идет через игровые звуки и записанные сообщения;

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

Сегодня я отвечу на следующий вопрос: «Как скрыть элемент с помощью CSS доступно?»

Всем привет, мы последние 2 года очень плотно подсели на тему доступности (он же accessibility, он же a11y) в наших проектах, хотелось бы рассказать на какие грабли наступали, какие уроки вынесли, возможно, кто-то избежит граблей

В целом а11и это про слепых, слабовидящих, плохо видящих, нарушения зрения (дальтонизм и прочее), про ограничения мобильности, когнитивные нарушения и многое другое.

Идеально для всех не будет, идеально не ждут, любое улучшение будет круто.

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

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

• какие скрытые проблемы с паттерном «visually-hidden» нас ждут;
• в каких ситуациях кнопка «Закрыть» указывает на выход;
• чем вредно значение contents у свойства display;
• почему подсказка с помощью атрибута aria-label вызывает недоумение.

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

Инклюзивный проект Everland провел исследование невизуальной доступности онлайн-аптек, чтобы понять, насколько они адаптированы для людей с нарушениями зрения и моторики.  В ходе исследования была протестирована 21 платформа (сайты и мобильные приложения для iOS и Android) 7-ми брендов. Оценку проводили тестировщики с инвалидностью по зрению в феврале 2024 года.

Приложениями пользуются разные люди, и некоторым из них для этого нужны вспомогательные технологии — например, скринридеры (программы экранного доступа). Такие программы могут озвучить контент на странице, если приложение соответствует определённым стандартам. Например, они могут прочесть текст из параграфов и заголовков, списки, альтернативные описания изображений, ссылки, переключатели и другие интерактивные элементы. Таким образом скринридеры обеспечивают доступ незрячих пользователей к контенту и сервисам. 

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

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

Привет! Я Вячеслав Дорогинин, занимаюсь фронтендом WebView клиентского приложения Лавки. В этой статье расскажу, как мы адаптировали приложение для работы с популярными скринридерами, с какими трудностями столкнулись и как их решили.

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

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

• к чему приводят распространённые ошибки с элементом <label>;
• лучший лайфхак с inputmode="numeric" улучшающий мою жизнь;
• как пользователи скринридера понимают, что модальное окно открыто.

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

Я — Денис, Android-разработчик в «Лайв Тайпинге». В этой статье я продолжу рассказывать о современных подходах разработки адаптивного UI /UX для людей с ограниченными возможностями, разных национальностей и особенностями развития. В этой статьей я расскажу про разработку интерфейсов в XML и Compose для варьирующего размера шрифта. А также покажу почему атрибут contentDescription так важен.

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

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

• какие символы нужно пропускать в тексте для атрибута alt;
• в какой ситуации атрибут inert может быть бесполезен;
• как атрибут maxlength не позволил моей знакомой купить авиабилеты;
• в чём польза свойства border в режиме высокого контраста дисплея.

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

Всем привет, на связи Максим Рожков, frontend разработчик команды "ПИН-КОД".
Наша студенческая команда смогла поучаствовать в выставке с демонстрационным вариантом нашего сервиса "Изучение русского жестового языка".

В этой статье вы узнаете, как обычные студенты поучаствовали в масштабной IT выставке в Екатеринбурге.

В разговорах людей, интересующихся доступностью, часто можно услышать слово «Роль». Так, что это такое? Это специальная форма представления элемента для скринридера. Устанавливается она с помощью атрибута role. Сегодня поговорим о нем.

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

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

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

Привет, Хабр. Меня зовут Никита, я помогаю коллегам из Яндекса с технической экспертизой по вопросам accessibility. В этой статье я хочу поделиться результатами очередного исследования технических предпочтений пользователей с нарушениями зрения, которое предназначено для специалистов, работающих в сфере цифровой доступности. О подобном исследовании я рассказывал в 2020 году.

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

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

• какое количество символов следует использовать для текста подсказки для атрибута alt;
• в чём польза атрибута lang;
• почему использование текстовых символов для декоративных задач — это плохая идея;
• для чего существует режим повышенной контрастности.

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