Как сделать кнопку доступной для пользователей с помощью вспомогательных технологий?

Чтобы сделать кнопку доступной для пользователей с помощью вспомогательных технологий, можно использовать следующие рекомендации:

• Сделать текст для кнопки содержательным по смыслу. 1 Следует избегать текстов типа «Подробнее», «Узнать больше» и т. д., так как такие кнопки вне контекста не несут никакого смысла. 1
• Использовать простые и схематичные иконки. 1 Иконка должна иметь минимум деталей и в общих чертах передавать основные характеристики изображаемого объекта. 1
• Установить оптимальную область нажатия. 1 Для кликабельных иконок небольшого размера область нажатия должна быть не менее 44 пикселей, а расстояние между такими иконками с учётом кликабельной области — не меньше 8 пикселей. 1
• Сопровождать кликабельные иконки поясняющим текстом. 1 Это позволит пользователям сразу определить значение иконки и проинформирует их о действии, которое произойдёт после нажатия на неё. 1
• Использовать ARIA-атрибуты. 2 Они делают подсказки доступными для пользователей ассистивных технологий. 2
• Для отключённых кнопок использовать атрибут aria-disabled='true', чтобы указать состояние элемента для вспомогательных технологий. 3

Также важно учитывать, что информация, обозначенная цветом, не будет передана пользователям вспомогательных технологий, поэтому нужно убедиться, что она либо очевидна из самого содержимого (например, видимого текста), либо включена с помощью альтернативных средств. 3