Question

我实际上想完成相反的事情：

To avoid screen-reader text inside the button

对于WCAG合规性，任何打开新浏览器窗口的HTML控件（即按钮）都需要屏幕阅读器在按钮获得焦点时这样说。但是，我当然不想要：

<button>Get Help ,opens in a new browser window</button>

按钮文字应该只是“获取帮助”，但是我需要JAWS来表达更多...为此有任何可行的方法吗？

非常感谢，-Pete

（仅供审核员使用：现有的“JAWS”标签指的是“用于WordNet搜索的Java API”...而不是屏幕阅读器“使用语音进行作业访问”。我们可能会在那里使用新标签 - 我不喜欢我认为我目前有“堆栈溢出信誉”来做到这一点。谢谢！）

Answer 1

基本上，您希望包含文本，但要将其隐藏在视图中。

<button>Get Help<span class="at">, opens in a new browser window</span></button>

“at”代表“访问技术”。

使用相关联的CSS：

.at {
   position:absolute;
   left: -9999px;
}

或者，如果您关注从右到左语言的水平滚动条或移动设备上的性能，那么您可以使用：

.at {
   position: absolute;
   clip: rect(1px,1px,1px,1px);
   padding: 0;
   border: 0;
   height: 1px;
   width: 1px;
   overflow: hidden;
   display: block;
}

阅读详情：http://webaim.org/techniques/css/invisiblecontent/

我应该指出，有其他残疾的人也应该能够告诉它在新窗口中打开。也许可以考虑添加一个“新窗口”图标？

Answer 2

我相信你需要使用ABBR标签做添加说明。你可以看到here

Answer 3

如何根据W3C简单地使用aria-haspopup="true"？

基本上：

<button aria-haspopup="true">Get help</button>

屏幕阅读器（JAWS）读取的内容超过显示的按钮文本

3 个答案: