Ejercicio: Corrección de problemas con la accesibilidad de formularios

  • 15 minutos

En este ejercicio, usará Accessibility Insights for Web para detectar y corregir problemas de accesibilidad de un formulario.

Instalación de la extensión del navegador Accessibility Insights for Web

  1. Vaya a la página de Accessibility Insights for Web en Google Chrome o Microsoft Edge.
  2. Seleccione el botón de instalación correspondiente al explorador.
  3. Cuando se muestre la página de extensión, seleccione el botón adecuado para el explorador (Obtener para Microsoft Edge, Añadir a Chrome para Chrome) para instalar la extensión.

Inspección del formulario mediante FastPass

Para este ejercicio, usará la herramienta FastPass. En FastPass, ejecute tres pruebas para encontrar los problemas de accesibilidad más comunes en menos de 5 minutos.

  1. Abra el panel de inicio de Accessibility Insights for Web seleccionando el botón de la barra de herramientas de la extensión en el explorador. También puede usar el método abreviado de teclado Ctrl+Mayús+K (⌘+Mayús+K para macOS).

    Screenshot that shows the launch pad in Accessibility Insights for Web.

  2. Seleccione el vínculo FastPass. Se abre una segunda ventana en la que se enumeran los problemas de accesibilidad detectados por FastPass en las comprobaciones automatizadas.

    Screenshot that shows automated checks in Accessibility Insights for Web.

    Las comprobaciones automatizadas han detectado muchos errores. En este ejercicio nos centraremos en el formulario.

  3. Hay dos maneras de interactuar con los mensajes de error. Puede usar la lista en la herramienta FastPass o puede seleccionar los mensajes de error en la página web. En este caso, la herramienta FastPass enumera los errores de toda la página, lo que puede ser un poco abrumador cuando quiere centrarse en el formulario. Por ahora, usaremos el mensaje de error en la página.

    Seleccione el signo de exclamación a la derecha de la etiqueta Nombre.

    Screenshot that shows the error icon displayed for the First Name label.

    La interfaz de usuario muestra que esta etiqueta tiene un contraste bajo. También le llama la atención que está usando la codificación de colores para indicar los campos obligatorios en este formulario.

    Al seleccionar los iconos de error de las otras etiquetas, puede ver que todas tienen un contraste bajo. Echemos un vistazo al código HTML de la sección Nombre del formulario para comprender el problema de contraste de color.

    <div class="row">
  <div class="col-4 text-primary">
    First Name
  </div>
  <div class="col-8">
    <input type="text" id="Name">
  </div>
</div>

    Aquí puede ver que la etiqueta Nombre usa una clase text-primary de Bootstrap para mostrar un color de texto azul claro, que indica un campo obligatorio. Quite la clase text-primary y agregue un atributo required a la etiqueta <input> en su lugar, de la siguiente forma.

    <div class="row">
  <div class="col-4">
    First Name
  </div>
  <div class="col-8">
    <input type="text" id="Name" required>
  </div>
</div>

  4. Vuelva a ejecutar la aplicación y, a continuación, ejecute FastPass como antes. Puede ver que el error de la etiqueta Nombre se ha borrado.

    Screenshot of Accessibility Insights for Web, showing a fixed First Name label.

    Magnífico. Ahora que conoce la corrección, puede hacer lo mismo con el resto de las etiquetas.

  5. Revise el código HTML para el resto del formulario. Puede ver que las etiquetas usan text-primary o text-black-50 para el color. Quite estos atributos y agregue el atributo required a los campos de entrada Nombre y Dirección de correo electrónico.

    <form name="CustomerInfo">
  <div class="container w-50 p-3">
    <div class="row">
      <div class="col-4">
        First Name
      </div>
      <div class="col-8">
        <input type="text" id="Name" required>
      </div>
    </div>
    <div class="row">
      <div class="col-4">
        Last Name
      </div>
      <div class="col-8">
        <input type="text" id="Name" required>
      </div>
    </div>
    <div class="row">
      <div class="col-4">
        Phone
      </div>
      <div class="col-8">
        <input type="text" id="Phone">
      </div>
    </div>
    <div class="row">
      <div class="col-4">
        Birthday
      </div>
      <div class="col-8">
        <input type="text" id="Birthday">
      </div>
    </div>
    <div class="row">
      <div class="col-4">
        Email Address
      </div>
      <div class="col-8">
        <input type="text" id="Email" required>
      </div>
    </div>
    <div class="button">
      <a href="#" onclick="document.getElementById('CustomerInfo').Submit();">
        Submit Form
      </a>
    </div>
  </div>
</form>

  6. Vuelva a ejecutar la aplicación y vea FastPass. Puede ver que se han borrado todos los mensajes de error de etiqueta.

  7. Aunque no es estrictamente necesario, puede seguir mostrando una indicación para los campos obligatorios. Actualice el bloque <style> que aparece cerca de la parte superior de la página para incluir reglas para los campos obligatorios y opcionales.

    input:optional {
  border-color: #ccc;
}
input:required {
  border-color: mediumblue;
}

    Ahora aparece un borde azul alrededor de los campos obligatorios.

  8. Ya está listo para corregir el elemento de formulario. Al seleccionar la indicación de error del campo Nombre se muestra que hay dos errores. El primer error indica que la etiqueta <input> del formulario no tiene un atributo único. El valor de este atributo es un problema porque siempre se supone que los id. de HTML son únicos y las tecnologías de asistencia a menudo solo actúan sobre el primer elemento.

    Screenshot of an error message showing that a unique ID attribute is required for each input.

    En el código fuente, puede ver que ha usado Name como identificador para los campos Nombre y Apellidos.

    <div class="col-8">
    <input type="text" id="Name" required>
  </div>
