E-mail List Archives
Thread: required field not being announced in Firefox/NVDA
Number of posts in this thread: 16 (In chronological order)
From: Angela French
Date: Thu, Oct 12 2017 12:18PM
Subject: required field not being announced in Firefox/NVDA
No previous message | Next message →
We are using the html required element (required="true") to indicate required fields. The problem when testing with NVDA is that focus goes to the required field but doesn't read the form label so the screen reader user doesn't know which required field they missed. The only way to find out, it seems, is to go back an element in the form and then forward again so the label will be read. Is this a bug, or are we doing something wrong? It works fine in Chrome. We've given up on IE or Edge with NVDA,
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: Birkir R. Gunnarsson
Date: Thu, Oct 12 2017 12:24PM
Subject: Re: required field not being announced in Firefox/NVDA
← Previous message | Next message →
First of, you are just using "required" not "required="true") right?
The required attribute can be provided without a value. I think
required="true" is technically not valid HTML (where as aria-required
has to have a value of "true").
I doubt it makes a difference, but it's worth looking at.
And I take it this problem comes up if user tries to submit a form
with a required field that was left blank, the browser takes care of
focusing the field.
If all these assumptions are true, and if NVDA does not automatically
read the label of that field, it is an NVDA bug and should be filed.
It is not a complete user blocker, because the user can navigate away
from the field and back to it to hear the label.
On 10/12/17, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> We are using the html required element (required="true") to indicate
> required fields. The problem when testing with NVDA is that focus goes to
> the required field but doesn't read the form label so the screen reader user
> doesn't know which required field they missed. The only way to find out,
> it seems, is to go back an element in the form and then forward again so the
> label will be read. Is this a bug, or are we doing something wrong? It
> works fine in Chrome. We've given up on IE or Edge with NVDA,
>
> 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/>;
>
> > > > >
--
Work hard. Have fun. Make history.
From: Angela French
Date: Thu, Oct 12 2017 12:32PM
Subject: Re: required field not being announced in Firefox/NVDA
← Previous message | Next message →
We use required="true". Greg (my co-worker) says it does the same both ways. I guess that means it's a bug. I've never filed an NVDA bug. Surely it's been done before then? I tried search for it in the github list of issues, but perhaps I'm not searching correctly.
Angela French
From: Birkir R. Gunnarsson
Date: Thu, Oct 12 2017 12:50PM
Subject: Re: required field not being announced in Firefox/NVDA
← Previous message | Next message →
It's not valid HTML, just try to run it through the HTML Nu Checker:
https://validator.w3.org/nu/
It probably is not theculprit, but it's important to code HTML to standards.
On 10/12/17, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
>
> We use required="true". Greg (my co-worker) says it does the same both
> ways. I guess that means it's a bug. I've never filed an NVDA bug. Surely
> it's been done before then? I tried search for it in the github list of
> issues, but perhaps I'm not searching correctly.
>
> Angela French
>
>
>
>
From: JP Jamous
Date: Thu, Oct 12 2017 1:03PM
Subject: Re: required field not being announced in Firefox/NVDA
← Previous message | Next message →
Semantically, it should be required="true". Required is the short-hand writing for it and browsers are forgiving as we know them.
Personally, I prefer required="true". Each HTML attribute has a value. Why do this one differently.
Did you try to use aria-required="true" to see if NVDA would respond differently?
Just keep in mind that NVDA was not created to function with either IE or edge. So having it fail with those 2 does not come as a surprise to me. In fact, I would consider it normal behavior.
From: Birkir R. Gunnarsson
Date: Thu, Oct 12 2017 1:11PM
Subject: Re: required field not being announced in Firefox/NVDA
← Previous message | Next message →
Technically it should be required="required"
And, yeah, it's pretty weird.
Again, is NVDA not reading the label in the initial state, when user
focuses the field, or is NVDA not reading the label when user tries to
submit the form with a blank required field and focus is moved back to
that field?
On 10/12/17, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
> Semantically, it should be required="true". Required is the short-hand
> writing for it and browsers are forgiving as we know them.
>
> Personally, I prefer required="true". Each HTML attribute has a value. Why
> do this one differently.
>
> Did you try to use aria-required="true" to see if NVDA would respond
> differently?
>
> Just keep in mind that NVDA was not created to function with either IE or
> edge. So having it fail with those 2 does not come as a surprise to me. In
> fact, I would consider it normal behavior.
>
>
From: Angela French
Date: Thu, Oct 12 2017 6:01PM
Subject: Re: required field not being announced in Firefox/NVDA
← Previous message | Next message →
I have tried the following and none of them read the label of the required field after alerting the user to please fill in the require field.
aria-required="true"
required
required=""
required="true"
I give up.
Angela
From: Greg Gamble
Date: Fri, Oct 13 2017 10:14AM
Subject: Re: required field not being announced in Firefox/NVDA
← Previous message | Next message →
We found a way for FF to announce a custom error message. We added the following attributes to the text fields.
HTML5
oninvalid="setCustomValidity('Username required')"
oninput="setCustomValidity('')"
This will give an error message that says ''Username required'' when we have an input field with required, and no value entered.
Greg Gamble
p - 360-704-4376
From: Birkir R. Gunnarsson
Date: Fri, Oct 13 2017 12:08PM
Subject: Re: required field not being announced in Firefox/NVDA
← Previous message | Next message →
Greg
Tis is cool, but it only seem to work in Firefox, at least my quick
test did not yield any results in either IE or Chrome.
On 10/13/17, Greg Gamble < = EMAIL ADDRESS REMOVED = > wrote:
> We found a way for FF to announce a custom error message. We added the
> following attributes to the text fields.
>
> HTML5
> oninvalid="setCustomValidity('Username required')"
> oninput="setCustomValidity('')"
>
> This will give an error message that says ''Username required'' when we have
> an input field with required, and no value entered.
>
> Greg Gamble
> p - 360-704-4376
>
>
>
From: Beranek, Nicholas
Date: Fri, Oct 13 2017 12:08PM
Subject: Re: required field not being announced in Firefox/NVDA
← Previous message | Next message →
Hi Angela, can you show us the code in context? There's no reason for NVDA and Firefox not to honor aria-required and the HTML5 required attribute.
Nick Beranek
Capital One
On 10/12/17, 8:01 PM, "WebAIM-Forum on behalf of Angela French" < = EMAIL ADDRESS REMOVED = on behalf of = EMAIL ADDRESS REMOVED = > wrote:
I have tried the following and none of them read the label of the required field after alerting the user to please fill in the require field.
aria-required="true"
required
required=""
required="true"
I give up.
Angela
From: Birkir R. Gunnarsson
Date: Fri, Oct 13 2017 12:16PM
Subject: Re: required field not being announced in Firefox/NVDA
← Previous message | Next message →
So based on a very quick test I think I understand what's happening
(or I have a theory).
The error messages when required fields are left blank are implemented
as alerts in Firefox (the equivalent of putting role="alert" on the
error message).
Therefore, when the message is displayed, NVDA follows the rule and
disrupts its reading of anything else on the page to announce the
alert.
In this case it is trying to read the label for the field that
received focus, but the alert overrides it.
If you copy and paste the HTMl below, save it and open it with Firefox
and NVDA, then try to submit the form leaving either field blani, you
notice that NVDA will start saying "use" (as in "username") but
stopsafter the first sound or two to read the error message (it
announces it as "alert").
Same with password, NVDA will say "pa" and then start reading the alert.
There are two possible sources of trouble here.
1. At the browser level, error messages should not be communicated as
alerts, but as polite live regions (they should be read, but after
reading other content).
NVDA, don't let lerts override the reading of form field labels.
Form field labels are usually short and should have priority over
anything else when they are announced.
----
<!DOCTYPE html>
<html lang="en">
<head><title>Testing HTML5 custom validation messages</title></head>
<body>
<h1>Testing HTML5 custom validation messages</h1>
<form>
<label for="un">User name</label>
<input id="un" type="text" required
oninvalid="setCustomValidity('Username required')"
oninput="setCustomValidity('')">
<label for="pwd">Password</label>
<input id="pwd" type="password" required
oninvalid="setCustomValidity('You need to provide a password
silly!!')" oninput="setCustomValidity('')" >
<button type="submit">Submit</button>
</form>
</body>
</html>
On 10/13/17, Beranek, Nicholas via WebAIM-Forum
< = EMAIL ADDRESS REMOVED = > wrote:
> Hi Angela, can you show us the code in context? There's no reason for NVDA
> and Firefox not to honor aria-required and the HTML5 required attribute.
>
> Nick Beranek
> Capital One
>
> On 10/12/17, 8:01 PM, "WebAIM-Forum on behalf of Angela French"
> < = EMAIL ADDRESS REMOVED = on behalf of = EMAIL ADDRESS REMOVED = >
> wrote:
>
> I have tried the following and none of them read the label of the
> required field after alerting the user to please fill in the require field.
> aria-required="true"
> required
> required=""
> required="true"
>
> I give up.
>
> Angela
>
>
>
From: Angela French
Date: Fri, Oct 13 2017 12:30PM
Subject: Re: required field not being announced in Firefox/NVDA
← Previous message | Next message →
It isn't that it doesn't honor the html required attribute. It does say "please fill out the required field" it just doesn't read the label associated with the required field. Thus if there are more than one required fields the user doesn't know which one is being referred to.
From: Beranek, Nicholas
Date: Fri, Oct 13 2017 12:34PM
Subject: Re: required field not being announced in Firefox/NVDA
← Previous message | Next message →
Again, code would be very helpful. It sounds like your labels aren't associated properly with the inputs.
On 10/13/17, 2:30 PM, "Angela French" < = EMAIL ADDRESS REMOVED = > wrote:
It isn't that it doesn't honor the html required attribute. It does say "please fill out the required field" it just doesn't read the label associated with the required field. Thus if there are more than one required fields the user doesn't know which one is being referred to.
From: Greg Gamble
Date: Fri, Oct 13 2017 12:52PM
Subject: Re: required field not being announced in Firefox/NVDA
← Previous message | Next message →
This is an example of the code Angela is talking about.
<div class="form-group">
<label for="MainContent_txtUserName" id="MainContent_lblUsername" class="col-sm-3 control-label ">Username</label>
<div class="col-sm-4">
<input name="ctl00$MainContent$txtUserName" type="text" id="MainContent_txtUserName"
class="form-control" required="true" autofocus="true" placeholder="Username"
oninvalid="setCustomValidity('Username required')" oninput="setCustomValidity('')" />
</div>
</div>
Greg Gamble
p - 360-704-4376
From: Beranek, Nicholas
Date: Fri, Oct 13 2017 1:47PM
Subject: Re: required field not being announced in Firefox/NVDA
← Previous message | Next message →
Thanks, Greg.
That code is fine. I wonder if it's your HTML5 validation, including the use of the setCustomValidity method. I want you to check if this fork works as you'd expect: http://jsfiddle.net/jna1mduv/
What I found was that the error message generated was rendered as an alert. With alerts, only the message reads out; the queue is cleared out and replaced by the alert. This is likely why you're not hearing the label on invalid.
Nick
On 10/13/17, 2:52 PM, "Greg Gamble" < = EMAIL ADDRESS REMOVED = > wrote:
This is an example of the code Angela is talking about.
<div class="form-group">
<label for="MainContent_txtUserName" id="MainContent_lblUsername" class="col-sm-3 control-label ">Username</label>
<div class="col-sm-4">
<input name="ctl00$MainContent$txtUserName" type="text" id="MainContent_txtUserName"
class="form-control" required="true" autofocus="true" placeholder="Username"
oninvalid="setCustomValidity('Username required')" oninput="setCustomValidity('')" />
</div>
</div>
Greg Gamble
p - 360-704-4376
From: Steve Faulkner
Date: Sun, Oct 15 2017 5:25AM
Subject: Re: required field not being announced in Firefox/NVDA
← Previous message | No next message
please note:
required="true"
this is incorrect syntax.
The values "true" and "false" are not allowed on boolean attributes
> <http://w3c.github.io/html/infrastructure.html#boolean-attribute>;. To
> represent a false value, the attribute has to be omitted altogether.
>
http://w3c.github.io/html/infrastructure.html#sec-boolean-attributes
--
Regards
SteveF
Current Standards Work @W3C
<http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/>;
On 12 October 2017 at 19:18, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> We are using the html required element (required="true") to indicate
> required fields. The problem when testing with NVDA is that focus goes to
> the required field but doesn't read the form label so the screen reader
> user doesn't know which required field they missed. The only way to find
> out, it seems, is to go back an element in the form and then forward again
> so the label will be read. Is this a bug, or are we doing something
> wrong? It works fine in Chrome. We've given up on IE or Edge with NVDA,
>
> 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/>;
>
> > > > >