Contenido del curso
Christian David Sánchez
Efraín Hernández García
Christian David Sánchez
Adrián Benavente
Villón Fátima
Cristian David Valencia Castañeda
Juan Castro
Hector Miguel Salazar Doroteo
Henry J. Perez
Brandon Argel Verdeja Domínguez
Obed Paz
Carolina Gómez
Tomás Felipe Beltrán Pulido
jorge llanque
Silvia Corrales
aria-live: Se utilizan para establecer la prioridad con la que el lector de pantalla debe tratar a cambios a las regiones en vivo - los valores posibles son: off, politeo assertive. La configuración predeterminada es off. Este atributo es, con mucho, el más importante.
Muchas gracias, me quedó mucho más claro!
excelente :D saludos
Rarísimo, pero en Orca para que funciona el aria-live con la notificación, tuve que encerrar la misma en un div adicional, de manera que quedara así:
<div aria-live="assertive"> <div class="notification"></div> </div>
En cambio, para el mensaje de error debajo del campo funcionó tal cual el ejemplo en el video.
Me paso lo mismo con el lector de pantalla de Windows
Juliana en Colombia como se certifica una página web que cumpla con los niveles de conformidad?
Existe procesos de auditoria y certificación sobre estas pautas?
Que debo hacer para certificarme en Colombia para poder hacer validaciones en páginas web?
Existe alguna comunidad de desarrollo que valide directamente la NTC 5854?
Creo que este aporte de Ivan puede ayudarte: https://platzi.com/comentario/1027020/. :wink:
Con este código podemos hacer que se nos enfoque la parte del nombre que esta mal
function validateForm(e){ e.preventDefault(); const nameField = document.getElementById("name"); if(nameField.value ===""){ document.getElementById('name-error').innerHTML ="Para enviar el formulario se necesita un nombre!"; setTimeout(function() { document.getElementById("name").focus(); }, 3000); }else{ showNotification(); } }
aria-hidden it hide the content from the screen readers. The idea is to hide those element which aren’t visible in the screen at the momentaria-label it’s intended to indicated the function that an interactive element hasaria-labelledby it references another that has content that can help define the context of the first elementtabindex similar to aria-hidden but to avoid elements to be hovered. Use “-1” to avoid hoveraria-live:
Se utilizan para establecer la prioridad con la que el lector de pantalla debe tratar a cambios a las regiones en vivo, los valores posibles son:
assertive Indica que las actualizaciones de la región con alta prioridad que deben ser presentadas al usuario inmediatamente.
off (default) Indica que las actualizaciones de la región no deberían de ser presentadas al usuario a no ser que el usuario este enfocado en esa región.
polite Indica que las actualizaciones de la región deberían de ser presentadas en la siguiente oportunidad, como al final de que el lector termine de decir la oración o cuando el usuario hace una pausa para escribir.
Esta propiedad me encantó! 😃
La clase explica cómo hacer accesibles los cambios dinámicos en un formulario usando la propiedad aria-live.
Cuando se envía un formulario y aparece una notificación (por ejemplo, de éxito o error), una persona que usa lector de pantalla podría no darse cuenta. Para solucionar esto, se agrega aria-live al contenedor del mensaje.
Existen dos opciones principales:
En el ejemplo, se usa assertive para avisar que el formulario fue enviado correctamente o que hubo un error. Cuando el contenido HTML del elemento cambia, el lector de pantalla lo detecta y lo anuncia.
También se muestra cómo actualizar el mensaje dinámicamente con JavaScript y cómo aplicar la misma estrategia a los mensajes de error. Así, el sitio se vuelve más accesible para personas que usan lectores de pantalla.
¿Es común que no me funcione en NVDA?
aria-live no lo conocía, ahora entiendo lo importante que es usar estos atributos
Uno aprende sobre accesibilidad y piensa que ya lo sabe todo, hasta que llega a este curso y aprende muchos mas trucos y herramientas para mejorar 😅😍