屏幕阅读器如何处理 ::before 和 ::after？

Question

我正在设计一个文档的样式，我正在使用特殊字符来视觉设计按钮样式，例如：

<button type="button">&gt; Do Something</button>

现在我知道我可以使用 aria-hidden 属性隐藏屏幕 reader 的大于号：

<button type="button"><span aria-hidden="true">&gt; </span>Do Something</button>

但是因为这不是真正的内容，而是样式，我正在考虑使用 ::before 元素在按钮前放置大于号，如下所示：

<button type="button">Do Something</button>

<style>
  button::before {
    content: ">";
  }
</style>

这将使使用 JavaScript 向文档添加按钮变得更加容易。它也是适用于所有按钮的规则，无需在每个按钮上再次设置它。

现在，屏幕 reader 如何处理这些 ::before 和 ::after 元素中的内容？

除了这个问题之外，加载样式的方式是否有所不同？例如。内联，使用 link 或样式标签？

（我读过有关 CSS speak property 的信息，但似乎还没有任何地方支持它...）

Answer 1

Now, how do screen readers handle the content in these ::before and ::after elements?

这取决于所使用的屏幕 reader、浏览器和 OS 组合。有时会渲染，有时不会。

据我所知，Jaws+IE 和 Jaws+firefox 不渲染它，NVDA+IE 也不渲染，但是 NVDA+firefox 可以渲染。

因此，您最好不要使用 ::before 和 ::after。至少，不要用它们来传达重要信息。 Aria-hidden 得到更广泛和统一的支持。

另外，如果我们仔细看的话，两者在法律上都是可以接受的：

除了一些值得注意的例外（例如显示：none），屏幕 reader 不应该为 CSS 操心，因为 CSS 给出了演示说明只要。按照这个逻辑，因为它只是展示，所以并不重要，所以我们忽略::before和::after。
在对面，::before和::after是要添加到元素中的文本内容。从技术上讲，我们可以创建一个 DOM 元素来显示该文本（可能某些浏览器就是这样做的）。因为它现在是一个 DOM 元素，所以没有理由不渲染它。

简而言之，这是有争议的。在同一种矛盾中，我们有 CSS 个计数器，并通过 CSS 引用。这两个是唯一的介绍吗？可能不完全是。 ::before 和 ::after 中的文本是否仅表示？在你的情况下是的，但你也可以添加一些根本不是演示文稿的文本。

In addition to that question, does it make a difference how the styles are loaded? E.g. inline, using a link or with a style tag?

据我测试，它没有任何改变。

(I've read about the CSS speak property, but it doesn't seem to be supported anywhere yet...)

CSS speak 可能永远不会被支持。这是一个 10 多年的项目，如今或多或少被放弃了，原因很充分。

声音、流派、重音、音调、如何根据标点符号进行停顿、声音提示等都是由屏幕 reader 用户配置的私人偏好。网站设计者不得以任何方式干涉这一点。确实不存在大多数用户可以接受的“标准语音”。网站不是有声读物。有声读物很酷，但它们的用途不同。

How do screenreaders handle ::before and ::after?