Question

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

Answer 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中的向下箭头键事件？对于屏幕阅读器来说，这并不总是能很好地工作，请确保对其进行测试并提供替代方法。
在极少数需要添加仅SR建议的情况下，请警惕使用“使用箭头键”之类的语言。如果他们是在手机或平板电脑上，或者使用盲文键盘，或者甚至取决于他们的按键映射和屏幕阅读器，那么这不一定有意义（例如，在Mac上，VoiceOver不会移动到下一行）向下箭头，除非QuickNav处于打开状态）。

Answer 2

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

我鼓励您全面阅读它，但是为了方便起见，这里是第二个示例的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><span class="screen-reader-only">.... </span>...</li>示例。

dd/mm/yyyy

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

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

Answer 3

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

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

3 个答案: