现在，CSS中的speak:none属性是否等同于aria-hidden="true"属性？

Question

我在想，是否可以期望2015年1月左右的浏览器和辅助技术使用 speak:none 的方式等效于设置 aria-hidden="true"。我想表明一些半透明文本应该被忽略，想知道我是否可以通过一个操作完成（只需添加一个设置不透明样式和 speak:none 的类，而不是添加类并设置 aria-hidden 属性）。

- Mike Godin

---

我不确定我是否理解情境；这里的文本是被某个模式 UI（例如 lightbox）遮挡了吗；还是仅仅是通过将不透明度设置为完全透明而不是（由于某种原因）使用 display:none 或 visibility:hidden 来隐藏内容的文本，这通常是隐藏内容的常用方式？ - BrendanMcK

@BrendanMcK，这里的情况是文本以使其在视觉上不相关的方式变灰。我希望它对辅助设备也是不相关的。 - Mike Godin

如果它真的是“视觉上无关紧要”的话，那么aria-hidden听起来像是一个很好的匹配。也许没有看到UI很难确定；作为反例，禁用的按钮通常会变灰，但仍然可见并且对屏幕阅读器可用，因为它们仍然是相关的，只是在特定时间点不可操作（例如，因为表单中还没有填写所有字段）。 - BrendanMcK

Answer 1

目前似乎没有可靠的支持speak的数据，但它似乎还未实现。

无论实现状态如何，speak：none与aria-hidden =“true”并不相等。

根据CSS Speech Module CR，speak属性“确定是否将文本呈现为声音”，即可听到。

根据ARIA规范，aria-hidden“表示作者根据其实现方式使元素及其所有后代对任何用户都不可见或可感知”（原文中的斜体）。

因此，aria-hidden=“true”并不会导致任何事情，它只是声明了作者已隐藏了元素。它涉及所有类型的渲染：声音、可见、触觉或可能在未来发明的所有模式。

- Jukka K. Korpela

---

感谢您指出这两种方法之间的意义差异，并引用了ARIA规范中的语录。现在我不得不思考，aria-hidden =“true”是否适用于通过不透明度使文本在语义上变得无关紧要但仍然有些可见的情况。理想情况下，文本应该完全隐藏，但在这种情况下，我只能控制实现而不能控制设计。 - Mike Godin

@MikeGodin，如果它在语义上无关紧要（即毫无意义），我认为应该将它设置为role=presentation。 - Jukka K. Korpela

@JukkaK.Korpela - role=presentation并不意味着文本内容是无关/无意义的；它只意味着应该忽略标签本身的语义：例如，<button role="presentation">OK</button>将被视为纯文本“OK”或<span>OK</span>，而不是一个按钮。 - BrendanMcK

@BrendanMcK，我承认我的错误。恐怕我无法说出针对纯粹装饰性文本内容在非视觉呈现中被忽略时应该采取的措施。也许最好的方法是根据媒体类型设置display: none，以便在任何非视觉媒体上都能实现。 - Jukka K. Korpela

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - BrendanMcK

请注意，aria-hidden="true"并不能阻止键盘聚焦于元素，因此仅仅在某物上贴上aria-hidden="true"并不能使其满足无障碍要求。当您将菜单或某些内容设置为不透明时，您还需要将隐藏元素内的所有交互元素设置为tabindex="-1"。 - Daniel Tonon

Answer 2

使用此组合：

• speak: never;
• speak-as: spell-out;

speak的值

• 自动：只要元素不是display:block，并且visibility:visible，文本就会被朗读。
• never：文本不会被朗读
• always：无论display值或祖先值如何，文本都将被朗读。

speak-as的值 与speak相关，涉及到文本的朗读方式：

• normal：采用浏览器默认的朗读设置。
• spell-out：指示浏览器拼写属性内容而不是朗读完整单词。
• digits：逐个读取数字，例如69将被读作“six nine”。很好。
• literal-punctuation：拼写标点符号（如分号）而不是像暂停一样处理它们。
• no-punctuation：完全跳过标点符号。

- Yurii P.

Answer 3

为了回答我最初的问题意图——我想知道是否可以添加一个设置不透明样式并禁用屏幕阅读器文本的类，而不是添加类并且设置aria-hidden属性。

我最终做的是只设置aria-hidden属性，然后在我的CSS中使用[aria-hidden]而不是类名来设置不透明样式。

p[aria-hidden="true"] {
  opacity: 0.3;
  pointer-events: none;
  user-select: none;
  cursor: default;
}

<p aria-hidden="true">Ignore this text!</p>
<p>See this text!</p>

- Mike Godin