Menyembunyikan Elemen dalam CSS: Cara Boleh Dicapai

Menyembunyikan elemen dalam UI anda adalah perkara biasa, tetapi berbuat demikian dengan cara yang boleh diakses memastikan anda tidak mengecualikan sesetengah pengguna secara tidak sengaja. Dalam artikel ini, kami akan membincangkan tiga senario:

1. Menyembunyikan elemen daripada pembaca skrin.
2. Menunjukkan elemen kepada pembaca skrin sahaja.
3. Menyembunyikan elemen daripada semua pengguna, termasuk pembaca skrin.

Setiap bahagian termasuk contoh kod dan kes penggunaan praktikal

---

Menyembunyikan elemen daripada pembaca skrin

Jika anda mahu elemen kelihatan kepada pengguna yang dapat dilihat tetapi tersembunyi daripada pembaca skrin, anda boleh menggunakan atribut aria-hidden="true" atau CSS.

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

Kes guna

1. Menyembunyikan imej latar belakang
2. Ikon hiasan atau elemen visual yang tidak menyampaikan maklumat yang bermakna.

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

Menunjukkan elemen kepada pembaca skrin sahaja

Untuk menjadikan elemen kelihatan kepada pembaca skrin tetapi tidak kelihatan kepada pengguna yang dapat melihat, anda boleh menggunakan teknik "tersembunyi secara visual". Tailwind CSS menyediakan kelas utiliti prabina, sr sahaja, untuk tujuan ini.

<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;
}

Kes guna

1. Untuk melabelkan elemen interaktif seperti input tanpa memaparkan teks secara visual:
   

   <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; */
   }
   

   Gunakan kelas:
   

   <div>
   
   
   
   <h2>
     
     
     TL;DR
   </h2>
   
   <p>Berikut ialah jadual yang meringkaskan cara pelbagai atribut CSS mempengaruhi keterlihatan untuk jenis pengguna yang berbeza:</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>