I'm trying to define a title for a <select> tag which is read by the Android screen reader, mostly called "Talkback". On my test device (Galaxy S8+) it's called "Voice Assistant".
Interestingly, the following HTML works with NVDA (PC) and with VoiceOver (iOS), but I don't have any idea why it doesn't work on Android.
Here's the minimal example as HTML page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Test</title>
<style>
form{
background: red;
margin: 5px 0;
}
label,
select{
display: block;
margin: 10px 0;
}
</style>
</head>
<body>
<a href="/test">Test link</a>
<form action="/en" method="post" accept-charset="UTF-8">
<label name="edit-destination-1-label" id="edit-destination-1-label" for="edit-destination-1">Choose language</label>
<select id="edit-destination-1" name="edit-destination-1" aria-labelledby="edit-destination-1-label">
<option value="/de">German</option>
<option value="/fr">French</option>
<option value="/en" selected="selected">English</option>
</select>
</form>
<a href="/test">Test link</a>
</body>
</html>
As you can see it's just a reference of for and id as well as a reference of aria-labelledby.
Does anyone know a solution here? I just want the Android screen reader to speak "Choose language" and when you activate it, it should jump to the select menu.
For a working example reference take the post.ch page, section "calculate prices". When you navigate to it with Android it reads "Country" before the <select>.
EDIT What I've done to solve the problem temporary is to use a link instead of a label, as this works.
