search

jquery-archive / jquery-mobile

jQuery Mobile Framework
https://jquerymobile.com
Other
9.69k stars 2.4k forks source link

Select menu - "faked" current selection text separately announced by screen readers #8256

Closed patrickhlauke closed 8 years ago

patrickhlauke commented 9 years ago

Taking the first example from http://demos.jquerymobile.com/1.4.5/selectmenu/, based on the following simplified markup

<div ... class="...">
  <span>The 1st Option</span>
  <select name="..." ...>
    <option value="1">The 1st Option</option>
    ...
  </select>
</div>

when using TalkBack/Android or VoiceOver/iOS, the <span> is read/announced separately, before the actual <select>. This results in redundant/inappropriate output (as the <span> is not announced as being actionable, and the current option is already announced once the user moves their screenreader focus to the actual <select>).

Solution would be to apply an aria-hidden="true" to that <span>

<div ... class="...">
  <span aria-hidden="true">The 1st Option</span>
  <select name="..." ...>
    <option value="1">The 1st Option</option>
    ...
  </select>
</div>

which suppresses that element completely from being seen/announced by SRs

arschmitz commented 9 years ago

@patrickhlauke thank you for reporting this. PR very welcome if you have time. Either way we will make sure this is fixed for the beta coming shortly.

patrickhlauke commented 9 years ago

No worries, I'll see if I can find some time to properly PR this in the next few days :)