E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 4 (In chronological order)

From: Ramakrishnan Subramanian
Date: Wed, Jan 30 2019 11:28PM
Subject: Using required attribute with a star mark VS Marking as optional
No previous message | Next message →

Hi Team,
I would like to listen to your opinion on the following:
Marking the mandatory fields with the "star mark and required
attribute" VS marking as "optional" for the optional fields.
We know that the ideal recommendation for a form is to mark the
mandatory fields with the "star mark" and with the "required
attribute". But, Instead of that, when the other practice is followed,
what are the pros and cons? And whether this practice is considered
WCAG compliant?


--

Thanks and Regards
Ramakrishnan

From: Graham Armfield
Date: Thu, Jan 31 2019 1:14AM
Subject: Re: Using required attribute with a star mark VS Marking as optional
← Previous message | Next message →

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>

From: Isabel Holdsworth
Date: Thu, Jan 31 2019 2:44AM
Subject: Re: Using required attribute with a star mark VS Marking as optional
← Previous message | Next message →

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 ADDRESS 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>
> > > > >

From: Birkir R. Gunnarsson
Date: Thu, Jan 31 2019 6:46AM
Subject: Re: Using required attribute with a star mark VS Marking as optional
← Previous message | No next message

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 ADDRESS 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 ADDRESS 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.