K
KunstkamerA11y 😈
@KunstkamerA11y310 подп.
299просмотров
96.5%от подписчиков
30 декабря 2025 г.
📷 ФотоScore: 329
Новогодние открытки не для всех Или когда горят дедлайны, про доступность забывают На Госуслугах прикольная активность — можно сделать новогоднюю открытку с Роботом Максом в образе персонажа кино. Вот только пользоваться этим нельзя без использования мыши: «Кнопки» с персонажем сделаны не <button>, поэтому не попадают в фокус с клавиатуры и озвучиваются скринридером NVDA просто «по щелчку». Там ещё числа с 20 по 31 — в эту дату декабря открывался конкретный персонаж. Но без пояснения незрячему пользователю может быть непонятно, что это за число. ⚡️ Что нарушает • Критерий 2.1.1 Keyboard — «кнопки» не попадают в фокус и не активируются с клавиатуры. • Критерий 4.1.2 Name, Role, Value — у «кнопок» нет доступного имени. ❓ Как исправить 1. Кнопку с персонажем сделать тегом <button> 2. Подписать её доступным для скринридера способом — через aria-label или .visually-hidden 3. Дату открытия персонажа скрыть от скринридера с помощью aria-hidden="true". Как я понимаю, это больше декор и не несёт полезного смысла 4. А вот на ещё не открытом персонаже надо оставить таймер и дописать "Откроется через". Кнопку сделать не интерактивной через атрибут disabled или переделать в <div> Пример открытого персонажа: <button class="character opened"> <span class="day" aria-hidden="true">25</span> <span class="visually-hidden">Шурик</span> <img alt src="shurik.png"> </button> Пример закрытого персонажа: <div class="character closed"> <span class="day" aria-hidden="true">31</span> <span class="visually-hidden">Откроется через:</span> <span class="timer">09:08:07</span> <img alt src="unknow.png"> </div> Альт. текст: Скриншот страницы gosuslugi.ru/new-year-2026 с развернутым Просмотрщиком речи. PS: С октября 2025 года я не работаю в РТЛабс. #Госуслуги #клавиатура #семантика
299
просмотров
1799
символов
Нет
эмодзи
Да
медиа

Другие посты @KunstkamerA11y

Все посты канала →
Новогодние открытки не для всех Или когда горят дедлайны, пр — @KunstkamerA11y | PostSniper