3

aria-label is not being read on Android Chrome, for example:

<input aria-label="test" type="text">

On Android chrome, it reads "Editbox, double tap to edit, double tap to enter text".

But the same thing is read as "test, text field, double tap to edit" on iOS chrome.

Anyone else ever seen this issue?

snowrain
  • 422
  • 4
  • 16
  • Turns out this is an issue only for Samsung devices. – snowrain Dec 03 '18 at 21:37
  • I believe this is the issue you filed: https://issuetracker.google.com/issues/120171533 I'm running into the same issue on a Nexus. However, the aria-label for me is on a span tag. Have you come to any conclusion? – tim Apr 19 '19 at 16:58

1 Answers1

0

That would be a blatant bug with android/chrome. The aria-label attribute is a global attribute that can be used on any element (see https://www.w3.org/TR/wai-aria/#global_states).

What happens if you try aria-labelledby?

<span id="foo" style="display:none">test</span>
<input aria-labelledby="foo" type="text">

Will android/chrome read that?

What happens with the <label> element?

<label for="myid" class="sr-only">test</label>
<input id="myid" type="text">

Will android/chrome read that?

(The "sr-only" class is used to visually hide the <label> but it's still available for screen readers to read. See What is sr-only in Bootstrap 3?)

slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • Surprisingly none of them work. All of them just reads "editbox, double tap to edit" – snowrain Nov 28 '18 at 20:27
  • wow, that's a serious issue for android. do you have a way to report a bug to them? i'm assuming you're using talkback? do you have another browser on android to test? – slugolicious Nov 29 '18 at 00:03
  • Yes, I'm using Talkback. Firefox on Android has the same issue. I opened an issue on Google Issue Tracker, we'll see where this goes. – snowrain Nov 29 '18 at 19:30