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

Question

[Nebrasko]

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

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

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

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

ps: как в инете правильно вбить поиск не совсем понимаю.

Answer 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.

Comments

[Nebrasko]

Это я знаю. Я про дизайн. Они же не стилизуются. Как быть ?

[alexalexes]

Если использовать механику JQuery виджетов, то при инициализации виджета стандартные input и select элементы скрываются из виду, и появляется на их месте спец. обертка, но при этом их содержимое синхронизируется с содержимым визуальной обертки, чтобы при submit не нужно было делать лишних операций для отправки параметров полей.
Еще вариант - делать прозрачными элементы input, но с сохранением геометрических размеров. Под инпут просто подкладывается стилизованный элемент (актуально для input с типом file).

[Nebrasko]

alexalexes, Вот уже что то годное а примеры такие в сети есть, и как их искать ?

[alexalexes]

Любой JQuery плагин берете и смотрите, что используется в качестве основы, и что с основой происходит когда вызывают инициализацию $().название_плагина().
Например, chosen.
За основу этого плагина-выпадающего списка используется стандартный select.
После вызова обертки $('select').chosen(), стандартный select прячется:

<select data-placeholder="Choose a Country..." class="chosen-select" tabindex="-1" style="display: none;">...</select>

А на его месте появляется:

<div class="chosen-container chosen-container-single" title="" style="width: 350px;"><a class="chosen-single chosen-default">...</div>

Насчет синхронизации, я был не точен.
По умолчанию, плагины не синхронизируют свое состояние с исходными элементами.
Но вы можете прописать обработчики событий, например, для события выбора пункта выпадающего списка, чтобы в исходном select происходило смена атрибута selected у его option или записывать состояние выбора нескольких пунктов в отдельный скрытый input с одним и тем же именем параметра, что select (тип hidden), если стандартный select не поддерживает такой режим.
Или перехватывать submit-событие и также дополнять форму необходимыми input-hidden элементами.
PS: В вашем случае можно кастомизироваоть под нужный дизайн необходимый набор JQuery плагинов или использовать плагины другой библиотеки, если JQuery вам не подходит, или у вас подключен еще какой-то набор JS-библиотек, которые позволяют делать аналогичные вещи.