How are non-standard form elements made available, cross-browser?

Question

css

There are many non-standard UI elements in the design.
How to make them ideally in css so that everything works, both for screen readers and for other users?
For example, there are non-standard checkpoints, buttons - when pressed, they open the menu, or radio buttons.
And you can’t set styles as standard and, as I understand it, they are displayed differently on each device.
Can anyone explain how to deal with this, article links, videos?
ps: I don’t quite understand how to correctly drive a search in the internet.

Answer 1

Ideally, in the header of the site page there should be a design version switch for the visually impaired (same in importance as RUS / ENG).
There are recommendations on how to make a version of the site for the visually impaired . Including, advice is indicated on how to make screen readers read the headings of the form fields, but do not visually display the headings themselves.

If the label needs to be hidden, position it before the field, use the for attribute binding and a special class for assistive technologies:
.visually-hidden {
position: absolute;
width: 1px
height: 1px;
margin: -1px;
border: 0;
padding: 0;
clip: rect(0 0 0 0);
overflow: hidden;
}
This class hides the label visually, but screen readers will read it. Note that screen readers and other assistive technologies, like browsers, hide elements using display: none and visibility: hidden.