</div>
<div class="row">
  <div class="col-4">
    Last Name
  </div>
  <div class="col-8">
    <input type="text" id="Name" required>
  </div>
</div>

    Cambie los identificadores por FirstName y LastName, respectivamente.

    <div class="col-8">
    <input type="text" id="FirstName" required>
  </div>
</div>
<div class="row">
  <div class="col-4">
    Last Name
  </div>
  <div class="col-8">
    <input type="text" id="LastName" required>
  </div>
</div>

  9. Ejecute la aplicación y vuelva a comprobar FastPass. Al seleccionar la indicación de error para cada campo de entrada, se muestra que ya se está acercando. Cada campo de entrada tiene el mismo mensaje de error que indica que necesita una etiqueta.

    Screenshot of an error message showing that each form element should have an associated label.

  10. Actualice el texto Nombre para usar una etiqueta <label>.

    <div class="row">
  <div class="col-4">
    <label for="FirstName">First Name</label>
  </div>
  <div class="col-8">
    <input type="text" id="FirstName" required>
  </div>
</div>

  11. Ejecute la aplicación y vuelva a comprobar FastPass. Debería ver dos cosas. En primer lugar, se ha borrado el mensaje de error del elemento FirstName. En segundo lugar, al seleccionar la etiqueta Nombre, ahora se selecciona la entrada Nombre.

  12. Agregue las etiquetas <label> a los otros campos de entrada del formulario. El código de formulario ahora debe ser similar a este.

    <form name="CustomerInfo">
  <div class="container w-50 p-3">
    <div class="row">
      <div class="col-4">
        <label for="FirstName">First Name</label>
      </div>
      <div class="col-8">
        <input type="text" id="FirstName" required>
      </div>
    </div>
    <div class="row">
      <div class="col-4">
        <label for="LastName">Last Name</label>
      </div>
      <div class="col-8">
        <input type="text" id="LastName" required>
      </div>
    </div>
    <div class="row">
      <div class="col-4">
        <label for="Phone">Phone</label>
      </div>
      <div class="col-8">
        <input type="text" id="Phone">
      </div>
    </div>
    <div class="row">
      <div class="col-4">
        <label for="Birthday">Birthday</label>
      </div>
      <div class="col-8">
        <input type="text" id="Birthday">
      </div>
    </div>
    <div class="row">
      <div class="col-4">
        <label for="Email">Email Address</label>
      </div>
      <div class="col-8">
        <input type="text" id="Email" required>
      </div>
    </div>
    <div class="button">
      <a href="#" onclick="document.getElementById('CustomerInfo').Submit();">
        Submit Form
      </a>
    </div>
  </div>
</form>

    Este código borra todos los errores de los campos de formulario.

  13. Ahora es el momento de corregir el botón Enviar. Los problemas aquí son un contraste bajo (como se muestra en el mensaje de error) y un evento onclick que ejecuta JavaScript personalizado. Puede corregir los dos problemas reemplazando el botón por una clase <input type="submit"> estándar.

    Busque este código.

    <div class="button">
  <a href="#" onclick="document.getElementById('CustomerInfo').Submit();">
    Submit Form
  </a>
</div>

    Reemplácelo por este código.

    <div class="text-center">
   <input class="btn btn-primary" type="submit">
</div>

Ha completado todas las correcciones necesarias, pero hay una mejora más rápida que puede realizar. Puede cambiar los tipos de entrada de text por algo más específico cuando esté disponible.

  1. Cambie el atributo type del campo Teléfono por tel.

  2. Cambie el atributo type del campo Cumpleaños por date.

  3. Cambie el atributo type del campo Correo electrónico por email. El código completado para el formulario ahora debería tener este aspecto.

    <form name="CustomerInfo">
  <div class="container w-50 p-3">
    <div class="row">
      <div class="col-4">
        <label for="FirstName">First Name</label>
      </div>
      <div class="col-8">
        <input type="text" id="FirstName" required>
      </div>
    </div>
    <div class="row">
      <div class="col-4">
        <label for="LastName">Last Name</label>
      </div>
      <div class="col-8">
        <input type="text" id="LastName" required>
      </div>
    </div>
    <div class="row">
      <div class="col-4">
        <label for="Phone">Phone</label>
      </div>
      <div class="col-8">
        <input type="tel" id="Phone">
      </div>
    </div>
    <div class="row">
      <div class="col-4">
        <label for="Birthday">Birthday</label>
      </div>
      <div class="col-8">
        <input type="date" id="Birthday">
      </div>
    </div>
    <div class="row">
      <div class="col-4">
        <label for="Email">Email Address</label>
      </div>
      <div class="col-8">
        <input type="email" id="Email" required>
      </div>
    </div>
    <div class="text-center">
       <input class="btn btn-primary" type="submit">
    </div>
  </div>
</form>

  4. Ejecute la aplicación y compruebe FastPass. Puede ver que ha mejorado la experiencia de todos los usuarios al tiempo que soluciona los problemas de accesibilidad. El nuevo formulario no muestra errores en FastPass. Incluye controles de entrada nativos del explorador con validación y comprobación de campos obligatorios sin ningún otro código.

    Screenshot of a completed form that shows various input types and automatic validation.