WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Birkir R. Gunnarsson
Date: Jan 31, 2019 6:46AM

The big difference is that using the HTmL5 required attribute triggers
browser validation of the form in browsers that support HTML5.
This should be a good thing, but the browsers do a poor job of
presenting accessible error messages (the browser vendors should do a
better job of this, in my opinion).
Using the asterisk to mark required form fields does not trigger
validation of any kind, the validation is left up to the website
developer.
Using aria-required does not either.
You can still take advnaage of the browser validation and transform
the display of the browser error messages into something more
accessible, I've coded up a ew examples I just need to find the time
to put one up on Code Pen.
I'll post back to this threat if I get this done.
Basically, if all fields are required, just have text at the top of
the form that says all tields are required.
If one or two fields are optional, change the instructions to "all
fields are required unless marked optional", and include the word
(optional) in the <label> tag for those fields.
Try to avoid optional fields, not for accessibility but for UX, users
don't want to spend all day filling in forms, they want to get the
task done, so make it as easy as possible for them.


On 1/31/19, Isabel Holdsworth < <EMAIL REMOVED> > wrote:
> Hi,
>
> The best implementation of marking up optional fields that works for
> me personally is to somehow have the word "optional" in the label
> belonging to each optional field. This could be inserted as an
> aria-label or as the alt text of a graphic.
>
> This is purely personal opinion.
>
> Cheers, Isabel
>
> On 31/01/2019, Graham Armfield < <EMAIL REMOVED> > wrote:
>> 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>
>> >> >> >> >>
> > > > >


--
Work hard. Have fun. Make history.