G96Proporcionar una identificación textual de los elementos que, de otro modo, solo se entenderían por información sensorial

Aplicabilidad

Todas las tecnologías que presentan al usuario una descripción de cómo se muestra un contenido.

Descripción

El objetivo de esta técnica es garantizar que, cuando el contenido hace referencia a elementos de una página web, no lo haga únicamente por su forma, tamaño, sonido o ubicación, sino también de formas que no dependan de esa percepción sensorial. Por ejemplo, una referencia puede describir además la función del elemento o su etiqueta.

Ejemplos

<form class="wrapper">
  <h1>Sign up to our mailing list</h1>
    <div role="note">
      Complete the form and then press the lower-right (<i>sign up</i>) button.
    </div>
  <div class="form-group">
    <label for="full-name">Your name</label>
    <input autocomplete="name" id="full-name" type="text">
  </div>
  <div class="form-group">
    <label for="email">Your email address</label>
    <input autocomplete="email" id="email" type="text">
  </div>
  <button type="reset">Cancel</button>
  <button type="submit">Sign up</button>
</form>

.wrapper{
  border:1px solid #aeaeae;
  display:grid;
  gap:1rem;
  grid-template-columns:1fr 1fr;
  padding:1rem;
  width:50vw;
 }
 label{
  display:block;
 }
 input, button{
  font:inherit;
 }
 h1, [role=note]{
  grid-column:1 / -1;
 }
 .form-group{
  grid-column:1;
 }
 input{
  width:100%;
 }
 button[type=reset]{
  grid-column:1;
 }
 button[type=submit]{
  grid-column:2;
 }

Pruebas