@Nebrasko

Как делаются нестандартные элементы форм доступными, кроссбраузерными?

В дизайне есть много нестандартных UI элементов.
Как их в идиале делать в css чтобы все работало, и для скринридеров, и для остальных пользователей ?

Например есть нестандартные чекпоинты, кнопки - при нажатии на которых они раскрывают меню, или радио кнопки.

А стандартным нельзя стили задать и они еще как я понимаю на каждых устройствах по разному отображаются.

Кто нибудь объясните как с этим нужно бороться, ссылки статьи, видео ?

ps: как в инете правильно вбить поиск не совсем понимаю.
  • Вопрос задан
  • 124 просмотра
Решения вопроса 1
@alexalexes
В идеале, в шапке страницы сайта должен быть переключатель версии дизайна для слабовидящих (по значимости такой же как RUS/ENG).
Тут есть рекомендации, как сделать версию сайта для слабовидящих. В том числе, обозначен совет, как сделать так, чтобы скринридеры читали заголовки полей формы, но сами заголовки визуально не отображать.
Если лейбл нужно скрыть, расположите его перед полем, используйте привязку атрибута for и специальный класс для вспомогательных технологий:

.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
clip: rect(0 0 0 0);
overflow: hidden;
}
Этот класс скрывает лейбл визуально, но его прочтут скринридеры. Обратите внимание, что скринридеры и другие вспомогательные технологии, как и браузеры, скрывают элементы с использованием display: none и visibility: hidden.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы