Short note on the accessibility of styled form controls

Sticking with a native form control will almost always give your users a more accessible experience than trying to recreate one from scratch. Though the issue with native form controls is that they have an infamous reputation for being problematic to style.

Outside of some of the HTML5 form controls, which have browser prefixed CSS selectors for styling hooks, this reputation still holds true. In some cases (e.g. option elements) styling support has actually decreased in some browsers. Fortunately, there have been many experiments with markup and CSS over the years to (mostly) get around the limitations of many native form controls, without having to disregard them completely.

Styled and “Styled” form controls

The tested form elements that have been styled either directly, or with some specific markup patterns, are all listed on the introductory page to The Accessibility of Styled Form Controls, which provides some additional context for each pattern. Most of these controls can be restyled without needing any JavaScript, save for but a few, such as file uploads, and ARIA reliant controls that would otherwise not function.

…

Curated by (Lifekludger)
Read full article at Source: Short note on the accessibility of styled form controls | The Paciello Group – Your Accessibility Partner (WCAG 2.0/508 audits, VPAT, usability and accessible user experience)