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



我需要推动JAWS屏幕阅读器来读出一个新的页面标题,这个页面标题将在10秒内更新。不幸的是,这个问题看起来并不是那么微不足道。

看起来在<head>中使用javascript动态设置标题会被JAWS忽略,无论属性如何。

我发现的唯一可能的方法是将标题文本设置为body内部的一个单独的(隐藏于眼睛但不从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>

然而,在这种情况下,JAWS发出ALERT这个词。对标题一点也不好

任何选项,使JAWS只读出"This new text将被JAWS读取"。没有"警惕"这个词?aria-live断言属性没有帮助,如果文本是动态的(10秒延迟),JAWS根本无法为我读取它。附注:sr-only Bootstrap类用于隐藏文本。

JAWS用户可以通过使用Ins+T快捷键听到页面标题,但这不是您要问的。用户不知道他们需要按那个键除非他们被告知设置了一个新标题,这是你的主要问题。但我想指出关键是供参考。

你在正确的轨道上。默认情况下不会宣布更改<title>。它不是一个期望是动态的HTML元素,所以你必须手动通知辅助技术发生了更改。

(我提到"辅助技术";因为JAWS只是屏幕阅读器的一个品牌,而屏幕阅读器只是一种辅助技术。一些盲人用户使用可刷新的盲文显示器,而不会使用屏幕阅读器。他们也应该知道<title>的变化。我下面的评论对所有辅助技术来说都是通用的。)

你需要使用"活动区域",这是你想要做的,但是关于活动区域,你需要知道一些事情。

  1. 不支持动态添加活动区域,就像您在示例中所做的那样。理想情况下,活动区域应该在加载时存在于页面上。当页面加载时,它应该是DOM的一部分。你可以有一个空的活动区域,稍后你可以动态地添加文本。
  2. 您可以通过使用aria-live并将值设置为"polite"或";assertive">您可以使用提供隐式活动区域的角色,例如警报、日志、字幕、状态或计时器。

在您的例子中,一个简单的aria-live="polite"就足够了。这将通过而不是解决您的第一个问题宣布"alert">

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

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

我不确定您是否希望实时消息显示"已设置新标题";这样用户就知道是否需要重新阅读页面标题(使用屏幕阅读器的相应快捷键),或者文本是否应该是新标题的实际文本。这取决于你。

<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,只有改变的文本将会公布。所以如果你添加了"新页面标题"对于活的区域来说,它可以很好地读取。但是如果你把它改成"另一个新页面标题",那么就只有"另一个"这个词了。将被宣布,因为这是与之前的更改唯一不同的地方。

Witharia-atomic="true"all您插入的文本将被读取。

最新更新