Заставьте JAWS читать заголовок страницы программно при загрузке нового контента

Question

Я унаследовал проект, в котором используется много JS, запускаемых по клику, для изменения содержимого страницы вместо ссылок на разные реальные HTML-страницы.Меня просят заставить JAWS читать заголовок страницы, когда это происходит, как если бы загружалась новая страница.

Из моих наблюдений и небольшого тестирования я прочитал заголовок страницы (то есть содержимоетег <title>) является стандартным поведением для JAWS при связывании с новой отдельной страницей (как в файле foo.html), но не с тем, что происходит при нажатии ссылки или кнопки на той же странице.

Как я могу заставить JAWS читать заголовок страницы после нажатия на ссылку или кнопку, которые изменяют содержимое существующей страницы таким образом, что для пользователя это выглядит как новая страница, но на самом деле это тот же самый файл под капотом?

Для этого вопроса, пожалуйста, предположите, что рефакторинг того, что я должен использовать реальную новую страницу вместо замены контента JS, не вариант.И если что-то не так с моими первоначальными предположениями, пожалуйста, дайте мне знать об этом.

Answer 1

В ответе slugolicious есть хорошая информация.У конкретной проблемы есть более простое решение, хотя: <title> элементы могут быть ARIA-ified.

<title role="banner" aria-live="polite">Default title here</title>

в сочетании с

$(function() {
    // existing logic here

    $(title).html("New title here");
});

, вызываемым при загрузке нового контента.

Answer 2

Похоже, у вас есть одностраничное приложение (SPA).Вы не можете принудительно прочитать сам элемент <title>, но если вы также поместите тот же текст в контейнер aria-live="polite" (визуально скрытый <div> или <span> (*)),это будет прочитано.

Вы все еще хотите обновить заголовок, даже если он не читается, поскольку пользователь программы чтения с экрана может использовать сочетание клавиш ( INS + T с челюстями) дляпрочитайте заголовок страницы.И когда пользователь переключается между браузером и другим приложением, а затем снова возвращается, он слышит заголовок, поэтому все равно важно обновить заголовок.

Существуют несколько достойных блогов, касающихся доступных SPA:

• Доступные заголовки страниц в одностраничном приложении конкретно говорит о заголовке страницы в SPA
• Создание доступных одностраничных приложений говорит об общих принципах, нона самом деле нет примеров кода
• Одностраничные приложения, Angular.js и accessibility специально говорят об использовании angular, но понятия и примеры кода могут применяться в общем.

(*) Обратите внимание, что при визуальном сокрытии области aria-live не используйте CSS display:none, поскольку это также скрывает его от программы чтения с экрана.Используйте класс sr-only.См. Что такое sr-only в Bootstrap 3?