🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
Как дать кнопке с иконкой понятное имя для скринридера
Кнопке только с иконкой нужно доступное имя. Его озвучит скринридер, то есть программа для чтения интерфейса вслух. Имя можно задать HTML-атрибутом aria-label.
У Джейка Арчибальда «Bold» было и в имени, и в подсказке через aria-describedby, поэтому скринридер VoiceOver повторял слово. Удаление имени сделало хуже: JAWS на Windows подхватил ещё и текст соседней подсказки.
Исправление: aria-labelledby берёт имя из подсказки, а aria-describedby оставляет дополнительное описание. Попробуйте оба атрибута на кнопке с иконкой и проверьте её в двух программах чтения с экрана. В разборе Джейка Арчибальда есть ошибочный и исправленный HTML.