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

Question

I need to push JAWS screen reader to pronounce a new page title that gets updated in let's say 10 seconds.我需要推动 JAWS 屏幕阅读器来发音一个新的页面标题，该标题会在 10 秒内更新。 Unfortunately, the issue doesn't look that trivial.不幸的是，这个问题看起来并不那么微不足道。

It looks like setting title dynamically with javascript inside <head> is ignored by JAWS no matter of attributes.无论属性如何，JAWS 都忽略了在<head>中使用 javascript 动态设置标题。

The only possible way to push to pronounce the updated title I've found is to set the title text into a separate (hidden from eyes but not from JAWS) div inside body and set such attributes:推动发音我发现的更新标题的唯一可能方法是将标题文本设置为正文内的单独（对眼睛隐藏但不从 JAWS 隐藏）div 并设置此类属性：

<!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>

However, in this case JAWS pronounces the word ALERT.但是，在这种情况下，JAWS 发音为 ALERT。 Not good for title at all.根本不适合标题。

Any option so that JAWS pronounces only "This new text will be read by JAWS" without the word ALERT?有什么选项可以让 JAWS 只发音“这个新文本将由 JAWS 阅读”而没有 ALERT 这个词？ aria-live assertive attributes didn't help, JAWS simply doesn't read it for me if the text is dynamic (10 seconds delay). aria-live 断言属性没有帮助，如果文本是动态的（10 秒延迟），JAWS 根本不会为我读取它。 PS sr-only Bootstrap class is used to hide the text from eyes. PS sr-only Bootstrap 类用于隐藏文本。

Answer 1

A JAWS user can hear the page title by using the Ins + T shortcut key but that's not what you're asking about. JAWS 用户可以使用Ins + T快捷键听到页面标题，但这不是您要询问的内容。 And the user wouldn't know they need to hit that key unless they were told a new title was set, which is your main question.除非被告知设置了新标题，否则用户不会知道他们需要按下该键，这是您的主要问题。 But I wanted to point out the key as FYI.但我想指出关键是仅供参考。

You're on the right track.你在正确的轨道上。 Changing the <title> is not going to be announced by default.默认情况下不会宣布更改<title> 。 It's not an HTML element that expects to be dynamic so you have to manually notify assistive technology that a change was made.它不是一个期望是动态的 HTML 元素，因此您必须手动通知辅助技术进行了更改。

(I mention "assistive technology" because JAWS is just one brand of screen reader and a screen reader is just one type of assistive technology. Some blind users use refreshable braille displays and won't have a screen reader. They should know about the <title> change as well. My comments below are generic enough for all assistive technology.) （我之所以提到“辅助技术”，是因为 JAWS 只是屏幕阅读器的一种品牌，而屏幕阅读器只是辅助技术的一种。一些盲人使用可刷新的盲文显示器，不会有屏幕阅读器。他们应该知道<title>也发生了变化。我下面的评论对于所有辅助技术来说已经足够通用了。）

You'll need to use a " live region ", which you were attempting to do but there are some things you need to know about live regions.您将需要使用“活动区域”，您正在尝试这样做，但您需要了解一些有关活动区域的信息。

There is spotty support for adding a live region dynamically, as you were doing in your example.正如您在示例中所做的那样，动态添加活动区域的支持参差不齐。 Ideally, the live region should exist on the page at load time.理想情况下，活动区域应在加载时存在于页面上。 It should be part of your DOM when the page is loaded.加载页面时，它应该是 DOM 的一部分。 You can have an empty live region that you dynamically add text to later.您可以有一个空的活动区域，以后可以动态添加文本。
You can create a live region either by using 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”或“assertive”来创建实时区域，也可以使用提供隐式实时区域的角色，例如alert 、 log 、 marquee 、 status或timer 。

In your case, a simple aria-live="polite" is sufficient.在您的情况下，一个简单的aria-live="polite"就足够了。 That will solve your first problem by not announcing "alert" when the update is made.这将通过在进行更新时不宣布“警报”来解决您的第一个问题。

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

After you change your page title, you can insert text into the newtitle element and assistive technology will be notified.更改页面标题后，您可以在newtitle元素中插入文本，辅助技术会收到通知。 If you're using JAWS or NVDA or Voiceover, you'll hear the text announced.如果您使用 JAWS 或 NVDA 或 Voiceover，您将听到宣布的文本。 If you're using a refreshable braille device, the new text will appear on the braille device.如果您使用的是可刷新的盲文设备，新文本将出现在盲文设备上。

I'm not sure if you want the live message to say "a new title has been set" so that the user knows to re-read the title of the page again (using the appropriate shortcut key for the screen reader) or if the text should be the actual text of the new title.我不确定您是否希望实时消息说“已设置新标题”，以便用户知道再次重新阅读页面标题（使用屏幕阅读器的相应快捷键），或者如果text 应该是新标题的实际文本。 That's up to you.这取决于你。

<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>

or或者

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

If your page title can be updated multiple times, then you'll also need aria-atomic="true" .如果您的页面标题可以多次更新，那么您还需要aria-atomic="true" 。

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

Without aria-atomic , only the text that changed will be announced.如果没有aria-atomic ，只会公布更改的文本。 So if you added "new page title" to the live region, it would be read just fine.因此，如果您将“新页面标题”添加到活动区域，它会被很好地阅读。 But if you then change it to "another new page title", then only the word "another" would be announced because it's the only thing different from the previous change.但是，如果您随后将其更改为“另一个新页面标题”，那么只会宣布“另一个”这个词，因为它与之前的更改唯一不同。

With aria-atomic="true" , all the text you insert will be read.使用aria-atomic="true" ，您插入的所有文本都将被读取。

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2022-05-26 16:18:52

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2022-05-26 16:18:52

解决方案1
2 已采纳 2022-05-26 16:18:52