JSFiddle - React, Tailwind, and code Playground

by Annemarie Köhler

HTML

<button>
  <!-- screenreader ignoriert die folgende Zeile -->
  <span aria-hidden="true">x</span>
  
  <!-- screenreader liest die folgende Zeile vor, obwohl display:none -->
  <span aria-hidden="false" class="display-none">two</span>
  
  <!-- screenreader ignoriert die folgende Zeile, 
  weil default aria-hidden="undefined" -->
  <span class="display-none">three</span>
</button>

SCSS

.display-none {
  display: none;
}