在 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中文網其他相關文章！