屏幕阅读器忽略焦点事件

Question

有一个有趣的问题。我正在为一个大型的全国性客户提供可访问性。该网站是一系列表格问题。

除了客户端希望在加载时专注于第一个输入，同时还要从站点顶部到底部进行读取之外，所有东西都在使用屏幕阅读器和键盘辅助功能。

我集中精力进行下载，但是屏幕阅读器（正确地）开始从输入向下而不是从上向下读取。

我无权更改规格。换句话说，这必须按预期工作。

• 已加载网站
• 第一个输入的光标
• 屏幕阅读器从上到下阅读从页面开始的底部开始。

关于如何让屏幕阅读器忽略焦点事件并从上到下阅读的任何想法？

Answer 1

我不相信您的要求是可能的。您遇到的行为是设计使然和正确的。尝试强制执行其他行为可能会降低可访问性，而不是改善可访问性。

一旦屏幕阅读器聚焦或输入input元素（取决于特定行为），它将退出标准的“浏览模式”并进入“应用程序模式”。有时也称为“表单模式”或“聚焦模式”。

在应用程序模式下，用户将只能访问表单内容，例如input，select，textarea和button元素。

如果屏幕阅读器处于应用程序模式，则正常的页面内容，如段落，标题，表格等，将被忽略。

尽管从技术上讲，这并不是对WCAG的违反，但在可访问性社区中，通常将焦点集中在页面加载上，因为它有可能使视力不佳的用户迷失方向。

参考：

https://www.accessibility-developer-guide.com/knowledge/desktop-screen-readers/browse-focus-modes/

https://tink.uk/understanding-screen-reader-interaction-modes/

Answer 2

Josh所说的是正确的，没有（正确的）方法可以使屏幕阅读器在这里表现出不同。

但是，作为解决方法，您可以做的是在用户进入页面之前（假设它是网站的自然流程的一部分）让用户知道即将发生的行为。

您可以通过激活页面的链接中的一些视觉上隐藏的文本来执行此操作。

例如

<a href="pageURL">
    Anchor Text 
    <span class="visually-hidden">
        The first input field will be focused automatically on page load.
    </span>        
</a>

或者，如果要直接加载此页面，则可以将视觉上隐藏的文本添加为​​输入标签的一部分。

例如

<label for="focusedinput">
    First Field Name 
    <span class="visually-hidden">Please note we have focused this form field automatically, there is content above this input field.</span>
</label>
<input id="focusedinput />

CSS

.visually-hidden { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}