CSS で要素を非表示にする: アクセシブルな方法

UI 内の要素を非表示にするのは一般的ですが、アクセスしやすい方法で非表示にすることで、一部のユーザーを意図せずに除外することがなくなります。この記事では、次の 3 つのシナリオについて説明します。

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>
     
     
     TL;DR
   </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>