focus - 使元素对屏幕阅读器/键盘焦点不可见 - 但对鼠标单击可见

Question

我知道如何使不可见的元素键盘聚焦并由屏幕阅读器阅读，但是出于学生主导的调查的目的 - 我希望某些元素对屏幕阅读器/键盘焦点不可见，从而减少分心，但让它们可见供导师使用鼠标使用。

我尝试过使用 iframe，但是键盘仍然可以“制表”进入它们。我在考虑一个可以控制父窗口的弹出窗口？- 但可能有一些与拦截器等有关的问题。

非常感谢！麦克风

Answer 1

让屏幕阅读器忽略内容的最简单方法之一是将其放入图像中，然后将图像上的替代文本设置为 HTML 中的“”。这将导致屏幕阅读器跳过此内容，因为它无法解释它。这也将消除任何选项卡或键盘焦点，因为网络浏览器会将其视为页面中的任何其他图像。

另一种更复杂的方法是检测您的页面是否被拉入屏幕阅读浏览器，并将您不希望阅读器阅读的内容的 CSS 属性设置为以下内容：

 visibility: hidden; display:none;

屏幕阅读器将忽略任何不可见和/或不显示的内容，因此不会向用户阅读。这也更干净一些，因为您没有破坏页面的 SEO 排名，而只是修改显示给不需要查看/听到它的用户的内容。

Answer 2

防止屏幕阅读器查看元素的一个好方法是应用 aria-hidden="true" 属性；这在浏览器中得到了很好的支持，并且会提示 JAWS 和其他屏幕阅读器跳过内容。您也可以使用 role="presentation" - 这里有一篇很好的文章：http: //john.foliot.ca/aria-hidden/

应用 tabindex=-1 只会让元素被脚本而不是键盘输入关注，所以这也可以。此外，虽然我不推荐它，但我发现，当我在别人的脚本上撕下头发时，如果您没有为链接元素定义“href”属性（使其无效），这也会阻止焦点。