En este curso también aprendí que parágrafo es otra manera de decir párrafo xD En México nunca lo habia escuchado.
Dominar las bases de la accesibilidad
Bases de Accesibilidad Web y Creación de Portafolio Personal
Importancia de la Accesibilidad Web en el Desarrollo de Sitios
Pautas de Accesibilidad Web: Comprensión y Aplicación
Pautas de Accesibilidad Web: Principios y Criterios WCAG
Principios de Accesibilidad Web: Perceptible, Operable, Comprensible, Robusto
Tecnologías Asistivas para Accesibilidad Web
Presentar el proyecto
Creación de un Portafolio Accesible con HTML, CSS y JavaScript
Evaluar la accessibilidad de sitios web
Pruebas de Accesibilidad Web con Lighthouse en Chrome
Simulación de Accesibilidad Visual en Sitios Web
Pruebas de Accesibilidad Web con Teclado y Elementos Interactivos
Lectores de Pantalla: Uso y Configuración para Accesibilidad Web
Pruebas básicas con lector de pantalla VoiceOver en Mac
Refactorizar HTML para ser mas accessible
HTML Semántico para Mejora de Accesibilidad Web
HTML Semántico: Mejora la Estructura de tu Página Web
Refactorización de HTML para Mejorar Semántica y Accesibilidad
Mejorando la Accesibilidad Web con HTML Semántico
Uso de WAI-ARIA para Mejorar la Accesibilidad Web
Uso adecuado de roles en aplicaciones web
Accesibilidad Web: Uso de Aria para Lectores de Pantalla
Accesibilidad Web: Estados ARIA para Lectores de Pantalla
Actualizar HTML para Mejorar la Accesibilidad del Sitio Web
Utilizar CSS para aumentar la acessibilidad de un sitio web
Mejora de Accesibilidad Web con CSS: Contraste y Colores
Estrategias para Mejorar la Accesibilidad de Iconos Web
Implementación de Enlaces de Salto para Accesibilidad Web
Estilos de Foco y Hover para Accesibilidad Web
Optimización de Formularios y Estilos CSS en HTML
Extender la accesibilidad usando JavaScript
Interacciones y Accesibilidad en Carruseles Web con JavaScript
Accesibilidad en Carruseles: Manejo de Foco con TabIndex
Accesibilidad en Carruseles para Lectores de Pantalla
Mejoras de Accesibilidad en Modales con HTML y CSS
Accesibilidad en Elementos Dinámicos: Mejora de Modales
Validación de Formularios Web: Instrucciones Claras y Ejemplos
Mejorando la Accesibilidad de Formularios Web
Implementación de ARIA Live para Accesibilidad Web
Conclusión
Accesibilidad Web: Mejora Continua y Pruebas Prácticas
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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.
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:
Instrucciones al inicio del formulario:
<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.
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" />
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.
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.
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
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 😮
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);
});
If you want, leave a message with this form.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?