在字体上使用描边和填充来创建图层时，如何隐藏屏幕阅读器和搜索引擎机器人的重复文本？

Question

我正在尝试构建一个 h1，其排版分为两种字体：描边字体和填充字体：

重叠两个图层我可以控制填充和描边颜色：

问题是，在 HTML 标记中，我需要复制内容。像这样：

<h1>
    <span style="font-family:fill;">Lorem Ipsum</span>
    <span style="font-family:stroke;">Lorem Ipsum</span>
</h1>

我要求在 DOM 中隐藏其中一个用于机器人和盲人设备的方法。可能吗？

Answer 1

aria-hidden 似乎是您所需要的。

In supporting browsers in conjunction with supporting assistive technology the content is not conveyed to the user via the assistive technology.

所以这应该有效。

<h1>
    <span style="font-family:fill;">Lorem Ipsum</span>
    <span style="font-family:stroke;" aria-hidden="true">Lorem Ipsum</span>
</h1>

另见

When using a stroke and fill on a font to create layers, how do I hide the duplicate text from screen readers and search engine bots?