使元素对屏幕阅读器/键盘焦点不可见 - 但对鼠标单击可见
我知道如何使不可见元素键盘可聚焦并由屏幕阅读器阅读，但是为了学生主导的调查的目的 - 我希望某些元素对屏幕阅读器不可见/键盘焦点不那么分散注意力，但让它们可见供教师使用鼠标使用。
我尝试过使用 iframe，但是键盘仍然可以“tab”进入它们。我正在考虑一个可以控制父窗口的弹出窗口？ - 但可能会遇到一些拦截器等问题。
非常感谢！麦克风
I'm aware of how to make invisible elements keyboard focusable and read by screenreaders, however for the purpose of a student-led survey - I would like certain elements to be invisible to screenreaders / keyboard focus to be less distracting, but have them visible for tutors to use using a mouse.
I've tried using iframes, however the keyboard can still 'tab' into them. I was considering a pop-up window that can control the parent window? - but might have some issues with blockers etc.
Many thanks! Mike
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
让屏幕阅读器忽略内容的最简单方法之一是将其放入图像中，然后在 HTML 中将图像上的替代文本设置为“”。这将导致屏幕阅读器跳过此内容，因为它无法解释它。这也将消除任何选项卡或键盘焦点，因为网络浏览器会将其视为页面中的任何其他图像。
另一种更复杂的方法是检测您的页面是否被拉入屏幕阅读浏览器，并将您不希望读者阅读的内容的 CSS 属性设置为具有以下内容：
Screen读者将忽略任何不可见和/或未显示的内容，因此不会将其读给用户。这也更干净一些，因为您不会破坏页面的 SEO 排名，而只是修改显示给不需要看到/听到的用户的内容。
One of the simplest ways to get content ignored by a screen reader is to place it into an image and then set the alt text on the image to be "" in your HTML. This will cause the screen reader to skip this content since it can't interpret it. This will also eliminate any tabbing or keyboard focus since the web browser will treat it like any other image in your page.
Another way to do this, and a bit more complicated, is to detect if your page is being pulled into a screen reading browser and set the CSS properties of the content you don't want read by the reader to be have the following:
Screen readers will ignore anything that is invisible and/or not displaying, thus it will not be read to the user. This is also a bit cleaner since you're not destroying the SEO ranking of the page but are just modifying the content displayed to users who don't need to see/hear it.
防止屏幕阅读器查看元素的一个好方法是应用 aria-hidden="true" 属性；浏览器对此相当支持，并且会提示 JAWS 和其他屏幕阅读器跳过内容。您还可以使用 role="presentation" - 这里有一篇关于此的好文章：http://john. foliot.ca/aria-hidden/
应用 tabindex=-1 只会允许脚本聚焦该元素，而不允许键盘输入，因此这也可以。此外，虽然我不推荐它，但我在为别人的脚本而烦恼时发现，如果您没有为链接元素定义“href”属性（使其无效），这也会阻止焦点。
a good way to prevent screen readers from viewing an element is to apply the aria-hidden="true" attribute; this is fairly well supported by browsers, and will prompt JAWS and other screen readers to skip the content. You can also use role="presentation" - there's a good article on this here: http://john.foliot.ca/aria-hidden/
Applying tabindex=-1 will only only allow the element to be focused on by scripts and not keyboard input, so this will work too. Additionally, although I don't recommend it, I found while tearing my hair out over someone else's script, that if you don't have an 'href' attribute defined for a link element, (making it invalid) this also prevents focus.