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 года я не работаю в РТЛабс.
#Госуслуги #клавиатура #семантика