我正在研究UI可访问性，并希望在元素中添加特定文本，然后将通过屏幕读取器软件读取该文本。例如，对于每个<li>项目，我都想添加一条消息"使用箭头键通过元素进行切换"。有没有办法添加这样的消息？不幸的是，覆盖aria-label不是一个选项。
您最好的选择可能是使用CSS中的视觉隐藏类，这是" 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中的down箭头键事件？这并不总是与屏幕读取器合作，请确保对其进行测试并提供替代方案。
- 在极少数情况下，您确实需要添加仅SR建议的建议，请警惕使用"使用箭头键"之类的语言。如果它们在手机或平板电脑上，或者使用盲文键盘，甚至取决于其键映射和屏幕读取器(例如，Mac上的VoiceOver不会移动下一行(，那么这不一定是有意义的向下箭头，除非QuickNav打开(。
Webaim对此有指南，并建议使用绝对定位。同样，还有另一个有用的指南值得阅读。
我鼓励您全面阅读有关它的信息，但是为了方便和参考，是第二个示例中的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);
}
然后，您将仅为屏幕读取器添加课堂。例如
<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>
但是，我强烈质疑这是否真的是必要的。大概是屏幕阅读器软件的用户已经熟悉如何使用它，并且具有自己的导航方式。
什么可以有时是屏幕读取器用户的问题，是页面的语义的混乱和冗长(与使用视觉效果相比，快速和整体浏览并不那么容易浏览(。添加这样的额外通知可能会简单地促成此问题。
title="Switch through the elements using arrow keys"可能？