Dominar las bases de la accesibilidad

1

驴Listo para hacer la web un mejor lugar para todos sus usuarios?

2

Conociendo la importancia de la accesibilidad web

3

Aprendiendo sobre WCAG y sus criterios de conformidad

4

Profundizando los 12 criterios de conformidad

5

Los 4 principios de WCAG

6

Tecnolog铆a Asistivas - cu谩les son y c贸mo funcionan

Presentar el proyecto

7

Instalaci贸n del proyecto y primeros pasos

Evaluar la accessibilidad de sitios web

8

Pruebas autom谩ticas con Lighthouse

9

Pruebas con simuladores de discapacidades visuales

10

Pruebas manuales con tu teclado

11

Pruebas manuales con lectores de pantalla

12

Pruebas manuales con VoiceOver

Refactorizar HTML para ser mas accessible

13

驴Qu茅 es el HTML sem谩ntico y por qu茅 es importante?

14

Usando HTML sem谩ntico en el header de nuestro sitio

15

Usando HTML sem谩ntico en el contenido principal de nuestro sitio

16

Usando HTML sem谩ntico en footer de nuestro sitio

17

ARIA - Accessible Rich Internet Applications

18

ARIA roles

19

ARIA properties

20

ARIA states

21

Overview del proyecto con los retos resueltos

Utilizar CSS para aumentar la acessibilidad de un sitio web

22

Contrastes de color

23

Iconos

24

Skip Links

25

Estilos de foco y hover

26

Overview retos resueltos con CSS

Extender la accesibilidad usando JavaScript

27

Manejando el foco del teclado - botones

28

Manejando el foco del teclado - el carousel

29

Coordinando el foco del teclado con el foco de lectores de pantallas

30

Manejando modales

31

Mejorando la accesibilidad con teclado de nuestro modal

32

Ayudando a nuestros usuarios a interactuar correctamente con el sitio

33

Validando formularios

34

Manejando cambios din谩micos

Conclusi贸n

35

Siguientes pasos

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

1D
20H
9M
26S

Validando formularios

33/35
Recursos

Aportes 20

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 />

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();

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

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?

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()
  }
}

Me sorprende su pronunciaci贸n en ingles 馃槷

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.

Algunos recursos

If you want, leave a message with this form.

Estoy teniendo un problema con el preventDefault y es que tambi茅n previene el mensaje de error cuando le colocas el atributo 鈥渞equired鈥 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?

El atributo de 鈥渁ria-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

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.

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 馃槃

Me gust贸 mucho como implement贸 las notificaciones!

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);
});