阻止屏幕阅读器读取 HTML 页面中的某些文本

Question

我正在使用某些文本来代替图标或图像，我不想使用JAWS等屏幕阅读器向用户读出这些图标或图像。我该如何防止这种情况？我试过aria-hidden但它仍然读出内容。有没有有效的方法可以防止屏幕上的某些文本读出？

Answer 1

有多种方法可以做到这一点。如果它只是一个图像，则以下任何一种情况都会导致图像消失在屏幕阅读器用户中：

<img src="whatever.ext" alt=""/>
<img src="whatever.ext" role="presentation" />

当然，你也可以加倍使用它，以充分说明你的意思

<img src="whatever.ext" role="presentation" alt="" />

这些也应该适用于严格符合 ARIA 标准的较新浏览器，但我尚未在所有浏览器中测试它们

<img src="whatever.ext" aria-label="" />
<img src="whatever.ext" aria-hidden="true" />
<img src="whatever.ext" title="" />