WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Using required attribute with a star mark VS Marking as optional

for

From: Graham Armfield
Date: Jan 31, 2019 1:14AM

Hi Ramakrishnan,

My own view is that it doesn't matter which way you do it as long as users
know what's going on.

The 'convention' of indicating required fields with a * goes back at least
to the early 2000s when I started building web things professionally. As
far as I am aware all screen readers announce the asterisk (*) as 'Star'
when in a page in English, but best to include it in the <label> element
though. And it's also a good idea to have a message at the top of the form
that reads "Required data is marked with *" or similar.

Lately, probably as a result of the onset of greater scrutiny around
privacy, online forms are asking only for the data they really need. So the
tendency is much more that most input fields are required. So the reverse
approach of saying "All data fields are required, unless indicated." at the
top of the form seems much more common now.

Using the 'required' attribute does mean that screen readers announce the
field as required. However, I'm not a big fan of the default error messages
generated by browsers. In Firefox the "Please fill out this field" message
(and screen reader announcement) is just not specific enough - especially
if there are multiple required fields that have not been completed.

So I favour the use of aria-required="true" on the inputs, and some more
robust client-side validation that generates more meaningful error
messages, and also adds aria-invalid="true" to the input element if errors
are detected.

The challenge comes around radio button groups where the error might be
that the user hasn't selected one of the options, rather than the
individual options themselves. Is aria-required appropriate there I wonder?
Maybe a required message in the <legend>?


Regards
Graham Armfield
coolfields.co.uk <http://www.coolfields.co.uk/>;
M:07905 590026
T: 01483 856613
@coolfields <https://twitter.com/coolfields>