Я создаю приложение Angular и у меня возникают некоторые проблемы с поддержкой доступности для Jaws в IE 11.
Моя страница выглядит примерно так:
<div id="start-tabbing-from-here" aria-label="Press tab to begin" tabindex="-1"></div>
<h1 tabindex="0" aria-label="Some title">Some title</h1>
<p tabindex="0" aria-label="Some text">Some text</p>
<button tabindex="0" aria-label="Btn1">Btn1</button>
<button tabindex="0" aria-label="Btn2">Btn2</button>
<button tabindex="0" aria-label="Btn3">Btn3</button>
<button tabindex="0" aria-label="Btn4">Btn4</button>
Когда я уверен, чтоэлементы страницы загружены, я 'фокусируюсь' на идентификаторе # start-tabbing-from-here, используя JQuery.
Предполагается, что, как только пользователь начнет вкладку, он будет перемещаться по элементам в порядке страниц.Т.е.: первый фокус - «Некоторый заголовок» на следующей «вкладке», он все время перемещается в «Некоторый текст», читая вслух содержимое для каждого элемента.
В Chrome (linux / windows / mac) и Safari на Mac я получаю ожидаемое поведение.
В IE происходит нечто действительно странное: на первой вкладке начинается чтение не только первого элемента, но и всех элементов в порядке страниц.Т.е. JAWS будет читать: «Некоторый заголовок, какой-нибудь текст Btn1 ...», а затем внезапно «сбросится», начиная с первого элемента, а затем прочитает это вслух в последний раз.
По сути, произойдет следующее: пользователь вкладывает один раз и фокус переходит на «Некоторый заголовок».Затем JAWS читает вслух: «Некоторый заголовок, некоторый текст Btn1 Btn2 Некоторый заголовок», и затем он перестает читать, и страница начинает вести себя так, как я ожидал.
Мне кажется, что «сброс» происходит вфиксированный момент времени или после прочтения определенного количества слов.Например, если я изменю свое содержание своих элементов на:
<div tabindex="-1" id="start-tabbing-from-here">
<h1 tabindex="0" aria-label="Some title">Some title</h1>
<p tabindex="0" aria-label="Some longer text that is here">Some longer text that is here</p>
<button tabindex="0" aria-label="Btn1">Btn1</button>
<button tabindex="0" aria-label="Btn2">Btn2</button>
<button tabindex="0" aria-label="Btn3">Btn3</button>
<button tabindex="0" aria-label="Btn4">Btn4</button>
</div>
JAWS может читать: «Некоторый заголовок Некоторый более длинный текст, который Некоторый заголовок».
Я действительно сбит с толку этим поведением и не совсем уверен, с чего начать отладку.Я действительно надеюсь на какой-то вклад!:)