WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: html 5 required

for

From: Angela French
Date: Aug 3, 2017 4:07PM

Thanks for responding. I guess what confuses me is that if the cursor goes to the field (with the required message) and the field is labelled correctly, why isn't the label exposed again?

Angela

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Patrick H. Lauke
Sent: Thursday, August 03, 2017 2:51 PM
To: <EMAIL REMOVED>
Subject: Re: [WebAIM] html 5 required

On 03/08/2017 22:45, Angela French wrote:
> Hello,
>
> We are trying to use the html 5 required attribute on required form fields. In testing, I am finding that each browser I test with (with NVDA) handles it differently. The problem is that in most browsers I hear the message that a field is required, but it doesn't tell me WHICH field it is referring to even though the cursor goes to the first empty field. The only browser that played very nicely on this was Chrome. Curiously, even Chrome didn't read the required field message ("Please fill out this field."). Rather it said "Last Name invalid entry required."
>
> Is there a way to make this behavior consistent?

In short: don't use required attribute at this stage, but instead aria-required="true" and traditional custom error messages/bubbles.

Regarding the "Please fill out this field", I assume you're referring to the default browser error tooltip bubble? If so, last time I checked (2 years ago), none of the browsers exposed the text they visually present
-
http://developer.telerik.com/featured/building-html5-form-validation-bubble-replacements/#comment-2381878676

So once again, better to use old custom-made bubbles to show error messages (and then tie them to the relevant form field with aria-describedby or similar).

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