使特定元素只能由屏幕阅读器阅读答案

【问题标题】：Make specific elements readable by screen readers only使特定元素只能由屏幕阅读器阅读
【发布时间】：2019-11-13 07:18:18
【问题描述】：

我正在研究 UI 可访问性，并希望将特定文本添加到元素，然后屏幕阅读器软件将读取该文本。例如，对于每个<li> 项目，我想添加一条消息“使用箭头键切换元素”。有没有办法添加这样的消息？不幸的是，覆盖aria-label 不是一种选择。

【问题讨论】：

标签： html css accessibility screen-readers

【解决方案1】：

您最好的选择可能是在 CSS 中使用 visually hidden class，这是一种“hack”，意味着文本不会在视觉上呈现，但仍由屏幕阅读器显示。例如

<li>My text my text <span class="visually-hidden">Switch through the elements using arrow keys</span></li>

不幸的是，您必须在每个 <li> 的末尾重复相同的文本元素，这不能自动重复（使用 CSS ::after 和 content: 在不同的屏幕阅读器供应商之间的支持非常不均衡）。

不过，虽然我不知道更广泛的背景，但请三思是否需要在此处添加此信息。

这些<li> 中有自定义交互元素吗？在这种情况下，他们不能使用不同的 ARIA 角色来代表，而不是被宣布为一个列表吗？
您只是在指导用户如何转到下面的行吗？他们可能不需要这些：日常使用屏幕阅读器用户的人知道它是如何工作的基础知识，他们将知道如何浏览列表。到处添加可能会让他们感到沮丧。另请记住，大多数不同的屏幕阅读器已经给出了说明。
如果没有：您是否有某种自定义交互来捕获 Javascript 中的向下箭头 keyup 事件？这并不总是能很好地与屏幕阅读器配合使用，请务必对其进行测试并提供替代方案。
在极少数情况下，您确实需要添加仅限 SR 的建议，请谨慎使用“使用箭头键”之类的语言。如果他们在手机或平板电脑上，或者如果他们使用盲文键盘，甚至取决于他们的键映射和屏幕阅读器（例如，Mac 上的 VoiceOver 不会移动到下一行除非启用了 QuickNav，否则按向下箭头）。

【讨论】：

谢谢，似乎是一个选择。关于这是否是一个好主意 - 我直接与屏幕阅读器用户合作，似乎即使是有经验的用户也对 UI 选项卡的工作方式有些困惑。他们倾向于按 Tab 而不是使用箭头键，将焦点移动到另一个元素组，他们认为这是另一个选项卡。
我不确定我是否遵循；您的意思是这些列表项代表 UI 选项卡吗？在这种情况下，它们应该被标记并宣布为选项卡，并且确实应该可以使用选项卡键聚焦。否则，它们也会给有视力的键盘用户带来问题。 ARIA authoring practices have a great section 带有选项卡式界面的示例。

【解决方案2】：

WebAIM 有一个guide on this，建议使用绝对定位。同样，TheA11yproject 中还有另一个 useful guide 值得一读

我鼓励您完整阅读它，但为了方便和参考，这里是第二个示例中的 CSS（感谢 Victor 的建议）：

.screen-reader-only 
{
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

然后，您将为您想要的文本添加类，好吧，仅用于屏幕阅读器。例如

<div class="screen-reader-only"><a href="#main">Skip to main content</a></div>

当然，您可以调用课程 hidden 或 visually-hidden 或其他任何对您最有意义的内容。

注意事项

我会确保谨慎使用此技术，并在导航时考虑用户体验。

例如，通过将li 应用到li 元素内的跨度，应该可以很容易地实现您的li 示例。

  <li><span class="screen-reader-only">.... </span>...</li>

但是我强烈质疑这是否真的有必要。可能屏幕阅读器软件的用户已经熟悉如何使用它，并且有自己的导航方式。

对于屏幕阅读器用户而言，可能有时会遇到一个问题，那就是页面的语义有多混乱和冗长（与使用视觉效果相比，快速和全面地浏览并不容易）。添加此类额外的通知可能会导致此问题。

【讨论】：

谢谢，很有帮助！
关于您提供的 CSS 类的快速说明：WebAIM 使用的负位置技术被认为已弃用，因为浏览器仍会将其呈现在屏幕外，这可能会影响性能，并且有时可能会在从右到左书写的页面上呈现。您应该使用CSS clip instead 来确定。
感谢@Victor，这是一个很好的观点。我已经更新了我的示例以反映这一点。

【解决方案3】：

title="Switch through the elements using arrow keys" 可能吗？

【讨论】：