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

Question

我正在研究 UI 可访问性，并希望向元素添加特定文本，然后屏幕 reader 软件会读取该文本。例如，我想为每个 <li> 项添加一条消息 "Switch through the elements using arrow keys"。有没有办法添加这样的消息？不幸的是，覆盖 aria-label 不是一个选项。

Answer 1

您最好的选择可能是在 CSS 中使用 visually hidden class，"hack" 这意味着文本不会在视觉上呈现，但仍由屏幕宣布 readers。例如

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

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

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

这些 <li> 中是否有自定义交互元素？在那种情况下，他们不能使用不同的 ARIA 角色来表示，而不是作为列表公布吗？
你只是在指导用户如何转到下面的行吗？他们可能不需要：使用屏幕的人 reader 用户 day-to-day 了解其工作原理的基础知识，并且他们将知道如何浏览列表。在任何地方添加它可能会使他们感到沮丧。还要记住，大多数不同的屏幕 reader 已经给出了说明。
如果没有：您是否有某种自定义交互来捕获 Javascript 中的向下箭头 keyup 事件？这并不总是适用于屏幕 readers，请务必对其进行测试并提供替代方案。
在极少数情况下您确实需要添加 SR-only 建议，请谨慎使用 "use the arrow keys" 之类的语言。如果他们使用手机或平板电脑，或者如果他们使用盲文键盘，甚至取决于他们的按键映射和屏幕 reader（例如 Mac 上的 VoiceOver，这不一定有意义，除非 QuickNav 打开，否则不会使用向下箭头移动到下一行。

Answer 2

WebAIM 有一个 guide on this and recommends using absolute positioning. Likewise there is another useful guide 值得一读的 TheA11yproject

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

.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);
}

然后您将为您想要的文本添加 class，嗯，仅针对屏幕 reader。例如

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

自然地，您可以调用 class hidden 或 visually-hidden 或其他对您来说最有意义的名称。

注意事项

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

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

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

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

屏幕 reader 用户有时可能会遇到的问题是页面语义的混乱和冗长（快速和整体浏览并不容易而不是使用视觉效果）。添加此类额外的通知只会导致此问题。

Answer 3

title="Switch through the elements using arrow keys" 也许吧？

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

Make specific elements readable by screen readers only

html

css

accessibility

screen-readers