Неограниченные возможности

Ура! Открыт приём заявок на курс "Accessibility Unity". Я проходила этот курс и это действительно мощное обучение.

Старт курса: 27 сентября
Продолжительность: 7 недель
Формат: онлайн встречи с кураторами + записи лекций

Тарифы:
Early Bird до 25.08.2025 — 38 000 ₽
Just on time Bird до 10.09.2024 — 43 000 ₽
Hurry up Bird до начала курса — 50 000 ₽

⚠️ Важно: Чем раньше записываетесь, тем больше экономите! Разница между Early Bird и Hurry up Bird - 12 000 ₽.

На курсе вы будете работать над практическим кейсом и получать фидбек от реальных пользователей с инвалидностью. Обучение подходит для всех кому интересна тема цифровой доступности. Курс ведут специалисты из Сбербанка, Яндекса, Dodo и других компаний.

Получить подробный план лекций или оплатить курс можно:
Написав мне @bonnysveta
На сайте accessibilityunity.com

Кнопка "Закрыть" случайно отпугивает пользователей скринридера

Кто-то сделал так

<dialog class="modal">
  <button type="button" aria-label="Закрыть">
    <!-- здесь иконка --->
  </button>
  <!-- здесь контент модального окна -->
</dialog>

Я предлагаю делать так

<dialog class="modal">
  <!-- здесь контент модального окна -->
  <button type="button" aria-label="Закрыть">
    <!-- здесь иконка --->
  </button>
</dialog>

Пользователи скринридера открывают модальное окно и слышат: "Закрыть, кнопка". Они думают: "Что? Я просто хочу сделать заказ. "Для чего здесь кнопка?".

Это недружелюбно. Вот почему кнопка "Закрыть" должна быть последним элементом.

А ведь правда.

Вроде мелочь, и думаю, что незрячие пользователи привыкли и к более серьёзным выкрутасам со стороны интерфейсов, но ведь мы хотим сделать по-настоящему удобный интерфейс.

Привет!
Рада сообщить о долгожданном запуске проекта Allyinfo!

Allyinfo — это каталог, где мы собрали всё самое важное и полезное о том, как сделать интернет доступным для каждого. Здесь вы найдёте материалы, которые помогут создавать сайты и приложения, удобные для всех пользователей, независимо от их возможностей.

https://allyinfo.ru

У нас есть специальная форма «Предложить материал». Если вы нашли полезную статью, написали руководство или знаете интересный ресурс по доступности — поделитесь им с сообществом! Вместе мы сможем собрать самую полную и полезную библиотеку материалов по цифровой доступности.

Давно тут не было постов, а всё потому, что я готовила к релизу проект allyinfo.ru.

Материалов пока мало, поэтому прошу помощи с наполнением базы.

Подписывайтесь на канал, там буду публиковать разные новости и подборки 💜

История из жизни: когда технические ограничения меняют восприятие продукта

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

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

Всё изменилось в тот день, когда возникла необходимость обсудить некоторые детали с дизайнером. Подсев к его рабочему месту, я испытала настоящий когнитивный диссонанс: там, где на моём экране был простой однотонный фон, на мониторе дизайнера располагалась масштабная карта России – ключевой визуальный элемент, задающий тон всему интерфейсу.

Оказалось, что из-за более низкого разрешения моего монитора я просто не могла видеть этот элемент дизайна. Я как будто работала с несколько другой версией сайта, даже не подозревая об этом.

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

#design

Недавно Елена с канала «Включатель» задала мне вопрос о меню, которое раскрывается при наведении мыши. Попробую выступить в качестве адвоката дьявола и защитить такое решение.

Какие плюсы я вижу в раскрытии меню при наведении:

1. Не нужно кликать. Ну круто же! С пользователя снимается микронапряжение на клик мышки. Навёл на верхнеуровневый элемент — и сразу видно, что внутри.

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

Вот, пожалуй, и всё. На самом деле я категорически против таких решений.

Если мы реализуем раскрытие меню при наведении курсора, то входим в серую зону, потому что увеличиваем риск нарушения WCAG 1.4.13 Содержимое при наведении или фокусе (уровень AA) . Цель этого пункта — гарантировать, что вы реализуете взаимодействие при наведении таким образом, чтобы пользователь мог воспринимать дополнительный контент и отклонять его, не нарушая при этом работу со страницей.

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

Если верхнеуровневый пункт меню ещё и сам является ссылкой, то мы создаём элемент двойного назначения, тот самый «летающий танк», о котором говорила Лена.

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

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

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

Итак, когда скринридер выключен, браузер напрямую получает и обрабатывает события с клавиатуры. Под событиями понимается нажатие клавиш или их сочетаний.
Когда мы включаем скринридер, то создаём прослойку между клавиатурой и браузером. Эта прослойка перехватывает почти все события с клавиатуры и не пропускает их в браузер. Благодаря такому эгоистичному поведению скринридер реализует собственное клавиатурное управление.

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

