typestar

Tres formas de ocultar algo en HTML

Oculto para el ojo, oculto para el lector, u oculto para ambos. Elige a propósito.

<p hidden>Not rendered, not announced.</p>

<span aria-hidden="true">&rarr;</span>
<a href="/next">Next step</a>

<button type="button">
  <span class="visually-hidden">Delete the July report</span>
  <svg width="16" height="16" aria-hidden="true">
    <use href="#icon-trash"/>
  </svg>
</button>

<p><span class="visually-hidden">Warning: </span>Disk almost full</p>

Cómo funciona

  1. hidden lo quita de la página para todo el mundo.
  2. aria-hidden="true" lo esconde de los lectores mientras sigue visible.
  3. Una clase visually-hidden lo conserva para lectores y lo saca de la pantalla.

El intento, en números

Líneas
13
Caracteres a escribir
358
Tokens
94
Ritmo de tres estrellas
75 tpm

Al ritmo de tres estrellas de 75 tokens por minuto, este intento toma unos 75 segundos.

Escribe este fragmento

Paso 2 de 4 en Foco y visibilidad; paso 10 de 15 en HTML accesible.

← Anterior Siguiente →