如何隐藏屏幕阅读器中的文本
介绍
常见场景
网站通常会多次显示徽标以强化品牌。但每次让屏幕阅读器读出您的公司名称可能会令人厌烦。当屏幕阅读器用户阅读您的内容时，它还会减慢他们的速度。整个网站上的徽标和其他装饰性图像可能不会给听到您网站内容的人带来任何价值。这些情况非常适合向屏幕阅读器隐藏内容。
相反的情况是，您可能将内容隐藏起来，但又想确保屏幕阅读器仍能读取。您可能为无法通过视觉访问的用户提供特殊说明。为了解决这个问题，每个网站都应该有一个“跳转到主要内容”锚链接，让用户可以跳过收听您网页中不太重要的部分。
另一种情况是向所有人隐藏内容。您的网站可能要求用户在显示内容之前执行操作。展开和折叠按钮、阅读更多按钮或切换内容的面板既适合这种情况，也适合前一种情况，具体取决于要显示的文本量或文本的重要性。
隐藏屏幕阅读器的方法
要隐藏屏幕阅读器中的文本并以可视方式显示它，请使用aria-hidden属性并将其设置为 true。
<p aria-hidden="true">屏幕阅读器应忽略的可见文本</p>
要对屏幕阅读器隐藏文本并在视觉上隐藏它，请使用隐藏属性。
<p hidden>隐藏文本屏幕阅读器也应该忽略</p>
您还可以使用 CSS 设置display: none或visibility: hidden来从屏幕阅读器和视觉上隐藏元素。
要向屏幕阅读器显示元素并将其隐藏，您需要使用 CSS 模式使文本显示在屏幕外或不适合一个像素的可见区域。WebAim提供了两种解决方案。
需要警惕的陷阱
如果您在与aria-hidden="true"相同的元素中使用aria-scribeby，屏幕阅读器可能会读取它。
aria -hidden属性不适用于可聚焦元素，例如表单输入，链接和按钮。
如果在具有子元素的元素上使用aria-hidden ，则子元素也将被隐藏。
<div aria-hidden="true">
<p>This element will is hidden from screen readers.</p>
<div>
结论
投入时间和精力实现无障碍功能对每个人都有好处！无障碍功能有助于搜索引擎优化 (SEO)，即使不使用屏幕阅读器的用户也可以更轻松地访问内容。
要了解有关可访问性的更多信息，Pluralsight 提供了很棒的“入门”课程和有关Web 可访问性指南的课程。
您还可以阅读 W3C 有关如何使用 ARIA 的指南。
关于作者
Matt Ferderer 是一名软件开发人员，他在推特、帖子和博客上发布有关网络开发的内容。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~