Доступность: выберите заголовок тега
Я пытаюсь определить заголовок для <select> тег, который читается программой чтения с экрана Android, в основном называется "Talkback". На моем тестовом устройстве (Galaxy S8+) он называется "Voice Assistant".
Интересно, что следующий HTML-код работает с NVDA (ПК) и с VoiceOver (iOS), но я понятия не имею, почему он не работает на Android.
Вот минимальный пример в виде HTML-страницы:
<!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>
Как вы можете видеть, это просто ссылка for а также id а также ссылка на aria-labelledby,
Кто-нибудь знает решение здесь? Я просто хочу, чтобы программа чтения с экрана Android говорила "Выберите язык", и когда вы ее активируете, она должна перейти в меню выбора.
В качестве примера рабочего примера возьмите страницу post.ch, раздел "Расчет цен". Когда вы переходите к нему с помощью Android, перед " <select>,
РЕДАКТИРОВАТЬ То, что я сделал для временного решения проблемы - это использование ссылки вместо метки, поскольку это работает.