WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

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

yes looks like a chrome bug , seems to work fine fiefox ,but looking for a
android chrome solution which does not break break voiceover, jaws or nvda,
has to work well with them.



On Dec 23, 2016 9:58 AM, "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>
> > > > > > > > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > > >