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

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

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

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

1
SOLO 25 Сен 2018 в 18:16

2 ответа

Лучший ответ

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

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

В сочетании с

$(function() {
    // existing logic here

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

Вызывается при загрузке нового содержимого.

0
SOLO 28 Сен 2018 в 20:38

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

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

Есть несколько приличных блогов о доступных СПА:

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

3
slugolicious 25 Сен 2018 в 16:44