推送 JAWS 以阅读更新的标题或文本

Question

我需要按下 JAWS 屏幕 reader 来读出一个新的页面标题，假设 10 秒后更新。不幸的是，这个问题看起来并不那么微不足道。

无论属性如何，JAWS 都忽略了在 <head> 中使用 javascript 动态设置标题。

推送我发现的更新标题的唯一可能方法是将标题文本设置为单独的（从眼睛隐藏但不是从 JAWS 隐藏）div 在 body 和设置这样的属性：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>This is a default title</title>
</head>
<body>
<div>some page text</div>
<script>

    setTimeout(function(){ 
        let titleElement = document.head.querySelector('title');
        titleElement.setAttribute('aria-live', 'assertive');
        titleElement.setAttribute('role', 'banner');
            document.title='This new title wont be read by JAWS';
            
            
            document.getElementsByTagName('body')[0].innerHTML += '<div id="idChild2f5" class="sr-only" role="alert">This new text will be read by JAWS</div>';
        }, 10000
    );
</script>

</body>
</html>

但是，在这种情况下，JAWS 发音为 ALERT。根本不适合标题。

是否有任何选项可以使 JAWS 仅发音为“此新文本将由 JAWS 读取”而不包含 ALERT 一词？ aria-live 断言属性没有帮助，如果文本是动态的（延迟 10 秒），JAWS 根本不会为我阅读它。 P.S。 sr-only Bootstrap class 用来隐藏文字

Answer 1

JAWS 用户可以使用 Ins+T 快捷键听到页面标题，但这不是您要问的.除非被告知设置了新标题，否则用户不会知道他们需要按下该键，这是您的主要问题。但我想指出关键作为仅供参考。

你走在正确的轨道上。更改 <title> 默认情况下不会公布。它不是预期为动态的 HTML 元素，因此您必须手动通知辅助技术已进行更改。

(我提到“辅助技术”是因为 JAWS 只是屏幕的一个品牌 reader 而屏幕 reader 只是一种辅助技术。一些盲人用户使用 refreshable braille displays并且不会有屏幕 reader。他们也应该知道 <title> 的变化。我下面的评论对所有辅助技术都足够通用。）

您将需要使用“live region”，您正试图这样做，但您需要了解一些关于实时区域的信息。

动态添加实时区域的支持参差不齐，就像您在示例中所做的那样。理想情况下，实时区域应该在加载时存在于页面上。加载页面时，它应该是 DOM 的一部分。您可以有一个空的实时区域，稍后可以动态添加文本。
您可以使用 aria-live and setting the value to "polite" or "assertive" or you can use a role that provides an implicit live region such as alert, log, marquee, status, or timer.

对于您的情况，一个简单的 aria-live="polite" 就足够了。这将通过 not 在进行更新时宣布“警报”来解决您的第一个问题。

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

更改页面标题后，您可以在 newtitle 元素中插入文本，辅助技术将收到通知。如果您使用的是 JAWS 或 NVDA 或画外音，您会听到朗读的文本。如果您使用的是可刷新的盲文设备，新文本将显示在盲文设备上。

我不确定您是否希望实时消息说“已设置新标题”，以便用户再次知道 re-read 页面标题（使用适当的快捷键屏幕 reader) 或者文本是否应该是新标题的实际文本。由你决定。

<div class="sr-only" aria-live="polite" id="newtitle">
  A new page title has been set. Use your assistive technology to read the page title again.
</div>

或

<div class="sr-only" aria-live="polite" id="newtitle">
  New page title
</div>

如果您的页面标题可以多次更新，那么您还需要aria-atomic="true"。

<div class="sr-only" aria-live="polite" aria-atomic="true" id="newtitle">
</div>

没有 aria-atomic，只会公布更改的文本。因此，如果您将“新页面标题”添加到活动区域，它就会被正常阅读。但是，如果您随后将其更改为“另一个新页面标题”，则只会宣布“另一个”一词，因为这是与之前更改唯一不同的地方。

使用 aria-atomic="true"，所有将读取您插入的文本。

推送 JAWS 以阅读更新的标题或文本

Push JAWS to read updated title or text

html

javascript

accessibility

title

jaws-screen-reader