E-mail List Archives
Thread: Required and/or aria-required in Form Controls
Number of posts in this thread: 4 (In chronological order)
From: Stella M
Date: Sun, Jul 05 2015 6:21AM
Subject: Required and/or aria-required in Form Controls
No previous message | Next message →
I've just
recently joined the mailing list so it might be possible that the same question
popped-up before and has been discussed already. If so could you please refer
me to the discussion?
If
required fields in form controls are only marked up with CSS e.g.
border-left: 3px solid #f24e30, padding-left: 3px; which option would you
go for?
a) required (html5 attribute)
b) aria-required="true"
c) required aria-required (html5 attribute and aria
attribute)
d) hidden text (required) placed in a label (using
http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/C7)
I
wouldn't choose option a) because JAWS 15 in IE does not announce required
fields.
Option b)
is supported in Jaws 15 in IE and NVDA in Firefox so I'll go for this option.
Option c)
seems a bit cluttered so I would leave it out even though Jaws 15 in IE
announces required field and NVDA in /Firefox announces required field once
(there is no audio clutter).
Option d)
works everywhere and anytime so I'll go for it.
So I have
two favourite options and I'm not sure which one to choose from. If I see the
site was coded using ARIA attributes I suggest using
aria-required="true"(option b)). If I don't see any ARIA on the site I suggest
using hidden text (option c)) as I don't want to give a developer a
headache with some attributes he/she never used before.
What do
you think the best option would be?
Thanks,Stella
From: Paul J. Adam
Date: Mon, Jul 06 2015 8:22AM
Subject: Re: Required and/or aria-required in Form Controls
← Previous message | Next message →
You can use aria-required if you only want to indicate required state to the Accessibility API but don't want to use browser native input validation.
Use HTML5's required attribute to indicate state and also use the browser validation e.g. <input type=email> makes the user type something that looks like an email to be valid.
You can use both if you're trying to cover for some UA/AT bug that won't read one or the other. No screen reader will speak required twice when using both attributes.
Don't use hidden text for screen readers only unless that's the only possible way to indicate something to the AT. Just make it visible <label>First Name (required)</label>
Paul J. Adam
Accessibility Evangelist
www.deque.com
Join us at our Mobile Accessibility "Bootcamp!"
August 6-7 in Austin Texas
https://dequeuniversity.com/events/2015/mobile
Topics include responsive web design, native apps, & more
> On Jul 5, 2015, at 7:21 AM, Stella M < = EMAIL ADDRESS REMOVED = > wrote:
>
>
>
>
> I've just
> recently joined the mailing list so it might be possible that the same question
> popped-up before and has been discussed already. If so could you please refer
> me to the discussion?
>
>
> If
> required fields in form controls are only marked up with CSS e.g.
> border-left: 3px solid #f24e30, padding-left: 3px; which option would you
> go for?
>
>
> a) required (html5 attribute)
>
> b) aria-required="true"
>
> c) required aria-required (html5 attribute and aria
> attribute)
>
> d) hidden text (required) placed in a label (using
> http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/C7)
>
>
> I
> wouldn't choose option a) because JAWS 15 in IE does not announce required
> fields.
>
>
> Option b)
> is supported in Jaws 15 in IE and NVDA in Firefox so I'll go for this option.
>
>
> Option c)
> seems a bit cluttered so I would leave it out even though Jaws 15 in IE
> announces required field and NVDA in /Firefox announces required field once
> (there is no audio clutter).
>
>
> Option d)
> works everywhere and anytime so I'll go for it.
>
>
> So I have
> two favourite options and I'm not sure which one to choose from. If I see the
> site was coded using ARIA attributes I suggest using
> aria-required="true"(option b)). If I don't see any ARIA on the site I suggest
> using hidden text (option c)) as I don't want to give a developer a
> headache with some attributes he/she never used before.
>
>
> What do
> you think the best option would be?
> Thanks,Stella
>
>
>
>
> > > >
From: Patrick H. Lauke
Date: Mon, Jul 06 2015 8:27AM
Subject: Re: Required and/or aria-required in Form Controls
← Previous message | Next message →
On 06/07/2015 15:22, Paul J. Adam wrote:
> You can use aria-required if you only want to indicate required state
> to the Accessibility API but don't want to use browser native input
> validation.
>
> Use HTML5's required attribute to indicate state and also use the
> browser validation e.g. <input type=email> makes the user type
> something that looks like an email to be valid.
Just on the topic of native validation on the part of the browser: if
for some reason you want to suppress native validation (for instance, if
a form offers both a "Submit" and a "Save for later..." button, and with
the latter you'd expect some required etc. fields not to be filled in
yet) you can use the novalidate (on the <form>) and/or formnovalidate
(on the submit <input>) attributes
http://www.w3.org/TR/html5/forms.html#attr-fs-novalidate
P
--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From: Stella M
Date: Thu, Jul 09 2015 7:09AM
Subject: Re: Required and/or aria-required in Form Controls
← Previous message | No next message
> You can use aria-required if you only want to indicate required state to the Accessibility API but don't want to use browser native input validation.
> Use HTML5's required attribute to indicate state and also use the browser validation e.g. <input type=email> makes the user type something that looks like an email to be valid.
> You can use both if you're trying to cover for some UA/AT bug that won't read one or the other. No screen reader will speak required twice when using both attributes.
> Don't use hidden text for screen readers only unless that's the only possible way to indicate something to the AT. Just make it visible <label>First Name (required)</label>
Thanks Paul for your feedback. So all four options are possible to recommend to a client, depending on their website and what would be the easiest way for them to implement.
> Just on the topic of native validation on the part of the browser: if
> or some reason you want to suppress native validation (for instance, if
> a form offers both a "Submit" and a "Save for later..." button, and with
> the latter you'd expect some required etc. fields not to be filled in
> yet) you can use the novalidate (on the <form>) and/or formnovalidate
> (on the submit <input>) attributes
> http://www.w3.org/TR/html5/forms.html#attr-fs-novalidate
Thanks Patrick, A good method to keep in mind when reviewing designs to give a hint to developers before they start messing around:)
Thanks,
Stella