css – 如何仅从屏幕阅读器隐藏任何元素,而不是从普通用户的页面隐藏?

前端之家收集整理的这篇文章主要介绍了css – 如何仅从屏幕阅读器隐藏任何元素,而不是从普通用户的页面隐藏?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何仅从屏幕阅读器隐藏任何元素,而不是普通用户页面

我知道这些片段,但我想隐藏屏幕重做的东西,但不是从视觉上的页面隐藏. Sscreen阅读器应该跳过隐藏的部分.

  1. /* Hide for both screenreaders and browsers
  2. css-discuss.incutio.com/wiki/Screenreader_Visibility */
  3. .hidden { display: none; visibility: hidden; }
  4.  
  5. /* Hide only visually,but have it available for screenreaders
  6. www.webaim.org/techniques/css/invisiblecontent/ ; & j.mp/visuallyhidden ; */
  7. .visuallyhidden { position: absolute !important;
  8. clip: rect(1px 1px 1px 1px); /* IE6,IE7 */
  9. clip: rect(1px,1px,1px); }
  10.  
  11. /* Hide visually and from screenreaders,but maintain layout */
  12. .invisible { visibility: hidden; }

解决方法

在元素上使用:
  1. aria-hidden="true"

这会将该元素显示为视力正常的用户,但不会被屏幕阅读器朗读.

猜你在找的CSS相关文章