Masquer des éléments en CSS : la méthode accessible

Masquer des éléments dans votre interface utilisateur est courant, mais le faire de manière accessible garantit que vous n'exclurez pas involontairement certains utilisateurs. Dans cet article, nous aborderons trois scénarios :

1. Masquer des éléments des lecteurs d'écran.
2. Affichage des éléments uniquement aux lecteurs d'écran.
3. Masquer des éléments à tous les utilisateurs, y compris les lecteurs d'écran.

Chaque section comprend des exemples de code et des cas d'utilisation pratiques

---

Masquer des éléments des lecteurs d'écran

Si vous souhaitez qu'un élément soit visible aux utilisateurs voyants mais masqué aux lecteurs d'écran, vous pouvez utiliser l'attribut aria-hidden="true" ou CSS.

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

Cas d'utilisation

1. Masquer les images d'arrière-plan
2. Icônes décoratives ou éléments visuels qui ne transmettent pas d’informations significatives.

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

Afficher les éléments uniquement aux lecteurs d'écran

Pour rendre un élément visible aux lecteurs d'écran mais invisible aux utilisateurs voyants, vous pouvez utiliser la technique du "visuellement caché". Tailwind CSS fournit une classe utilitaire prédéfinie, sr uniquement, à cet effet.

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

Cas d'utilisation

1. Pour étiqueter des éléments interactifs comme les entrées sans afficher visuellement le texte :
   

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

   Appliquer le cours :
   

   <div>
   
   
   
   <h2>
     
     
     TL;DR
   </h2>
   
   <p>Voici un tableau résumant la manière dont les différents attributs CSS affectent la visibilité pour différents types d'utilisateurs :</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>