WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: html 5 required

for

From: Birkir R. Gunnarsson
Date: Aug 5, 2017 11:18AM

I am confused. The label is exposed isn´t it, the way you wrote it.
If there is a title attribute or a placeholder, maybe those don´t get
exposed when you add the required attribute?
Which browsers/a.t. combinations are you using?
Are you using a proper label assocaition?
Are you using either a title or placeholder attribute (on the input field)?
Cheers
-B

On 8/3/17, Angela French < <EMAIL REMOVED> > wrote:
> 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
> > > > > > > > >


--
Work hard. Have fun. Make history.