WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Screen reader experience if HTML 5 and ARIA used on required fields

for

Number of posts in this thread: 9 (In chronological order)

From: Angela French
Date: Mon, Jul 22 2013 1:35PM
Subject: Screen reader experience if HTML 5 and ARIA used on required fields
No previous message | Next message →

Hello,
If a user had AT that supported both html 5 and ARIA, what would the experience be if the html5 "required" attribute is used along with the aria-required="true"? Would there be any aural redundancy or would the screen reader just read out "required" once?

<label for="firstname">First Name:</label><input type="text" id="firstname" required aria-required="true">

Thank you,

Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED =
http://www.checkoutacollege.com/
http://www.sbctc.edu

From: Jared Smith
Date: Mon, Jul 22 2013 1:46PM
Subject: Re: Screen reader experience if HTML 5 and ARIA used on required fields
← Previous message | Next message →

Both the ARIA and the native HTML5 attribute define the same property
for accessibility APIs. There would be no duplication of information.

Jared

From: Denis Boudreau
Date: Mon, Jul 22 2013 8:15PM
Subject: Re: Screen reader experience if HTML 5 and ARIA used on required fields
← Previous message | Next message →

Jared, are you implying that when both an aria attribute and a native HTML attribute define the same property for the accessibility API, then there is systematically no duplication for assistive technology?

/Denis


On 2013-07-22, at 3:46 PM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:

> Both the ARIA and the native HTML5 attribute define the same property
> for accessibility APIs. There would be no duplication of information.
>
> Jared
> > >

From: Jared Smith
Date: Mon, Jul 22 2013 8:59PM
Subject: Re: Screen reader experience if HTML 5 and ARIA used on required fields
← Previous message | Next message →

On Mon, Jul 22, 2013 at 8:15 PM, Denis Boudreau wrote:
> Jared, are you implying that when both an aria attribute and a native HTML attribute define the same property for the accessibility API, then there is systematically no duplication for assistive technology?

Yes. At least there shouldn't be if the assistive technology is using
the accessibility API.

Jared

From: Roger Hudson
Date: Mon, Jul 22 2013 9:16PM
Subject: Re: Screen reader experience if HTML 5 and ARIA used on required fields
← Previous message | Next message →

Hi Jared and Denis,

I tested this a couple of months ago with a few different browsers and
screen readers. You might find the information interesting.
http://usability.com.au/2013/05/accessible-forms-2-required-fields-and-extra
-information/

Roger

-----Original Message-----
From: Denis Boudreau [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Tuesday, 23 July 2013 12:16 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Screen reader experience if HTML 5 and ARIA used on
required fields

Jared, are you implying that when both an aria attribute and a native HTML
attribute define the same property for the accessibility API, then there is
systematically no duplication for assistive technology?

/Denis


On 2013-07-22, at 3:46 PM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:

> Both the ARIA and the native HTML5 attribute define the same property
> for accessibility APIs. There would be no duplication of information.
>
> Jared
> > > list messages to = EMAIL ADDRESS REMOVED =

messages to = EMAIL ADDRESS REMOVED =

From: Patrick H. Lauke
Date: Tue, Jul 23 2013 2:07AM
Subject: Re: Screen reader experience if HTML 5 and ARIA used on required fields
← Previous message | Next message →

On 23/07/2013 04:16, Roger Hudson wrote:
> I tested this a couple of months ago with a few different browsers and
> screen readers. You might find the information interesting.
> http://usability.com.au/2013/05/accessible-forms-2-required-fields-and-extra
> -information/

Also worth noting that - as Roger already mentions in his post - using
the HTML5 attribute will trigger native form validation in modern
browsers, which includes bringing up a native error message bubble when
the user attempts to submit the form with missing required fields. As
noted in http://html5accessibility.com/

"Firefox: exposes popup message as alert and identifies the field as
invalid.
Chrome: exposes as IA2 required state, does not expose invalid state or
expose popup message.
IE: Supported for visual users, but required state not exposed via
accessibility APIs. Visible error message not available via
accessibility APIs"

The fact that only Firefox seems to currently expose the actual error
message popup is possibly an issue right now. However, if you do want to
use "required" but don't want the browser to do its native error
handling (checking the fields and throwing up error bubbles) - maybe
because you're implementing your own JS-based error handling that brings
up a correctly marked-up popup/alert - you can also include the
"novalidate" attribute on the form itself. And then do a "belt and
braces" use of both HTML5 and ARIA attributes:

<form ... novalidate>
...
<input ... required aria-required="true">
...
</form>

--
Patrick H. Lauke

From: Sailesh Panchang
Date: Tue, Jul 23 2013 10:03AM
Subject: Re: Screen reader experience if HTML 5 and ARIA used on required fields
← Previous message | Next message →

I had noted the behavior last year at
http://www.deque.com/aria-group-viable-alternative-fieldset-legend
See the table on that page.
Thanks,
Sailesh



On 7/23/13, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = > wrote:
> On 23/07/2013 04:16, Roger Hudson wrote:
>> I tested this a couple of months ago with a few different browsers and
>> screen readers. You might find the information interesting.
>> http://usability.com.au/2013/05/accessible-forms-2-required-fields-and-extra
>> -information/
>
> Also worth noting that - as Roger already mentions in his post - using
> the HTML5 attribute will trigger native form validation in modern
> browsers, which includes bringing up a native error message bubble when
> the user attempts to submit the form with missing required fields. As
> noted in http://html5accessibility.com/
>
> "Firefox: exposes popup message as alert and identifies the field as
> invalid.
> Chrome: exposes as IA2 required state, does not expose invalid state or
> expose popup message.
> IE: Supported for visual users, but required state not exposed via
> accessibility APIs. Visible error message not available via
> accessibility APIs"
>
> The fact that only Firefox seems to currently expose the actual error
> message popup is possibly an issue right now. However, if you do want to
> use "required" but don't want the browser to do its native error
> handling (checking the fields and throwing up error bubbles) - maybe
> because you're implementing your own JS-based error handling that brings
> up a correctly marked-up popup/alert - you can also include the
> "novalidate" attribute on the form itself. And then do a "belt and
> braces" use of both HTML5 and ARIA attributes:
>
> <form ... novalidate>
> ...
> <input ... required aria-required="true">
> ...
> </form>
>
> --
> Patrick H. Lauke
> > re·dux (adj.): brought back; returned. used postpositively
> [latin : re-, re- + dux, leader; see duke.]
>
> www.splintered.co.uk | www.photographia.co.uk
> http://redux.deviantart.com | http://flickr.com/photos/redux/
> > twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > > >

From: JF
Date: Tue, Jul 23 2013 8:13PM
Subject: Re: Screen reader experience if HTML 5 and ARIA used on required fields
← Previous message | Next message →

There should not be. HTML5 states that native semantics trump ARIA, so even if coded as a duplication it is supposed to only report once.

From: JF
Date: Tue, Jul 23 2013 8:13PM
Subject: Re: Screen reader experience if HTML 5 and ARIA used on required fields
← Previous message | No next message

... Except @required and aria-required=true, where the @required attribute also has some native UI behavior that the aria attribute lacks. See: http://john.foliot.ca/required-inputs/