Я задавал подобные вопросы до , но я не могу обрести спокойствие, пока не нашел обходной путь:
VoiceOver на iOS - это только программа чтения с экрана, с которой я столкнулся, которая, кажется, не обрабатывает якоря и JavaScript element.focus() работают правильно.
Проверьте мой блог .Там вы увидите классическую skip to content ссылку и кнопку scroll to top.Ссылка - это обычный якорь, целью которого является div с идентификатором main.Кнопка запускает анимацию, но так как у нее нет нужного эффекта для слепых, я также заставил ее переместить фокус на ссылку skip to content.Дважды нажмите на любой из вышеупомянутых элементов управления, когда VoiceOver включен.Фокус не будет перемещен.Я протестировал это в приложениях для iOS для Safari, Firefox, Google Chrome и iSource.
Теперь перейдите на любое другое устройство, будь то телефон Android или компьютер с Windows.Включите программу чтения с экрана.Насколько я могу судить, он всегда работал (протестировано с Microsoft Edge, Google Chrome и Internet Explorer).
HTML-код для привязки:
<a href="#main" id="top-link">Skip to content</a>
<!-- ... -->
<div id="main" role="main">
<!-- ... -->
</div>
JS для кнопки:document.getElementById ('scroll-to-top'). addEventListener ('click', function () {document.getElementById ('top-link'). focus ();});
Ничего особенного,право?И нет, tabindex="-1" на главном div не решает мою проблему с якорем.Что работает, если якорь ссылается на ссылку, но должен содержать некоторый видимый текст, например,
<a id="anchorTarget"> </a>
, не работает.Кто-нибудь наткнулся на хороший, надежный обходной путь, или мне просто придется смириться с тем фактом, что смена фокуса якорей / JavaScript ничего не делает для пользователей VoiceOver на iOS?