KunstkamerA11y 😈

На эту проблему есть ишью в их трекере от 25 июня.

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

🥴 Доступная капча в "Яндекс Id" для iOS, скинули в комментариях

Текст «bark and disclosure» распознал чатгпт :)
Теперь надо потестировать Яндекс Капчу 😈

Альт. текст:
Инструкция на английском языке: «Please enter the characters from the image» (Пожалуйста, введите символы с изображения).
Изображение с кодом — серый фон с серым искаженным текстом «bark and disclosure».
Под изображением:
• Кнопки — «Another code» (Другой код), «Play audio» (Воспроизвести аудио).
• Поле ввода текста с плейсхолдером: «Enter the characters» (Введите символы).
• Отключенная кнопка «Submit» (Отправить).

#капча

Капча-ползунок от озона, спасибо Эльзе @discovering_inclusion

Альт. текст:
Текст: «Сопоставьте пазл, двигая ползунок
Положение объекта и контура не совпадает, попробуйте еще раз.»
Над текстом изображение с темно-синими полосами. В его левой части выделен один кусочек пазла, который надо будет двигать. В правой части 4 пустых места под пазл разных форм, на которые надо будет "вставить" кусочек пазла. Под картинкой ползунок со стрелкой вправо.

#капча

Больше капч богу капч ❤️

1. «Переверните жабу» — капча от LinkedIn (скриншот из 2023 года)
Текст:
«Давайте проведем быструю проверку безопасности
Выберите изображение которое расположено правильно.» (без запятой перед «которое» 😒)
Внизу 6 квадратов с одной фигуркой белой жабы, перевёрнутой в разных направлениях.
Под картинками кнопки-иконки со смыслом «заменить картинку» и «аудио-версия».
Предположительно, капча на LinkedIn — доступная, раз есть аудио-версия, но тогда я её не проверяла, а потом не попадалась.

2. «Переместите человека на петроглифе» — капча от Twitter ещё с голубой птичкой (скрин тоже из 2023 года)
Капча состоит из 5 шагов, во время которых надо поставить фигурку человека на правой картинке на точку, указанную на левой картике.
Текст: «Используйте стрелки, чтобы переместить человека в место, указанное крестиком (2 из 5)».
Два изображения рядом:
• слева — белый контур верблюда на тёмном фоне, на передней ноге — зелёный крестик. Подпись «Сопоставь это!»
• справа — серый фон (похож на черно-белый снимок парка сверху), на него наложен такой же контур верблюда, но повёрнут в другую сторону. Поверх рисунка верблюда поставлен серый человек. На изображении присутствуют круглые кнопки влево-вправо, которыми надо перемещать человека и он будет находиться в разных точках контура верблюда. Ниже — 10 дотсов (кружков) по количеству положений человека на контуре, первый дотс зелёный.
Под изображениями — кнопка «Отправить», идентификатор сессии и кнопка-иконка с круговой стрелкой для замены картинки.

#капча

«Слепите енота обратно» или подборка дурацких капч 🤡

Енот и ещё 2 капчи с пазлом в комментариях.

Описание

1. «Нажмите на красный среди пяти "по щелчку"» — капча на https://4nozhki.ru/
Подпись: «Если вы человек, нажмите на похожий цвет»
Вверху квадратик с цветом, внизу 5 цветов, по одному из которых надо кликнуть МЫШЬЮ, потому что вместо кнопок <b onclick>.

2. Скрин с открытым Просмотрщиком речи NVDA: каждый квадратик с цветом озвучивается как «по щелчку».

3. «Найдите птиц среди козлов» — капча от Хабра
Подпись: «Нажмите на изображение животного, которому принадлежит эта часть тела»
Наверху 3 черно-белых картинки ног птиц, внизу 9 квадратов, из которых 3 с попугаями, остальные 6 с козами.

4. «Переверните картинку ползунком» — megamarket.ru
Текст:
«Хотим проверить, что вы не робот
Разверните картинку горизонтально. Для этого двигайте ползунок»
На круглой картинке — пляж, перевёрнутый по диагонали. Под картинкой ползунок с неконтрастной полосой.

5. «Выровняйте 2 половинки одной картинки» — eldorado.ru
Текст:
«Вы точно не робот?
Используйте ползунки, чтобы выровнять картинку по горизонтали»
Ниже черно-белая схема, что подразумевается нужно сделать. Под ней круглая картинка с горами, разделенная надвое, каждую половинку нужно повернуть отдельным ползунком.
Внизу 2 ползунка с очень низким контрастом, на нижнем ползунке нарисован замок — его уже нельзя передвинуть (картинку развернули).
Под этим всем текст: «Ползунки можно подвинуть только один раз»

