HTML5 input validation
The greatest promise around 2012 was the client-side validation of input fields. After about 10 years, there is still room for improvement. Especially when it comes to accessibility.
Findings
These are findings collected for years. In some cases browsers are improved, so some of my findings might be obsolete.
- In some browsers the error message appear and stays there for only a few seconds.
(2.2.1 Timing Adjustable) - In some browsers the error message pops up at the same place, the input suggestions are shown. The error message is not or partly visible.
- In some browsers the error message disappear when focussing the field.
- In most browsers the error message appear in the language of the browser (or English?), not in the language of the page.
(SC 3.1.2 Language of Parts, but real problem is a message the user does not recognize so that could be SC 3.3.1 Error Identification) - In many cases an error suggestion is missing.
(SC 3.3.3 Error Suggestion) - Sometimes the error message is not clear for everybody.
(SC 3.3.1 Error Identification) - Sometimes the error message is missing, only an error suggestion is shown.
(SC 3.3.1 Error Identification) - Icons for errors or warnings might have a low contrast.
(SC 1.4.11 Non-text Contrast) - Not every browser supports the required attribute.
(SC 3.3.1 Error Identification)
Browser issues
Are these issues still open? It's hard to find out if there are more open issues and if my findings above are known issues.
- Browser induced WCAG 2.0 Level A failures for HTML5 "required" attribute and other input types
- Issue 1028140: Default error identification for required fields is not sufficient for WCAG
- Required field labels aren't announced on validation failure
- HTML 5 form validation popup opens only once on Windows
- Discussion on W3C Github
