Browsers should clearly mark required fields

WCAG Success Criterion 3.3.2: Labels or Instructions:

Providing clear and unambiguous labels and instructions (including clear identification of required fields) can prevent users from making incomplete or incorrect form submissions, which prevents users from having to navigate once more through a page/form in order to fix submission errors.

Source: Understanding Success Criterion 3.3.2: Labels or Instructions

Browsers do not provide any visual indication that a form field is required (<input required> element). This forces websites to add asterisks or other indicators to form field labels. There is some confusion about what’s the best way to implement this (what markup to use). There doesn’t seem to be a single best way to do this.

More info: The required fault in our stars | Kitty Giraudel

I think it would be better if browsers displayed indicators for required fields. It would be better for users because browsers and AT would converge on a single, standard way to indicate required fields that would be very recognizable and available on all websites. It would be better for website authors because they would no longer have to spend time on this issue.

I’m strongly in favour of user agents offering as much out-of-the-box accessibility as possible. This is one of many small improvements that would help advance that.

Note that you can use input[required] and input[aria-required='true'] as CSS selectors, with before/after pseudo classes and then use content to draw an asterisk or • character. This is what should happen 99% of the time, so it might as well be the default.

That being said, application of such a default would cause widespread backwards-compatibility problems, with double asterixes appearing in places etc.,wouldn’t it?

Browsers don’t have to use an asterisk. Maybe there’s a better way to communicate that a field is required.

I don’t believe you can use the pseudo-elements ::before and ::after with input since input has no content and doesn’t accept children. I was thinking potentially some sort of double border or a special outline that only appears on required elements when empty and not-focused?