WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Birkir R. Gunnarsson
Date: Dec 23, 2016 11:02AM

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>
>> >> >> >> >>
>
>
> --
> Work hard. Have fun. Make history.
>


--
Work hard. Have fun. Make history.