WebAIM - Web Accessibility In Mind

E-mail List Archives

How to solve a talkback chrome issue for aria-describedby

for

From: terrence v
Date: Dec 22, 2016 12:42PM

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>