WebAIM - Web Accessibility In Mind

E-mail List Archives

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


From: Birkir R. Gunnarsson
Date: Dec 23, 2016 10:58AM

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>
> > > > >

Work hard. Have fun. Make history.