WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Patrick H. Lauke
Date: Jul 23, 2013 2:07AM

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