Dominar las bases de la accesibilidad

1

Bases de Accesibilidad Web y Creación de Portafolio Personal

2

Importancia de la Accesibilidad Web en el Desarrollo de Sitios

3

Pautas de Accesibilidad Web: Comprensión y Aplicación

4

Pautas de Accesibilidad Web: Principios y Criterios WCAG

5

Principios de Accesibilidad Web: Perceptible, Operable, Comprensible, Robusto

6

Tecnologías Asistivas para Accesibilidad Web

Presentar el proyecto

7

Creación de un Portafolio Accesible con HTML, CSS y JavaScript

Evaluar la accessibilidad de sitios web

8

Pruebas de Accesibilidad Web con Lighthouse en Chrome

9

Simulación de Accesibilidad Visual en Sitios Web

10

Pruebas de Accesibilidad Web con Teclado y Elementos Interactivos

11

Lectores de Pantalla: Uso y Configuración para Accesibilidad Web

12

Pruebas básicas con lector de pantalla VoiceOver en Mac

Refactorizar HTML para ser mas accessible

13

HTML Semántico para Mejora de Accesibilidad Web

14

HTML Semántico: Mejora la Estructura de tu Página Web

15

Refactorización de HTML para Mejorar Semántica y Accesibilidad

16

Mejorando la Accesibilidad Web con HTML Semántico

17

Uso de WAI-ARIA para Mejorar la Accesibilidad Web

18

Uso adecuado de roles en aplicaciones web

19

Accesibilidad Web: Uso de Aria para Lectores de Pantalla

20

Accesibilidad Web: Estados ARIA para Lectores de Pantalla

21

Actualizar HTML para Mejorar la Accesibilidad del Sitio Web

Utilizar CSS para aumentar la acessibilidad de un sitio web

22

Mejora de Accesibilidad Web con CSS: Contraste y Colores

23

Estrategias para Mejorar la Accesibilidad de Iconos Web

24

Implementación de Enlaces de Salto para Accesibilidad Web

25

Estilos de Foco y Hover para Accesibilidad Web

26

Optimización de Formularios y Estilos CSS en HTML

Extender la accesibilidad usando JavaScript

27

Interacciones y Accesibilidad en Carruseles Web con JavaScript

28

Accesibilidad en Carruseles: Manejo de Foco con TabIndex

29

Accesibilidad en Carruseles para Lectores de Pantalla

30

Mejoras de Accesibilidad en Modales con HTML y CSS

31

Accesibilidad en Elementos Dinámicos: Mejora de Modales

32

Validación de Formularios Web: Instrucciones Claras y Ejemplos

33

Mejorando la Accesibilidad de Formularios Web

34

Implementación de ARIA Live para Accesibilidad Web

Conclusión

35

Accesibilidad Web: Mejora Continua y Pruebas Prácticas

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Mejorando la Accesibilidad de Formularios Web

33/35
Recursos

¿Cómo mejorar la accesibilidad de un formulario de contacto?

Un formulario de contacto accesible es esencial para garantizar que todas las personas, independientemente de sus capacidades, puedan interactuar con tu sitio web. A continuación, exploraremos cómo puedes mejorar la accesibilidad de tu formulario de contacto utilizando algunas técnicas básicas pero efectivas.

¿Cómo agregar instrucciones claras al formulario?

Añadir instrucciones claras en tu formulario es fundamental para guiar a los usuarios sobre cómo deben interactuar con él. Aquí te muestro cómo puedes lograrlo:

  1. Instrucciones al inicio del formulario:

    • Asegúrate de proporcionar un párrafo inicial en tu formulario que explique claramente su propósito. Por ejemplo, podrías incluir un texto como "Para mandarme un mensaje, utiliza el formulario a continuación."
    <form>
      <p class="hincho">Para mandarme un mensaje, utiliza el formulario a continuación.</p>
      ...
    </form>
    

