🔍 Убрал повтор в скринридере и сломал кнопку

Джейк Арчибальд делал кнопку-иконку «жирный» с подсказкой «Bold (⌘B)» на popover="hint". На кнопке стояли aria-label="Bold" и aria-describedby со ссылкой на подсказку.

VoiceOver читал «Bold. Bold. Command B». Чтобы убрать повтор, Джейк удалил aria-label. И кнопка осталась без доступного имени, то есть без названия для скринридера. aria-describedby добавляет только описание, имя он не заменяет.

JAWS в итоге собрал текст из соседних элементов и объявил кнопку сразу жирной и курсивной.

Чинится заменой одного атрибута: aria-labelledby вместо aria-describedby. Он тоже ссылается на подсказку по id, но берёт из неё именно имя. Теперь VoiceOver говорит «Bold. Command B. Button».

Сам Джейк советует проверять в нескольких скринридерах: один, как и один браузер, полной картины не даёт.

В статье есть и вариант, где имя и сочетание клавиш разведены по разным span.

👉 @seniorFront