Elemente in CSS ausblenden: Der barrierefreie Weg

Elemente in Ihrer Benutzeroberfläche auszublenden ist üblich, aber wenn Sie dies auf eine zugängliche Weise tun, stellen Sie sicher, dass Sie nicht unbeabsichtigt einige Benutzer ausschließen. In diesem Artikel behandeln wir drei Szenarien:

1. Elemente vor Bildschirmleseprogrammen ausblenden.
2. Elemente werden nur für Bildschirmleseprogramme angezeigt.
3. Elemente für alle Benutzer ausblenden, einschließlich Screenreadern.

Jeder Abschnitt enthält Codebeispiele und praktische Anwendungsfälle

---

Ausblenden von Elementen vor Bildschirmleseprogrammen

Wenn Sie möchten, dass ein Element für sehende Benutzer sichtbar, aber vor Bildschirmleseprogrammen verborgen ist, können Sie das aria-hidden="true"-Attribut oder CSS verwenden.

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

Anwendungsfälle

1. Hintergrundbilder ausblenden
2. Dekorative Symbole oder visuelle Elemente, die keine aussagekräftigen Informationen vermitteln.

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

Elemente werden nur für Screenreader angezeigt

Um ein Element für Screenreader sichtbar, für sehende Benutzer jedoch unsichtbar zu machen, können Sie die Technik „visuell ausgeblendet“ verwenden. Tailwind CSS bietet zu diesem Zweck eine vorgefertigte Utility-Klasse, nur 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;
}

Anwendungsfälle

1. Zum Beschriften interaktiver Elemente wie Eingaben ohne visuelle Anzeige des Textes:
   

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

   Wenden Sie die Klasse an:
   

   <div>
   
   
   
   <h2>
     
     
     TL;DR
   </h2>
   
   <p>Hier ist eine Tabelle, die zusammenfasst, wie sich verschiedene CSS-Attribute auf die Sichtbarkeit für verschiedene Benutzertypen auswirken:</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>