E-mail List Archives
Thread: html 5 required
Number of posts in this thread: 6 (In chronological order)
From: Angela French
Date: Thu, Aug 03 2017 3:45PM
Subject: html 5 required
No previous message | Next message →
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?
Thank you
Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.sbctc.edu<;http://www.sbctc.edu/>;
From: Patrick H. Lauke
Date: Thu, Aug 03 2017 3:50PM
Subject: Re: html 5 required
← Previous message | Next message →
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
From: Angela French
Date: Thu, Aug 03 2017 4:07PM
Subject: Re: html 5 required
← Previous message | Next message →
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 ADDRESS REMOVED = ] On Behalf Of Patrick H. Lauke
Sent: Thursday, August 03, 2017 2:51 PM
To: = EMAIL ADDRESS 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
From: Birkir R. Gunnarsson
Date: Sat, Aug 05 2017 11:18AM
Subject: Re: html 5 required
← Previous message | Next message →
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 ADDRESS 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 ADDRESS REMOVED = ] On Behalf
> Of Patrick H. Lauke
> Sent: Thursday, August 03, 2017 2:51 PM
> To: = EMAIL ADDRESS 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.
From: Jonathan Avila
Date: Sat, Aug 05 2017 6:04PM
Subject: Re: html 5 required
← Previous message | Next message →
> I am confused. The label is exposed isn´t it, the way you wrote it.
I can confirm that with NVDA after a form is submitted and focus is moved to the field in error in some browsers NVDA only announces the error and not the label. If you open the speech viewer you will find the label is there -- which I believe indicates that the error message is being treated like an assertive live region and somehow interrupting the label from being announced.
In our testing of the HTML required attribute in different browsers the supports varied between browsers with screen readers. In addition, some browsers use a red border to indicate the error state while only providing a mouse involked tooltip further complicated the use of the required attribute as it could be claimed color alone was used to communicate the error visually to people with color deficiency who were not using a screen reader.
I would agree with Patrick that at this time if you need to support multiple browsers and multiple AT the support is not there yet to fully conform with this method alone. It's a shame because it's a simple method that should be better supported without requiring developers to implement more complex and costly solutions.
Jonathan
Jonathan Avila
Chief Accessibility Officer
Level Access, inc. (formerly SSB BART Group, inc.)
(703) 637-8957
= EMAIL ADDRESS REMOVED =
Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
Looking to boost your accessibility knowledge? Check out our free webinars!
The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Saturday, August 5, 2017 1:19 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] html 5 required
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 ADDRESS 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 ADDRESS REMOVED = ] On
> Behalf Of Patrick H. Lauke
> Sent: Thursday, August 03, 2017 2:51 PM
> To: = EMAIL ADDRESS 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-b
> ubble-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
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> >
--
Work hard. Have fun. Make history.
From: Birkir R. Gunnarsson
Date: Sat, Aug 05 2017 6:10PM
Subject: Re: html 5 required
← Previous message | No next message
Wow, crazy.
This is probably new to NVDA 2017.2. Iremember testing this with I
think 2016.2 and both were announced fine.
IN general, I agree with the recommendation.
For one thing, the browser default error message overrides any custom
message you have (unless yu plug into the browser validation method,
it is doable but it takes quite a bit of JavaScript).
You can use a CSS :required pseudo class to customize the appearance
of the invalid inputs (I think), but again, it's tricky.
IN some browsers the default required error message is only visible
for about 5 seconds. This is not good for e.g. people with cognitive
impairments (or really anybody, I think an error message should be
persistent, at least until you start interacting with the field
again).
Sad, because it is attributes like these that can really shift the
accessibility load from developers to browsers (which would make our
lives a lot easier).
On 8/5/17, Jonathan Avila < = EMAIL ADDRESS REMOVED = > wrote:
>> I am confused. The label is exposed isn´t it, the way you wrote it.
>
> I can confirm that with NVDA after a form is submitted and focus is moved to
> the field in error in some browsers NVDA only announces the error and not
> the label. If you open the speech viewer you will find the label is there
> -- which I believe indicates that the error message is being treated like an
> assertive live region and somehow interrupting the label from being
> announced.
>
> In our testing of the HTML required attribute in different browsers the
> supports varied between browsers with screen readers. In addition, some
> browsers use a red border to indicate the error state while only providing a
> mouse involked tooltip further complicated the use of the required attribute
> as it could be claimed color alone was used to communicate the error
> visually to people with color deficiency who were not using a screen
> reader.
>
> I would agree with Patrick that at this time if you need to support multiple
> browsers and multiple AT the support is not there yet to fully conform with
> this method alone. It's a shame because it's a simple method that should be
> better supported without requiring developers to implement more complex and
> costly solutions.
>
> Jonathan
>
> Jonathan Avila
> Chief Accessibility Officer
> Level Access, inc. (formerly SSB BART Group, inc.)
> (703) 637-8957
> = EMAIL ADDRESS REMOVED =
> Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
> Looking to boost your accessibility knowledge? Check out our free webinars!
>
> The information contained in this transmission may be attorney privileged
> and/or confidential information intended for the use of the individual or
> entity named above. If the reader of this message is not the intended
> recipient, you are hereby notified that any use, dissemination, distribution
> or copying of this communication is strictly prohibited.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
> Of Birkir R. Gunnarsson
> Sent: Saturday, August 5, 2017 1:19 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] html 5 required
>
> 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 ADDRESS 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 ADDRESS REMOVED = ] On
>> Behalf Of Patrick H. Lauke
>> Sent: Thursday, August 03, 2017 2:51 PM
>> To: = EMAIL ADDRESS 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-b
>> ubble-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
>> >> >> archives at http://webaim.org/discussion/archives
>> >> >> >> archives at http://webaim.org/discussion/archives
>> >>
>
>
> --
> Work hard. Have fun. Make history.
> > > http://webaim.org/discussion/archives
> > > > > >
--
Work hard. Have fun. Make history.