什么时候应该“隐藏”？元素可用于屏幕阅读器（用于辅助功能，a11y）？ [英] When should a "hidden" element be available to a screen reader (for accessibility, a11y)?

问题描述

我听说有人建议不要将 .hidden 类设为

I hear of advice of making the .hidden class not as a

.hidden { display: none }

，但将其宽度和高度设为1，并使用剪裁等，以使该元素看起来好像仍然存在于屏幕上，但内容却不可见。

but make it width and height of 1, and using clipping, etc, to make the element as if it still exist on screen but the content is just not visible.

但是当我们使用JavaScript进行操作时隐藏某些东西，该元素的目的已经完成，我们希望它不显示在屏幕上，也不让屏幕阅读器看到吗？

But isn't it true that when we use JavaScript to hide something, the purpose of that element is done, and we want it to not show on the screen and not visible to the screen reader either?

案例1：例如，如果它是一个输入框，则在该框的内部有一条灰线文字 Enter keyword。当用户实际单击或击键（或使用 input 事件）时，现在我们有了一个JavaScript处理程序来隐藏 Enter keyword文本，因为它只是输入框内的灰色提示。在这种情况下，是否不应该使用 display：none 完全隐藏文本，以至于屏幕阅读器也无法阅读？ （用户已经学到了足够的知识来开始键入，因此屏幕阅读器不应该真正看到提示，对吗？）

