WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Required and/or aria-required in Form Controls

for

From: Paul J. Adam
Date: Jul 6, 2015 8:22AM

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