$('#firstButton').focus();
<div id="liveRegion" aria-live="assertive">
This is a very long text
</div>
<button id="firstButton">First Button</button>
我在可访问性问题上是一个新手。我基本上有一个按钮,希望将焦点放在页面加载上,但我也希望liveRegion中的屏幕阅读器可以拾取文本。 现在,页面加载期间的某个时刻文本将被插入,并且焦点将移至该按钮上。 有没有办法让屏幕阅读器不被打扰?
答案 0 :(得分:1)
活动区域起初可能会令人困惑。活动区域的目的是宣布对该页面的更改,而不是宣布页面加载信息。页面加载后,如果页面上发生了某些更改(例如,元素中的文本或添加了新元素),则可以使用aria-live
属性来宣布这些更改。
大多数页面在加载时不会宣布任何内容。屏幕阅读器用户将听到页面正在加载,完成后(通常在屏幕阅读器中会有声音提示,让您知道页面是否仍在加载或完成),通常会先声明页面标题,然后读取具有初始焦点的任何对象。
如果在页面加载后确实需要阅读某些内容,那么它可能应该是最初的重点。但请注意,因为将重点放在诸如段落(<p>
)或非语义元素(<div>
)之类的非交互式元素上可能会造成混淆。如果必须这样做,请确保该元素具有tabindex="-1"
,以使该元素不会处于正常的键盘焦点顺序。
答案 1 :(得分:0)
因此,无法阻止按钮获得焦点来阅读文本。 何时说什么的优先级顺序在很大程度上取决于屏幕阅读器/浏览器/操作系统的组合,但是通常,关注焦点的元素要优先于任何活动区域,包括断言。
您可以做的是,将焦点移到按钮上后,使实时区域断言文本出现。 这样便有更大的机会可以不间断地宣布。
在任何情况下,并非在所有平台上都可靠地读取页面加载时存在的活动区域。 为了确保可以有效说出它,请在页面完全加载完毕后将其显示在DOM中。