Este tipo de mensajes no solo aclaran el uso del formulario, sino que también mejoran la experiencia del usuario, haciéndola más inclusiva.

¿Por qué usar etiquetas semánticas?

Las etiquetas semánticas como <label> y <input> en HTML ayudan a que las aplicaciones de asistencia, como los lectores de pantalla, comuniquen adecuadamente la información al usuario. Implementar esto en tu formulario es vital para asegurar su accesibilidad.

  • Uso de etiquetas <label>: Asegúrate de que cada campo <input> tenga su correspondiente etiqueta <label> vinculada mediante el atributo for, que debe coincidir con el id del campo de entrada.

    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" />
    

¿Cómo implementar validaciones de formulario accesibles?

El uso de validaciones no solo mejora la precisión de los datos, sino que también brinda feedback claro a los usuarios, lo que es crucial para la accesibilidad.

  1. Eventos y funciones en JavaScript: Utiliza eventos para manejar la validación antes de enviar el formulario.

    document.querySelector("form").addEventListener("submit", function(event) {
      event.preventDefault();
      let nombre = document.getElementById("nombre").value;
      let errorElement = document.getElementById("nombre-error");
    
      if (nombre.trim() === "") {
        errorElement.textContent = "El formulario necesita un nombre.";
      } else {
        errorElement.textContent = "";
        // Lógica para enviar el formulario.
      }
    });
    

Esta función verifica si el campo de entrada está vacío y, si es así, muestra un mensaje de error, permitiendo al usuario corregir su error.

¿Cómo mejorar el feedback visual para errores?

Comunicar errores mediante colores puede ser un problema para usuarios con daltonismo u otras discapacidades visuales. En su lugar, utiliza texto para describir el error y, opcionalmente, considera agregar un cambio de color con suficiente contraste.

  • Estilos en CSS: Asegúrate de proporcionar acceso visual a los mensajes de error utilizando estilos que sean claros y visibles para todos.

    .error-message {
      color: #900; /* Rojo oscuro para buen contraste */
      font-weight: bold;
    }
    

Con estos cambios, tu formulario no sólo será más accesible para toda la audiencia, sino que también mejorará la experiencia del usuario, permitiéndoles interactuar más fácilmente con tu sitio web. Recuerda, la accesibilidad es una mejora continua, así que sigue explorando y aplicando estas prácticas.

Aportes 23

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

En este curso también aprendí que parágrafo es otra manera de decir párrafo xD En México nunca lo habia escuchado.

todos los front deberia ver este curso!

El método preventDefault () cancela el evento si es cancelable, lo que significa que la acción predeterminada que pertenece al evento no ocurrirá.

hay un atributo que ayuda a validar los formulario, el atributo es require (No recibe ningún valor)
este atributo hace que al momento de hacer un submit, si el input en el que pusiste el require esta vacío, lo enfoca y nos avisa de forma automática que es obligatorio llenarlo.

<label for="nombre">Nombre</label>
<input type="text" name="nombre" id="nombre" require />

Este curso es Oro realmente es increible como se debe tener en cuenta la accesibilidad

Termine las validaciones de los otros input:

function Validacion(e) {
  e.preventDefault();

  let Trues = 0;

  const Name = document.getElementById("Nombre").value;
  console.log(Name);

  if (Name === "") {
    document.querySelector("#Nombre__Error").innerHTML =
      "! Para enviar el formulario, debes poner tu nombre";
  } else {
    document.querySelector("#Nombre__Error").style.display = "none";
    Trues++;
  }

  const Correo = document.getElementById("Correo").value;
  console.log(Name);

  if (Correo === "") {
    document.querySelector("#Email__Error").innerHTML =
      "! Para enviar el formulario, debes poner tu correo";
  } else {
    document.querySelector("#Email__Error").style.display = "none";
    Trues++;
  }

  const Mensaje = document.getElementById("Mensaje").value;
  console.log(Name);

  if (Mensaje === "") {
    document.querySelector("#Mensaje__Error").innerHTML =
      "! Para enviar el formulario, debes poner tu Mensaje";
  } else {
    document.querySelector("#Mensaje__Error").style.display = "none";
    Trues++;
  }

  if (Trues === 3) {
    showNotification();
  }
}

