Как стать автором
Обновить
21.05

Accessibility *

Помогаем людям с повышенными потребностями

Сначала показывать
Порог рейтинга
Уровень сложности

200 лет шрифту Брайля: как себя сегодня чувствуют ассистивные технологии в сети?

Уровень сложностиПростой
Время на прочтение13 мин
Количество просмотров706

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

Читать далее
Всего голосов 3: ↑3 и ↓0+5
Комментарии1

Новости

Обзор компьютерных игр для незрячих пользователей

Уровень сложностиПростой
Время на прочтение9 мин
Количество просмотров801

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

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

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

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

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

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

Читать далее
Всего голосов 8: ↑8 и ↓0+10
Комментарии2

Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: «Как скрыть элемент доступно?»

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров6.6K


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


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

Читать дальше →
Всего голосов 23: ↑23 и ↓0+32
Комментарии8

Доступность, она же accessibility: делимся нашим опытом разработки

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров818

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

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

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

Грабли
Всего голосов 3: ↑2 и ↓1+1
Комментарии2

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 8

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров3.7K


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


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

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

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

Читать дальше →
Всего голосов 36: ↑35 и ↓1+52
Комментарии6

Посторонним В.: российские онлайн-аптеки не всегда доступны для незрячих пользователей

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров385

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

Читать далее
Всего голосов 4: ↑3 и ↓1+5
Комментарии1

Адаптация мобильного приложения для пользователей скринридеров. Опыт Яндекс Лавки

Время на прочтение14 мин
Количество просмотров2.7K

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

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

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

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

Читать далее
Всего голосов 18: ↑17 и ↓1+22
Комментарии6

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 7

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров4K

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


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

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

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

Читать дальше →
Всего голосов 42: ↑42 и ↓0+43
Комментарии15

Как увеличить шрифт так, чтобы контейнер не поехал? Адаптация UI/UX для людей с проблемами зрения в XML и Compose

Уровень сложностиПростой
Время на прочтение12 мин
Количество просмотров2K

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

Читать далее
Всего голосов 15: ↑15 и ↓0+15
Комментарии3

Я полностью слеп и я сам себе техподдержка

Время на прочтение5 мин
Количество просмотров6.8K
Я пользуюсь Интернетом уже 20 лет. Думаю, примерно в 2004 году, у меня наконец-то на семейном компьютере была установлена нормальная программа для чтения с экрана. Я не так долго наблюдал, чем у некоторые, но все же это позволило мне увидеть некоторые радикальные изменения, произошедшие с разработкой программного обеспечения, доступностью и большими технологиями.

Во-первых, 20 лет назад вы могли написать практически в любую компанию и получить от нее персонализированный ответ. Теперь все расписано по скриптам, и в таких действительно крупных компаниях, как Google, любой технически подкованный человек, который потратил приличное количество времени на использование продукта, вероятно, будет более осведомлен, чем агенты службы поддержки. Я рассматриваю это скорее как результат плохого обучения, чем чего-либо еще, хотя подозреваю, что рабочая среда и низкая оплата труда, вероятно, способствуют полному отсутствию желания выходить за рамки этого обучения.

Десять лет назад (я взял эту цифру с потолка, но я думаю, что она точна) это все еще было в какой-то степени верно, но чтобы компенсировать это, агенты обычно имели определенный уровень прозрачности и контроля над системами, которые они поддерживали, и некоторые возможности, которых нет у пользователей. Сейчас часто кажется, что служба поддержки существует только для того, чтобы делать то же самое, что мы уже можем делать с веб-сайта или приложения.
Читать дальше →
Всего голосов 26: ↑19 и ↓7+18
Комментарии11

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 6

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров4.7K


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


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

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

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

Читать дальше →
Всего голосов 46: ↑46 и ↓0+46
Комментарии14

Как студенты участвовали в огромной IT выставке со своим стендом

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров1.3K

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

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

Читать далее
Всего голосов 6: ↑6 и ↓0+6
Комментарии1

Прокачиваем вёрстку ARIA-атрибутами. Атрибут role

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров4.4K

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


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


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

Читать дальше →
Всего голосов 25: ↑24 и ↓1+36
Комментарии10

Ближайшие события

Конференция «IT IS CONF 2024»
Дата20 июня
Время09:00 – 19:00
Место
Екатеринбург
Summer Merge
Дата28 – 30 июня
Время11:00
Место
Ульяновская область

Технические предпочтения пользователей с нарушениями зрения в 2023 году. Исследование Яндекса

Уровень сложностиСредний
Время на прочтение22 мин
Количество просмотров3.6K

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


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


Круговая диаграмма с долями основных программ экранного доступа по данным таблицы 10
Читать дальше →
Всего голосов 16: ↑16 и ↓0+16
Комментарии0

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 5

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров5.1K

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


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

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

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

Читать дальше →
Всего голосов 51: ↑51 и ↓0+51
Комментарии9

Прокачиваем вёрстку ARIA-атрибутами. Атрибут aria-hidden

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров6K


Хабр, я рассказал вам, как создавать подсказки с помощью атрибута aria-label. Это отличный шаг к классному опыту для пользователей скринридера. А сегодня сделаем второй — мы научимся правильно скрывать элементы. Встречайте, атрибут aria-hidden.

Читать дальше →
Всего голосов 39: ↑39 и ↓0+39
Комментарии0

<dl> или <table>? Исследуем подходы к представлению пар ключ-значение в HTML

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров3K

Казалось бы, простая задача - сверстать список пар ключ-значение. Бери <div> и делай. Но что, если захотелось подушнить? Этим и займёмся в статье...
Рассмотрим три подхода к решению этой задачи: <div>, <dl>, <dt>, и <dd>, и <table>. Обсудим преимущества, недостатки и примеры.
Цель - помочь выбрать наиболее подходящий подход для конкретной задачи.

Читать далее
Всего голосов 14: ↑11 и ↓3+11
Комментарии15

Особенности подготовки текстов для правильного воспроизведения в программах для незрячих

Время на прочтение11 мин
Количество просмотров898

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

Когда один из моих коллег потерял зрение, у меня было 10 лет опыта с технологической точки зрения. По возвращении коллеги на работу моей задачей была подготовка для него отчетов о качестве звука в зависимости от используемых каналов связи, моделей телефонных аппаратов, версий программного обеспечения, вариантов используемых кодеков и массы прочих факторов.

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

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

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

Набором этих правил я и хочу поделиться.

Читать далее
Всего голосов 15: ↑15 и ↓0+15
Комментарии9

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

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров4.7K

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


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

  • как сверстать поиск, чтобы им мог воспользоваться пользователь скринридера;
  • чем полезно свойство outline-offset;
  • зачем вам нужно использовать медиа-функцию prefers-color-scheme;
  • где должен находиться заголовок в разметке блока с новостью.

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

Читать дальше →
Всего голосов 40: ↑40 и ↓0+40
Комментарии4

Сервис изучения русского жестового языка с применением модели распознавания жестов

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров2.7K

Всем доброго первого зимнего дня!

Меня зовут Рома, я проджект менеджер студенческой команды ПИН-КОД.

Мы хотим рассказать о первой в России продуктовой истории с моделью распознавания РЖЯ - сервисе изучения русского жестового языка и представить небольшой кусочек, который вы сможете сами "пощупать". 😎

Ссылка на демо (для нетерпеливых)

Читать далее
Всего голосов 5: ↑4 и ↓1+7
Комментарии3
1
23 ...

Вклад авторов