在 CSS 中隐藏元素：可访问的方式

在 UI 中隐藏元素很常见，但以可访问的方式这样做可以确保您不会无意中排除某些用户。在本文中，我们将介绍三种场景：

1. 对屏幕阅读器隐藏元素。
2. 仅向屏幕阅读器显示元素。
3. 对所有用户隐藏元素，包括屏幕阅读器。

每个部分都包含代码示例和实际用例

---

对屏幕阅读器隐藏元素

如果您希望某个元素对视力正常的用户可见，但对屏幕阅读器隐藏，则可以使用 aria-hidden="true" 属性或 CSS。

<div aria-hidden="true">This content is hidden from screen readers.</div>

使用案例

1. 隐藏背景图片
2. 不传达有意义信息的装饰图标或视觉元素。

<button>
  <span aria-hidden="true">+</span>
  Add Item
</button>

仅向屏幕阅读器显示元素

要使某个元素对屏幕阅读器可见，但对视力正常的用户不可见，您可以使用“视觉隐藏”技术。 Tailwind CSS 为此目的提供了一个预构建的实用程序类，仅限 sr。

<div>



<p>Writing the sr-only class in CSS would look like this<br>
</p>

<pre class="brush:php;toolbar:false">.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

使用案例

1. 用于标记交互元素（例如输入），而不直观地显示文本：
   

   <label for="username" class="sr-only">Username</label>
   <input type="text">
   
   

2. Providing additional information for screen reader users using aria-describedby
   

   <div class="sr-only">
   
   
   <li><p><strong>Hiding Input Elements for Custom Radio Buttons</strong><br>
   When creating custom radio buttons (or checkboxes), you often hide the native input element and replace it with a visually styled element. To do this accessibly, the hidden input must remain visible to screen readers.</p></li>
   
   
   <h2>
     
     
     Hiding Elements from All Users
   </h2>
   
   <p>To completely hide an element from both sighted users and screen readers, you can use display: none or visibility: hidden.<br>
   </p>
   
   <pre class="brush:php;toolbar:false">.hidden {
     display: none;
     /* or visibility: hidden; */
   }
   

   申请课程：
   

   <div>
   
   
   
   <h2>
     
     
     长话短说
   </h2>
   
   <p>下表总结了各种 CSS 属性如何影响不同类型用户的可见性：</p>
   <div><table>
   <thead>
   <tr>
   <th><strong>CSS Attribute</strong></th>
   <th><strong>Hides for All Users</strong></th>
   <th><strong>Hides for Sighted Users</strong></th>
   <th><strong>Hides for Screen Readers</strong></th>
   <th><strong>Notes</strong></th>
   </tr>
   </thead>
   <tbody>
   <tr>
   <td>display: none</td>
   <td>✅</td>
   <td>✅</td>
   <td>✅</td>
   <td>Completely removes the element from the visual and accessibility tree.</td>
   </tr>
   <tr>
   <td>visibility: hidden</td>
   <td>✅</td>
   <td>✅</td>
   <td>✅</td>
   <td>Hides the element visually but keeps it in the layout and accessibility tree.</td>
   </tr>
   <tr>
   <td>opacity: 0</td>
   <td>❌</td>
   <td>✅</td>
   <td>❌</td>
   <td>Makes the element fully transparent but still visible to screen readers and interactive.</td>
   </tr>
   <tr>
   <td>clip: rect(0, 0, 0, 0)</td>
   <td>✅</td>
   <td>✅</td>
   <td>❌</td>
   <td>Commonly used in the "visually hidden" technique; removes visual rendering but accessible.</td>
   </tr>
   <tr>
   <td>position: absolute; width: 1px; height: 1px;</td>
   <td>✅</td>
   <td>✅</td>
   <td>❌</td>
   <td>Used with the "visually hidden" technique; keeps elements accessible to screen readers.</td>
   </tr>
   <tr>
   <td>aria-hidden="true"</td>
   <td>❌</td>
   <td>❌</td>
   <td>✅</td>
   <td>Removes the element from the accessibility tree but leaves it visually present.</td>
   </tr>
   <tr>
   <td>overflow: hidden</td>
   <td>❌</td>
   <td>✅ (if out of bounds)</td>
   <td>❌</td>
   <td>Hides content visually if it overflows the container but does not affect screen readers.</td>
   </tr>
   <tr>
   <td>height: 0; width: 0;</td>
   <td>✅</td>
   <td>✅</td>
   <td>❌</td>
   <td>Hides content visually while keeping it accessible to screen readers.</td>
   </tr>
   <tr>
   <td>z-index: -1</td>
   <td>❌</td>
   <td>✅</td>
   <td>❌</td>
   <td>Moves the element behind others, making it invisible to sighted users but screen reader-accessible.</td>
   </tr>
   <tr>
   <td>opacity: 0; pointer-events: none;</td>
   <td>✅</td>
   <td>✅</td>
   <td>❌</td>
   <td>Makes an element fully transparent and non-interactive, but accessible to screen readers.</td>
   </tr>
   </tbody>
   </table></div>
   
   
             </div>