Веб-страница | frontend, backend, fullstack, react, vue, javascript, typescript, css, html
IT и технологии · 2 октября 2026 г.
Как связать иконку-кнопку с подсказкой без ошибки в доступности
Как связать иконку-кнопку с подсказкой без ошибки в доступности У кнопки с одной SVG-иконкой должно оставаться доступное имя: текст, которым скринридер называет элемент. aria-describedby лишь добавляет пояснение. После удаления aria-label VoiceOver назвал кнопку кликабельным изображением, а JAWS прочитал ещё и соседнюю подсказку. Исправление: связать кнопку с названием действия внутри подсказки через aria-labelledby. Если подсказка длинная, название и сочетание клавиш можно разнести: первое связать через aria-labelledby, второе через aria-describedby. В разборе Джейка Арчибальда есть исправленный код и демо. В Safari оно пока работает некорректно: браузер не поддерживает popover="hint". Перед релизом проверьте доступное имя в нескольких скринридерах: один может замаскировать ошибку так же, как один браузер.