在我的 Web 应用程序中，我为自己制作了一种仅由图标组成的字体。我使用这些图标来补充应用程序中的标题和副标题，使其更具视觉吸引力。
但是，像 JAWS 这样的屏幕阅读器会读出这些信息，这会给屏幕阅读器的用户带来不愉快的体验。
例如字符c显示云的图像。我以这种方式使用它来补充诸如 <h1> 之类的标题。 :<span class="my-font">c</span>
现在我希望屏幕阅读器完全忽略这一点，因为这只是补充现有标题，而不是为页面上的内容添加任何新含义。通过我的研究，我发现了两种可能性:aria-hidden="true"或 role="presentation"
我只是不确定其中哪一个(或者两个)适合我想要实现的目标。任何输入表示赞赏!
最佳答案
如果它只是一个装饰图标，最好使用 CSS 而不是 HTML，例如使用伪元素:::after(content:…; font:…;) .不幸的是，一些屏幕阅读器也可能会阅读这些内容，当然我们不能在 CSS 中应用 WAI-ARIA。因此，根据您的情况，您可能会“被迫”使用带有 aria-hidden="true" 的标记。反而。
如果可能，您还应该使用相应的 Unicode 符号(例如 ☁ ，即“U+2601 CLOUD”)而不是不相关的字符(例如 c )。
如果没有对应的字符，你应该使用Unicode的Private Use Areas ，这是未定义的代码点，因此您可以定义自己的字符/符号。
您可能对这些帖子感兴趣:
关于font-face - 从屏幕阅读器中隐藏图标的适当方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15753418/