Есть и второй вариант, когда скринридер не перехватывает нажатие клавиш и передаёт всё браузеру для обработки – это называется "режим форм". Например, когда нужно заполнить форму или понажимать наш любимый TAB – скринридер не забирает себе эти события, а пропускает их в браузер.

Переключение между режимами форм и приложений происходит автоматически, скринридер ориентируется на семантику элементов.

При переключении режимов в большинстве скринридеров слышен щелчок.


#разработка
#скринридер

Недавно команда канала Включатель сделала пост о том, как мы столкнулись с сайтом, где фокус был буквально на всех элементах: заголовках, дивах, текстах внутри этих дивов и т.д.

Благодаря этому мы выявили, как у скринридера едет крыша от такой разметки. Скринридер, бро, 0% осуждения, у нас крыша тоже поехала.

Почему разработчики так сделали?

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

Раз не попадали, значит, и скринридер их не озвучивал. А сделать-то нужно доступно, вот разработчики и решили всем элементам дать фокус.

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

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

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

Именно так и выглядела разметка на том сайте.

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

Для незрячих пользователей скринридер меняет правила клавиатурного взаимодействия, об этом я расскажу в следующий раз.

#разработка #фокус

При тестировании доступности многие сталкиваются с парадоксом: сайт выглядит читабельным, но не проходит проверку контрастности по WCAG. Или наоборот — формально проходит проверку, но текст читается с трудом. В чем же дело?

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

Алгоритм APCA (Advanced Perceptual Contrast Algorithm) предлагает более совершенный подход к оценке контрастности. Вот его ключевые преимущества:

1. Учет нелинейности восприятия.
Человеческий глаз воспринимает контраст нелинейно. APCA учитывает эту особенность, в то время как WCAG использует линейную модель.

2. Пространственная чувствительность.
APCA принимает во внимание: размер текста, толщину шрифта, расстояния между буквами.
Это именно те факторы, которые влияют на реальную читаемость текста.

3. Корректная работа с темными цветами.
WCAG часто переоценивает контраст темных цветов, что создает проблемы, особенно в тёмном режиме. APCA работает корректно во всем диапазоне яркостей.

Это значит, что все инструменты оценки контрастности, базирующие на алгоритмах WCAG не подходят для создания действительно доступных дизайнов.

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

Подробнее о работе APCA можно почитать здесь:
https://git.apcacontrast.com/documentation/APCAeasyIntro

#QA #дизайн

Может ли человек разучиться читать? Ещё как может.

Алекси́я — это состояние, при котором человек теряет способность понимать письменный текст или узнавать отдельные буквы. Люди с алексией говорят, что буквы выглядят как символы из незнакомого алфавита.

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

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

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

Для дизайнеров: людей с алексией можно рассматривать как иностранцев. Иконки, картинки и знакомые паттерны помогут им ориентироваться в интерфейсе.

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

Я бы тоже так ответила. Конечно, они ведь настолько различаются. У куба есть углы и грани, у сферы ничего подобного.

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

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

Этот тезис был подтверждён экспериментально учёными из Калифорнийского университета в 60х годах.

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

Такие дела 🤷‍♀

Как стили могут повлиять на доступность?

Списки с дефолтными стилями выглядят не круто. Чаще всего нам нужны либо другие маркеры, либо семантически это список но в дизайне маркеров нет совсем.

Разработчики избавляются от дефолтных маркеров простым list-style: none. Но такой подход ломает доступность для Safari.

Согласно MDN:

Safari не распознает упорядоченные и неупорядоченные списки как списки в дереве доступности, если они имеют list-style значение none, если только список не вложен в <nav>элемент навигации. Такое поведение является намеренным и не считается ошибкой.

Что делать?

Есть 2 варианта:
1. Добавить списку роль list.
2. Уменьшить до нуля размер псевдо элемента ::marker.

О том как ещё стили влияют на доступность и что с этим делать можно почитать в свежей статье Стаса Мельникова:

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

P.S. Дизайнеры, для вас там тоже есть полезная информация :)

Ответ нашли: @katia_dev и @shegol_a 🎉

Глазки у рыбы и бабочки различаются наличием блика.

У всех животных глаза покрыты защитной оболочкой. Эта оболочка влажная. Все кто живут на поверхности видят эту оболочку как блики на глазах. Мы её видим потому что смотрим через воздух.

Рыбы на рыб смотрят через воду и они попросту не видят что там есть чему блестеть.

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

И что ещё круче, что они максимально реалистично выглядят для своей среды.

Спасибо за участие 🦋

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

Эти фейковые глазки рыб и бабочек отличаются одной деталью.

Как думаете что это за деталь и почему она важна для защиты каждого из этих видов?


#простоинтересно

Сегодня, 7 февраля в 19:00 (по мск) пройдет второе мероприятие в рамках 5 конференции по цифровой доступности. Сегодня встретимся с теми, кто на своем энтузиазме продвигает тему инклюзии. Обсудим, как ребята пришли к этому, что помогает поддерживать мотивацию, как взаимодействуют с коллегами, в чем заключается их роль, с какими трудностями сталкиваются и как их преодолевают. Приходите!

Подключайтесь, скоро увидимся!