DEV Community
·
在CSS中隐藏元素：可访问的方式
💡
原文英文，约600词，阅读约需3分钟。
📝
内容提要
在用户界面中隐藏元素时，需注意不影响某些用户的访问。文章讨论了三种情况：对屏幕阅读器隐藏元素、仅对屏幕阅读器显示元素、对所有用户隐藏元素，并提供了代码示例和实际应用场景，强调可访问性的重要性。
🎯
关键要点
- 在用户界面中隐藏元素时，需确保不影响某些用户的访问。
- 文章讨论了三种情况：对屏幕阅读器隐藏元素、仅对屏幕阅读器显示元素、对所有用户隐藏元素。
- 对屏幕阅读器隐藏元素时，可以使用aria-hidden="true"属性或CSS。
- 使用场景包括隐藏背景图像和装饰性图标。
- 仅对屏幕阅读器显示元素时，可以使用"visually hidden"技术，Tailwind CSS提供了sr-only类。
- sr-only类的CSS定义了元素的可见性，但仍然对屏幕阅读器可访问。
- 隐藏所有用户的元素时，可以使用display: none或visibility: hidden。
- 提供了一个表格总结了不同CSS属性对不同用户可见性的影响。
❓
延伸问答
如何在CSS中隐藏元素而不影响屏幕阅读器用户？
可以使用aria-hidden="true"属性或CSS来隐藏元素，使其对屏幕阅读器不可见。
什么是仅对屏幕阅读器可见的元素？
仅对屏幕阅读器可见的元素可以使用"visually hidden"技术，Tailwind CSS提供了sr-only类来实现。
如何完全隐藏一个元素，包括对所有用户？
可以使用display: none或visibility: hidden来完全隐藏元素，使其对所有用户不可见。
在什么情况下应该使用aria-hidden="true"？
当希望元素对视觉用户可见但对屏幕阅读器用户隐藏时，应使用aria-hidden="true"。
sr-only类的CSS定义是什么？
sr-only类的CSS定义包括position: absolute; width: 1px; height: 1px;等，使元素对屏幕阅读器可访问但对视觉用户不可见。
不同CSS属性对用户可见性的影响有哪些？
不同CSS属性如display: none、visibility: hidden等对用户可见性有不同影响，具体可参考文章中的总结表格。
➡️
