Что это
Многие кнопки на современных сайтах используют только иконку без видимого текста — лупа для поиска, иконка гамбургера для меню, X для закрытия всплывающего окна. Зрячий посетитель мгновенно узнаёт эти иконки по знакомству и контексту, но скринридеру нечего прочитать вслух, если у кнопки нет также доступного текста, прикреплённого за кулисами, обычно через атрибут aria-label (например, aria-label="Поиск"), который не показывается визуально, но объявляется скринридером.
Без этого скринридер просто объявляет общее слово «кнопка» без дополнительной информации, не давая никакого указания на то, что на самом деле произойдёт при нажатии на неё.
Почему это важно
Иконка, визуально очевидная для зрячего человека, сама по себе не несёт никакой информации для того, кто не может её увидеть — сама иконка не является изначально значимой без зрения, значима только концепция, которую она представляет, и эта концепция должна быть донесена каким-то другим способом для пользователя скринридера. Страница, полная кнопок только с иконками, каждая из которых объявляется только как «кнопка, кнопка, кнопка», оставляет пользователя скринридера без возможности узнать, что делает каждая из них, без угадывания и нажатия, чтобы выяснить.
Это широко распространённая и легко упускаемая проблема именно потому, что кнопки только с иконками — это распространённый, визуально чистый паттерн дизайна — пробел в доступности становится очевидным только при реальном тестировании со скринридером, а не просто при взгляде на страницу.
Как это исправить
- Определите каждую кнопку на вашем сайте, которая использует только иконку без видимой текстовой подписи.
- Добавьте атрибут
aria-label, описывающий действие кнопки в нескольких словах, напримерaria-label="Закрыть меню"илиaria-label="Поиск". - Где возможно, рассмотрите добавление короткой видимой текстовой подписи рядом с иконкой вместо этого — это также помогает зрячим посетителям и снижает зависимость от запоминания значений иконок.
- Если вы используете конструктор сайтов, проверьте, включают ли уже кнопки-иконки, сгенерированные платформой, доступные подписи по умолчанию — некоторые включают, другие требуют вручную заполнить поле «доступное имя» или «текст для скринридера».
- Протестируйте с бесплатным скринридером (NVDA, VoiceOver), переходя по табуляции к каждой кнопке-иконке и убеждаясь, что она объявляет чёткое, конкретное действие, а не просто «кнопка».