🗣 Screen Reader Only (SRO) é uma técnica utilizada para criação de contextos adicionais via textos que somente leitores de telas irão interpretar.

👉 De acordo com a WebAIM , só precisamos criar a seguinte declaração CSS para posterior reutilização:

.sr-only {
  position: absolute;
  left: -10000px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

🤯 E pra exemplificar, imagine links de Login visualmente fáceis de escolher entre Google, Facebook ou Twitter, porém textualmente não utilizam impossíveis, pois não possuem palavras que os dê significado.

Lista de Links de Login

😌 E é ai que entra o SRO pra diferenciá-los, pelo menos em leitores de telas. Bastaria fazer algo parecido com o código abaixo:

<ul>
  <li>
    <a href="...">
      <i class="google" aria-hidden="true" />
      <span class="sr-only">Login com Google</span>
    </a>
  </li>
  <li>
    <a href="...">
      <i class="facebook" aria-hidden="true" />
      <span class="sr-only">Login com Facebook</span>
    </a>
  </li>
  <li>
    <a href="...">
      <i class="twitter" aria-hidden="true" />
      <span class="sr-only">Login com Twitter</span>
    </a>
  </li>
</ul>

👍 Viu? Prático, simples e bastante útil.

LoFM.