WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: How to solve a talkback chrome issue for aria-describedby


From: terrence v
Date: Dec 23, 2016 11:38AM

could you shed some light what it looks like in code to assign to the
construct , sorry I did not understand that clearly.

On Dec 23, 2016 10:09 AM, "Moore,Michael (Accessibility) (HHSC)" <
<EMAIL REMOVED> > wrote:

What if you added an aria-describedby="id of error message" to the
construct as a backup? - there would probably be a risk of repeating the
error message but at least it would be read. I don't suppose polyfill
methods would work for this?

Mike Moore
EIR (Electronic Information Resoources) Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)
(512) 574-0091 (Cell)

Making electronic information and services accessible to people with
disabilities is everyone's job. I am here to help.

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf
Of Birkir R. Gunnarsson
Sent: Friday, December 23, 2016 12:03 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] How to solve a talkback chrome issue for

The new ARIA 1.1 construct for error messages is to put aria-invalid="tru"
and aria-errormessage="id of error message element", on the input. But I
doubt there is much, if any, support for this yet.

On 12/23/16, Birkir R. Gunnarsson < <EMAIL REMOVED> > wrote:
> Sounds like a Chrome bug.
> I know placeholder maps to an element´s accessible description, but I
> am not sure waht hapens when you have multipl sources o accessible
> escription. I would they they all map, but in this case the second
> source isn´t getting mapped.
> On 12/22/16, terrence v < <EMAIL REMOVED> > wrote:
>> Hello,
>> I am having an issue with aria-deacribedby being read for android
>> talkback on the chrome browser when the user focuss on the field.
>> It seems to work for an input type text without a placeholder but
>> does not read it if the input has a placeholder text or is a select
>> control.
>> It work on iOS , jaws and NVDA, is there any way I can fix this for
>> android chrome witouth breaking it for the others.
>> Here is a an example of a working field and 2 problem fields.
>> http://output.jsbin.com/tozacusoci
>> If the link does not work below is the code snippet
>> <strong>Works</strong>
>> <div>
>> <label for='username' >username</label>
>> <input id='username' type="text" aria-describedby="worksError"
>> aria-invalid="true"/>
>> <div id="worksError" class="errorText" aria-live="polite">error
>> please enter a value</div>
>> </div>
>> <strong>does not work</strong>
>> <div>
>> <label for='email'>Email</label>
>> <input id='email' type="text" placeholder=" <EMAIL REMOVED> "
>> aria-describedby="emailError" aria-invalid="true"/>
>> <div id="emailError" class="errorText" aria-live="polite">error
>> please fill in a valid username</div>
>> </div>
>> <div>
>> <label for='year'>Year</label>
>> <select id='year' aria-describedby="yearError" aria-invalid="true">
>> <option value="">select year</option>
>> <option value="2016">2016</option>
>> <option value="2017">2017</option>
>> </select>
>> <div id="yearError" class="errorText" aria-live="polite">error
>> please select a year</div>
>> </div>
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
> --
> Work hard. Have fun. Make history.

Work hard. Have fun. Make history.