在 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">
   
   

3. Hiding Input Elements for Custom Radio Buttons
   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.

Hiding Elements from All Users

To completely hide an element from both sighted users and screen readers, you can use display: none or visibility: hidden.


.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>

            
        

以上是在 CSS 中隐藏元素：可访问的方式的详细内容。更多信息请关注PHP中文网其他相关文章！