presence of html5 required attribute = alert low and alert high states

UNCONFIRMED
Unassigned

Status

()

Firefox
Disability Access
UNCONFIRMED
7 years ago
a year ago

People

(Reporter: steve faulkner, Unassigned)

Tracking

(Blocks: 1 bug)

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

7 years ago
User-Agent:       Mozilla/5.0 (Windows NT 6.0; rv:6.0a2) Gecko/20110618 Firefox/6.0a2
Build Identifier: Mozilla/5.0 (Windows NT 6.0; rv:6.0a2) Gecko/20110618 Firefox/6.0a2

the presence of the html5 required results in both the alert high and alert low states being present although the form has not been submitted. this translates to the user being told a text field is invalid when it recieves focus

Reproducible: Always

Steps to Reproduce:
1.go to http://www.html5accessibility.com/tests/form-describedby.html
2. focus on the first input (has a required attribute)
3. use an inspect tool to see 
"State:	focused,focusable,alert low,alert high"



Actual Results:  
text input (name) with required attribute has "State:	focused,focusable,alert low,alert high"

Expected Results:  
before user attempts to submit: text input with required attribute has "State:	focused,focusable,alert low"
after user attempts to submit:
text input with required attribute has "State:	focused,focusable,alert low,alert high"

note: text input (age) has aria-required instead, it only has the alert low state.

Comment 1

7 years ago
(In reply to comment #0)
> 1.go to http://www.html5accessibility.com/tests/form-describedby.html
> 2. focus on the first input (has a required attribute)
> 3. use an inspect tool to see 
> "State:	focused,focusable,alert low,alert high"

This is correct and so set by the engine's HTML5 validation, to which the a11y APIs just react. As soon as you type a letter into the box, the "invalid" state clears. As soon as you remove that letter, the "invalid" state returns. This is not just a11y APIs, but if you query the element's validity via JS at these two points, you'll get these answers back, too.

And since an empty required field is not valid, this is not a bug.

> note: text input (age) has aria-required instead, it only has the alert low
> state.

Right, since the ARIA-invalid state must be set via JS, and thus one has to implement their own validation in JS to accomplish the same.
(Reporter)

Comment 2

7 years ago
(In reply to comment #1)
> (In reply to comment #0)
> > 1.go to http://www.html5accessibility.com/tests/form-describedby.html
> > 2. focus on the first input (has a required attribute)
> > 3. use an inspect tool to see 
> > "State:	focused,focusable,alert low,alert high"
> 
> This is correct and so set by the engine's HTML5 validation, to which the
> a11y APIs just react. As soon as you type a letter into the box, the
> "invalid" state clears. As soon as you remove that letter, the "invalid"
> state returns. This is not just a11y APIs, but if you query the element's
> validity via JS at these two points, you'll get these answers back, too.
> 
> And since an empty required field is not valid, this is not a bug.
> 
> > note: text input (age) has aria-required instead, it only has the alert low
> > state.
> 
> Right, since the ARIA-invalid state must be set via JS, and thus one has to
> implement their own validation in JS to accomplish the same.

seems odd, since sighted users do not get told there is an issue until the user attempts to submit the form.
(Reporter)

Comment 3

7 years ago
(In reply to comment #2)
> (In reply to comment #1)
> > (In reply to comment #0)
> > > 1.go to http://www.html5accessibility.com/tests/form-describedby.html
> > > 2. focus on the first input (has a required attribute)
> > > 3. use an inspect tool to see 
> > > "State:	focused,focusable,alert low,alert high"
> > 
> > This is correct and so set by the engine's HTML5 validation, to which the
> > a11y APIs just react. As soon as you type a letter into the box, the
> > "invalid" state clears. As soon as you remove that letter, the "invalid"
> > state returns. This is not just a11y APIs, but if you query the element's
> > validity via JS at these two points, you'll get these answers back, too.
> > 
> > And since an empty required field is not valid, this is not a bug.
> > 
> > > note: text input (age) has aria-required instead, it only has the alert low
> > > state.
> > 
> > Right, since the ARIA-invalid state must be set via JS, and thus one has to
> > implement their own validation in JS to accomplish the same.
> 
> seems odd, since sighted users do not get told there is an issue until the
> user attempts to submit the form.

actually a red border appears around a text field with a required attribute if the user types something into the text field, then removes it, but not if the user tabs through it without entering anything.An error message is shown after the user attempts to submit the form.
(Reporter)

Comment 4

7 years ago
(In reply to comment #1)
> (In reply to comment #0)
> > 1.go to http://www.html5accessibility.com/tests/form-describedby.html
> > 2. focus on the first input (has a required attribute)
> > 3. use an inspect tool to see 
> > "State:	focused,focusable,alert low,alert high"
> 
> This is correct and so set by the engine's HTML5 validation, to which the
> a11y APIs just react. As soon as you type a letter into the box, the
> "invalid" state clears. As soon as you remove that letter, the "invalid"
> state returns. This is not just a11y APIs, but if you query the element's
> validity via JS at these two points, you'll get these answers back, too.
> 
> And since an empty required field is not valid, this is not a bug.
> 
> > note: text input (age) has aria-required instead, it only has the alert low
> > state.
> 
> Right, since the ARIA-invalid state must be set via JS, and thus one has to
> implement their own validation in JS to accomplish the same.

Do you think we should be advising authors to also set aria-invalid=true on text fields that are required so the same states (alert low,alert high) are conveyed and the user gets the same message  aswith required?

Updated

7 years ago
Blocks: 389237

Comment 5

7 years ago
The field should not be marked invalid unless the field is set with an invalid value or the user has actually entered an invalid value. 

ALL users need to know that something was done incorrectly and not just AT users.

Comment 6

6 years ago
alert-low and alert-high MSAA states are used for required and invalid control states accordingly, that is a hack for old screen readers introduced before IA2. So is there anything we should fix here? wontfix?
You need to log in before you can comment on or make changes to this bug.