#капча

«Инклюзивные фильтры» в Хэдхантер появились в конце апреля в рамках «Платформы равных возможностей» — инициативы в поддержку инклюзивного найма.

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

Экспертный комментарий к гайду оставила моя подруга Надежда Василенко.

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

Скриншот из статьи «Инклюзивность в вакансиях на hh.ru»

Альт. текст: форма настроек параметров инклюзивности вакансии. Описание настроек в комментариях.

HH.RU: инклюзивные фильтры сделали, а доступную капчу не завезли 😐

В качестве проверки на роботность — картинка с текстом. Аудио или логического варианта капчи нет. Текст "снизошла кражею" распознался ИИ — робот прошёл проверку, а незрячий нет 😏

⚡️ Что нарушает

Критерий 1.1.1 Non-text Content — нет альтернативных форм капчи, только картинка.

❓ Как исправить

Предлагать пользователю аудио-капчу и текстовую (логическую) дополнительно к графической.

А ещё лучше — использовать капчу, не требующую участия пользователя. Например, reCAPTCHA v3 от Google отслеживает поведение пользователя, чтобы понять с какой вероятностью это человек, а не робот.

Альт. текст: скриншот страницы авторизации на hh.ru, модальное окно «Пройдите капчу» с текстом на картинке «снизошла кражею».
#капча

Semantica11y

Открытая JavaScript-библиотека для проверки веб-страниц на наличие несемантических HTML-элементов и избыточных ARIA.

• Побуждает разработчиков использовать семантический HTML в первую очередь.

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

• Легко интегрируется в Playwright, конвейеры CI и локальные рабочие процессы разработки.

• Обучает разработчиков тому, ПОЧЕМУ важен семантический/собственный HTML.

https://www.npmjs.com/package/semantica11y

CLI-версия:
https://github.com/Steady5063/Semantica11y-CLI

Как пользоваться:
https://dev.to/steady5063/semantica11y-semantic-html-for-everyone-4daa

Обратная связь и другие вопросы автору Mark Steadman

Альт. текст:
Пример отчета для сайта — 4 ошибки, 19 предупреждений. Дальше идёт детальный список с элементами, в которых найдены ошибки с их описанием.
#автотесты

Бесит:

Зашла почитать статью на РБК, а там хэдер почти на треть страницы и надоедливая боковая панель со статьями 🫤

Зашла в девтулз — хэдер и боковушка удалила, но осталось пустое место.

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

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

Попробовала режим чтения в хроме — он вообще не видит статью, потому что нет тега main. А если выделить весь текст, то область чтения занимает не всё пространство и читать неудобно.
Надпись в режиме чтения: Выделите текст, который хотите открыть в режиме чтения. Не удается найти основной контент на этой странице для открытия в режиме чтения.

😡
#режим_чтения #семантика #бесит

Сегодня — Всемирный день осведомлённости о доступности ❤️
→ https://accessibility.day

Он отмечается ежегодно в третий четверг мая, в 2026 году он выпал на 21 мая.

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

✈️ Телеграм

• Папка с каналами про доступность


🎵 Подкасты на Яндекс.Музыке

• Плейлист про цифровую доступность

• Плейлист про инвалидность, инклюзию и и людей


📹 Смотреть (в основном YouTube)

• Тестирование | Разработка | Дизайн и пользовательский опыт

• Мой общий плейлист про цифровую доступность — без слишком технических видосов

• Dynamic Type (динамическое увеличение шрифтов в мобильном приложении на iOS) от Лёши Берёзка из Додо

• База знаний VK про цифровую доступность (VK Видео)

• Мой общий про доступность на VK Видео — создала после отключения ютуба, поэтому видосов мало


📹 Конференции

• Pitera11y_meetup (2019-2021 год)

• Tbilisi A11y & UX Day 02 November 2024

• VK Инклюзия 2023 и 2024 в одном плейлисте (VK Видео)

• VK Инклюзия 2026 (VK Видео)

• Лера Курмак с 2022 года организовала 6 конференций по цифровой доступности, смотрите в аккаунте Kurmak Info

• Accessibility Club Minsk (2020-2021 год)


🤓 Почитать

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


🤝 Чаты по цифровой доступности

• Открытый чат раз — https://t.me/a11yminsk

• Открытый чат два — https://t.me/a11y_chat

#Подборка@KunstkamerA11y