Case 1: For example, if it is an input box, and inside the box there is a grey line of text "Enter keyword". When the user actually clicks on, or keydown, (or using the input event), now we have a JavaScript handler to hide the "Enter keyword" text, because it is just a grey prompt inside the input box. In this case, shouldn't the text be completely hidden, using in fact a display: none, so that even screen reader can't read it? (the user have learned enough to start typing, so the prompt shouldn't really still be there to be read by screen reader, right?)

案例2：如果是一个弹出气泡，用于显示错误消息，或者有一个链接输入您的电子邮件以供我们订阅，它将弹出一个气泡，然后当该气泡关闭时，不应该使用显示：无？屏幕阅读器实际上应该仍然无法读取已完成并关闭的气泡中的内容。

Case 2: If it is a pop up bubble, for error message, or there is a link "enter your email for our subscription", and it will pop up a bubble, then when the bubble is closed, shouldn't the bubble be really closed totally using display: none? The screen reader shouldn't really still be able to read those content out for a bubble that is done and closed.

情况3：我能想到的唯一情况是屏幕阅读器应该可以使用的隐藏部分很小：它是气泡，用于显示其他信息，例如产品等级（5星中有多少颗星），或在出现时会弹出的其他帮助信息鼠标悬停在一些？上图标或链接。但是即使在这种情况下，屏幕阅读器也不会实际读出 alt 或<$ c中的指向更多信息的链接或显示评级的链接 $ c>标题的标签，直到用户将其弹出后才读取弹出信息？

Case 3: The only case I can think of is a small fraction that the "hidden" should be available to a screen reader is: it is for a bubble for extra information, such as for the product rating (how many stars out of 5), or extra help info that can pop up when the mouse hover over some "?" icon or link. But even in this case, won't screen readers actually read out "link to more info" or "link to show rating", that is in the alt or title of the tag, and not read the pop up info until the user pops it open?

所以我的问题是：确实没有两种隐藏类型。一种是 display：无类型，屏幕阅读器不应该看到（使其成为 .hidden 类），然后另一个是 width：1px;高度;屏幕阅读器可以看到（或将读出）的1px （将其设为 .a11y-hidden 类），以及类型2是否为

So my question is: shouldn't there be really two types of hidden. One is display: none type that screen reader shouldn't see (make it the .hidden class), and the other is width: 1px; height; 1px that the screen reader can see (or will read out) (make this the .a11y-hidden class), and whether type 2 might be far less often than type 1?

推荐答案

大多数情况就是这样。

EDIT 2014：我切换到剪切方法

我更喜欢 position：relative;从Yahoo!的TJK （因为隐藏的跨度到只显示一个< con的链接）中。左：-5000px 裁剪1x1px，我知道Yahoo!团队仅使用后者，但目标是相同的。

另外，我将其称为 .visually-hidden （来自WordPress中的Twenty Sth主题，其他CMS和框架）。 .a11y-hidden 表示相反的含义：它仅在屏幕阅读器和纯HTML中可见（可感知）。

EDIT 2014: I switched to the clipping method from TJK at Yahoo! (because of hidden span into a link where only an <i>con is visible).
I prefer position: relative; left: -5000px over clipping 1x1px, I know that Yahoo! team only use the latter but the aim is the same.
Also I'll call it .visually-hidden (from Twenty Sth theme in WordPress and other CMS and frameworks). .a11y-hidden would mean the contrary: it's only visible (perceivable) by screen readers and in plain HTML.

标签内容，尚未出现的错误消息（您的情况2）不应被任何人察觉。屏幕阅读器用户将必须单击一个选项卡以将其内容显示为其他所有人。

注意：显示：无和可见性：隐藏元素将被屏幕阅读器忽略。并且其中一些（尤其是OS X上的VoiceOver）将忽略高度为 0的元素：0 ，等等

Tabs content, error messages that didn't occur yet (your Case 2) shouldn't be perceived by anybody. A screen reader user will have to click on a tab to show its content as everybody else.
Note: display: none AND visibility: hidden elements will be ignored by screen readers. And also some of them (VoiceOver on OS X in particular) will ignore an element with height: 0, etc

相关文章： 仅适用于WebAIM屏幕阅读器用户的不可见内容

Relevant article : Invisible Content Just for Screen Reader Users from WebAIM

案例1：读出的重要部分是与 for / 相关的标签id 到表单字段。

如果您使用键盘在字段之间导航，则当您将焦点放在该文本上时该文本将消失，并且不会对于以x00％缩放的用户可见。 HTML5引入了与该提示具有相同作用的 placeholder 属性（这不是标签的替代，这是一个提示，但很少有人读过HTML5文档5之一）

Case 1: the important part being read out is the label associated with for/id to the form field.
If you use a keyboard to navigate from field to field, this text will have disappeared when you'll have focused it and it won't be visible to users that zoom at x00%. HTML5 introduced the placeholder attribute that has the same role as this prompt (this is NOT a replacement for label, this is a hint but few people read one of the HTML5 doc alas) and can still be passed to screen readers even if it's visually hidden.

案例3：此信息应以可访问的方式用HTML编码，因此您不需要可视化地将信息隐藏在视口之外或像素中。

替代文本是首选的方式（或者更好的是在视觉上带有一些真实文本，同时又避免了太多混乱。我没有人机工程学方面的培训，这通常会使想要从页面中删除所有内容的Web设计人员感到讨厌；））。）

title 属性仅应用于链接和您永远不会确定屏幕阅读器会选择阅读它们。这是个人问题，需要根据每个站点进行设置。他们可能会被某些网站所烦恼，以至于到处都会禁用这些标题。尽管如此，如果由于某些原因您不能这么做，它仍然是添加信息的最佳方法之一。

Case 3: this information should be coded in HTML in an accessible manner and so you wouldn't need to visually hide information out of the viewport or in a pixel.
alt text is the preferred manner (or even better a visual with some real text by its side, while avoiding too much clutter. I've no training in ergonomics and this will often annoy webdesigners that want to remove everything from a page ;) ).
title attribute should only be used on links and you're never certain a screen reader will choose to read them. It's a personal matter and setting on a per site basis. They can be so annoyed by some sites that they'll disable these titles everywhere... Though, it's still one of the best techniques to add information if for some reason you can't do it otherwise.

如何使用此 .visual-hidden 类？

• 快速访问链接（指向内容，导航和搜索输入），如果它们未出现在模型中。重点关注后，它们会以 http://www.nanomatrix.fr/ 中的屏幕显示（按Ctrl-L或Cmd-L，在Windows上制表六次，并允许通过Safari和/或OS X中的链接进行制表。请参阅左上角的3个链接）


• 由于某些（不良）原因，它们不在我收到的模型中。最好有一个修复程序（这是一个很好的解决方案），而不是在事先没有想到的情况下不采取任何措施来提高可访问性……


• 关于表格标题的信息，因为大多数时候都显示它们是从客户端，外部网页设计人员等处获得的否定信息。


• 在跨度中，在以性能方式进行编码但不太便于访问时，在字体图标旁边显示信息。使用字体图标的方法有很多，我只说一些用例

• quick access links (to content, navigation and search input) when they don't appear in the mockup. When focused, they'll be brought to screen as in http://www.nanomatrix.fr/ (press Ctrl-L or Cmd-L, tab half a dozen times on Windows and enable tabbing through links in Safari and/or OS X. See on upper left the 3 links)
• on labels when for some (bad) reason, they're not in the mockup I receive. Better have a fix (it's a good one) than doing nothing to improve accessibility when it wasn't thought of beforehand...
• on captions of tables, because most of the times showing them is a no from client, external webdesigner, etc
• on a span with information next to a font icon when it's coded in a performance manner but not very accessible. There are many ways of using a font icon, I'm only speaking of a few use cases

这篇关于什么时候应该“隐藏”？元素可用于屏幕阅读器（用于辅助功能，a11y）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！