фокус не меняется после угловой нагрузки нового компонента - PullRequest
0 голосов
/ 27 декабря 2018

Я пытаюсь исправить ошибку доступности для программы чтения с экрана в веб-приложении Angular2.В Chrome, когда загружается компонент A (код в поле «До»), основное внимание уделяется всему окну браузера, и рассказчик программы чтения с экрана объявляет заголовок страницы компонента A.Однако в Edge фокус остается тем же, что и на предыдущей странице, в результате чего заголовок не объявляется.Цель не зависит от того, в каком браузере заголовок должен быть объявлен один раз и только один раз.

Я попробовал решение, изменив componentA.html (код в After) и установил фокус на идентификатор componentA-id в ngOnInit ().то есть:

document.getElementById('componentA-id').focus();

Теперь в Edge рассказчик может правильно сфокусироваться на всем компоненте A и объявить название компонента A.Однако в Chrome все окно сфокусировано, а компонент A также сфокусирован, в результате чего заголовок объявляется дважды.Можно ли как-то отключить фокус Chrome или есть другие способы решения этой проблемы для достижения моей цели?

До: componentA.html

<div>
    <div title="ComponentA Title" role="banner">ComponentA Title</div>        
    ...
    ...
</div>

После: componentA.html

<div aria-label="ComponentA Title" id="componentA-id" tabindex="-1">
    <div title="ComponentA Title">ComponentA Title</div>        
    ...
    ...
</div>

1 Ответ

0 голосов
/ 27 декабря 2018

У вас есть одностраничное приложение?Вы сказали:

"... фокус остается прежним"

, что заставляет меня думать, что вы загружаете новый контент на текущую страницу, напримеркак одностраничное приложение.

Если вы обновляете заголовок страницы (что полезно для программ чтения с экрана для одностраничных приложений), новый заголовок страницы не обязательно будет объявлен, поскольку программа чтения с экрана нене знаю, вы обновили некоторые из содержимого страницы.Если страница была перезагружена, заголовок будет читаться.

Чтобы прочитать заголовок страницы, вам нужно обновить элемент, для которого aria-live установлено в "вежливое".Элемент может быть визуально скрыт, так что об этом могут знать только программы чтения с экрана.

<div class="sr-only" aria-live="polite"></div>

(см. Что такое sr-only в Bootstrap 3? для получения информации о «sr-only»класс)

Когда вы обновляете свою страницу, вставьте текст заголовка страницы в

, чтобы он выглядел следующим образом:
<div class="sr-only" aria-live="polite">ComponentA Title</div>

Программа чтения с экрана прочитает новый текст, и вы выиграли 'не нужно переставлять на это внимание.

...