Si todo esta en blanco muestra el mensaje, a medida que va llenando pero siguen campos vacios oculta el mensaje a los que ya lleno y al enviar hace el reset();

El atributo de “aria-required” se lo colocas al input y para las personas usando lectores de pantalla, al no llenar un campo, el foco va a ese campo que no se llenó y le dice al usuario qué campo es y que es obligatorio

Para los input del correo y del mensaje:

<input type="text" aria-label="Correo" required/>
<input type="text" aria-label="Caja de texto para mensaje" required/>

Para manejar todos los span de la misma manera en el CSS:

.span-error {
  color: var(--blanco);
  font-family: var(--secondary-font);
}

Y en JS:

function validateForm(e) {
  e.preventDefault();
  const nameField = document.getElementById('name')
  if (nameField.value === '') {
    document.getElementById('name-error').innerHTML = '¡El nombre no puede estar vacío!'
    document.getElementById('email-error').innerHTML = '¡El correo no puede estar vacío!'
    document.getElementById('message-error').innerHTML = '¡El mensaje no puede estar vacío!'
  }else{
    showNotification()
  }
}

Se que anteriormente se dijo que no se debe expresar significado con color, pero ese mensaje de validación en blanco me descoloca completamente.
¿Habrá alguna manera de hacer que si parezca un mensaje de error y no un texto cualquiera?

Estoy teniendo un problema con el preventDefault y es que también previene el mensaje de error cuando le colocas el atributo “required” a un input y la persona no introduce nada ahí.
.
El preventDefault está previniendo que la pagina no se refresque pero también está previniendo que se muestre ese mensaje
.
Alguien sabe como resolverlo?

Gracias profesora, considero que sería muy bueno hacer aún más accesible su aportación.
Pudiéramos detectar el error y mandarlo directamente el Input correspondiente y al momento de enviarlo y que todo sea correcto, enviar el foco al mensaje de enviado, que yo lo situaría debajo del formulario, para yo como usuario saber siempre que lo hice bien, por que quizá el tiempo de espera del mensaje es muy corto.

Me sorprende su pronunciación en ingles 😮

Excelente!
La forma de validad if(nameField === '') queda un poco corta porque solo abarca un string vacio, entonces tal vez sea mejor usar los falsy values y el atributo required para un mejor control

Me gustó mucho como implementó las notificaciones!

El sitio ha cambiado muchísimo, viendo cómo empezó! 😮

Cuando tengan un formulario que traiga información de internet, sería buena idea informarle a la persona que espere mientras carga la información 😄

Validando un formulario ayudamos a nuestros usuarios a entender el formulario y les brindamos instrucciones de que requerimos de ellos en ese momento, si cometen errores les comunicamos el error y les damos una opción de corregirlos.

Si quieren controlar el valor de los inputs de otra forma:

$form.addEventListener('submit', e => {
  e.preventDefault();
  let list = [];
  list.push(e.target.name.value);
  list.push(e.target.email.value);
  list.push(e.target.content.value);
  console.log(list);
});
nezahualcóyotl
Pienso que al poner el error de color blanco puede que las personas que no pueden visualizar el color no lo noten, por lo que no sea necesario, pero al hacer eso estamos quitando accesibilidad al usuario promedio que si puede ver los colores, por tanto deberia cambiarse ese color por otro que si priorize el significado del color. Estuve probando y al parecer el rojo no tiene buen contraste en este caso asi que le puse un naranja. ![](https://static.platzi.com/media/user_upload/image-a78b212f-aa94-4244-8124-237e081db093.jpg)

If you want, leave a message with this form.