让屏幕阅读器 (JAWS) 阅读的内容超过显示的按钮文本答案

【问题标题】：Have screen reader (JAWS) read more than displayed button text让屏幕阅读器 (JAWS) 阅读的内容超过显示的按钮文本
【发布时间】：2013-10-10 16:48:42
【问题描述】：

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

To avoid screen-reader text inside the button

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

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

按钮文本应该只是“获取帮助”，但我需要 JAWS 来表达更多……有什么可行的方法吗？

非常感谢，-皮特

（仅供版主参考：现有的“JAWS”标签指的是“Java API for WordNet Searching”……而不是屏幕阅读器“Job Access With Speech”。我们可能会使用一个新标签——我不知道。不认为我目前有“堆栈溢出信用”来做到这一点。谢谢！）

【问题讨论】：

标签： accessibility screen-readers

【解决方案1】：

按照W3C 简单地使用aria-haspopup="true" 怎么样？

基本上：

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

【讨论】：

【解决方案2】：

基本上你想包含文本但隐藏它。

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

我应该指出，其他残障人士也应该能够分辨出它在新窗口中打开。或许考虑添加一个“新窗口”图标？

【讨论】：

【解决方案3】：

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

【讨论】：

和在与图像相关联时被 JAWS 拾取，或者更接近我的情况，一个包含图像（而不是文本）的按钮。当我将与具有文本标签的按钮一起使用时，JAWS 只会用文字表达标签。 :(