Получение предупреждений для чтения после обновления страницы в IE и Firefox

Question

В целях доступности мне нужно, чтобы отображаемые "ошибки" читались сразу после обновления страницы.

В настоящее время у меня есть role="alert" и tabindex="-1'в div, содержащем ошибку. Это прекрасно работает в Google Chrome, но, похоже, ни IE, ни Firefox не поддерживают то, что я сделал.

В Chrome пользователю предоставляется страница входа в систему с полем имени пользователя и пароля. Пользователь "отправляет" форму без заполнения какой-либо информации. Страница обновляется с ошибкой ниже, и NVDA немедленно считывает ошибку. (Я понимаю, что проверка в реальном времени была бы хорошей, но это будет сделано позже)

<div id="notification_block">    
<div class="alert alert-danger" role="alert" aria-labelledby="alertHeading" tabindex="-1">  
    <h2 id="alertHeading">Error: Login Failed</h2>  
    <div>Invalid username/password combination. Please verify that your information is correct.</div>  
</div>             
</div>

Любые идеи, как я могу заставить это работать в IE и Firefox?

Answer 1

Вместо использования role="alert", я бы просто установил фокус на div при загрузке страницы. Это приведет к тому, что оно будет надежно считываться первым, и это довольно распространенное решение.

Answer 2

Добавьте атрибут арии aria-live="assertive" к ошибке, бросая div. Таким образом, все программы чтения с экрана смогут читать все динамически появляющееся содержимое.

Answer 3

Единственный способ заставить это работать - по существу отложить вставку контента в роль оповещения, пока все объявления для страницы не будут завершены. Нет способа определить, когда это происходит программно, поэтому вам следует:

1. ждать загрузки страницы,
2. установить время ожидания (скажем, 500 мс)
3. по истечении времени ожидания вставьте содержимое в предупреждение

Это увеличит вероятность того, что контент будет объявлен