Les recomiendo estas lecturas si quieren saber un poco más sobre HTML semánico
link1: https://www.arkaitzgarro.com/html5/capitulo-2.html
link2: http://html5doctor.com/
Dominar las bases de la accesibilidad
¿Listo para hacer la web un mejor lugar para todos sus usuarios?
Conociendo la importancia de la accesibilidad web
Aprendiendo sobre WCAG y sus criterios de conformidad
Profundizando los 12 criterios de conformidad
Los 4 principios de WCAG
Tecnología Asistivas - cuáles son y cómo funcionan
Presentar el proyecto
Instalación del proyecto y primeros pasos
Evaluar la accessibilidad de sitios web
Pruebas automáticas con Lighthouse
Pruebas con simuladores de discapacidades visuales
Pruebas manuales con tu teclado
Pruebas manuales con lectores de pantalla
Pruebas manuales con VoiceOver
Refactorizar HTML para ser mas accessible
¿Qué es el HTML semántico y por qué es importante?
Usando HTML semántico en el header de nuestro sitio
Usando HTML semántico en el contenido principal de nuestro sitio
Usando HTML semántico en footer de nuestro sitio
ARIA - Accessible Rich Internet Applications
ARIA roles
ARIA properties
ARIA states
Overview del proyecto con los retos resueltos
Utilizar CSS para aumentar la acessibilidad de un sitio web
Contrastes de color
Iconos
Skip Links
Estilos de foco y hover
Overview retos resueltos con CSS
Extender la accesibilidad usando JavaScript
Manejando el foco del teclado - botones
Manejando el foco del teclado - el carousel
Coordinando el foco del teclado con el foco de lectores de pantallas
Manejando modales
Mejorando la accesibilidad con teclado de nuestro modal
Ayudando a nuestros usuarios a interactuar correctamente con el sitio
Validando formularios
Manejando cambios dinámicos
Conclusión
Siguientes pasos
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Iniciar sesión
Usando HTML semántico en footer de nuestro sitio
16/35Recursos
Aportes 12
Preguntas 0
Ordenar por:
Agregué labels para los encabezados de los inputs: nombre, correo y mensaje 😃
Aparte del HTML semántico les dejo un link donde pueden prácticar los diferentes casos que puede presentar una revisión de accesibilidad.
Dato chido: los botones comunican interacciones.
Organice el formulario con labels para los mensajes y cambie el input de correo que estaba como texto por uno de email y el mensaje por un textarea:
<form class="form-container">
<label for="Nombre">Nombre:</label>
<input type="text" id="Nombre" /> <br />
<label for="Correo">Correo</label>
<input type="email" id="Correo" /> <br />
<div class="message-input">
<label for="Mensaje">Mensaje</label>
<textarea id="Mensaje" cols="48" rows="10"></textarea> <br />
</div>
<button class="send-button">Enviar</button>
</form>
Es interesante ver que este curso es de accesibilidad pero ayuda muchísimo a entender HTML semántico.
Alguna diferencia entre button de tipo submit y input de tipo submit ?
En el input pueden agregar al etiqueta placeholder=“correo” que ayuda al usuario a entender que debe de ingresar en el formulario
Muy interesante
El botón es para interactuar y hacer una acción y un input es para formularios
Codigo de la clase:
index.html
<footer class="contact-section">
<h2 class="header">Contacto</h2>
<form class="form-container">
Nombre<input type="text" /> <br />
Correo<input type="text" /> <br />
<div class="message-input">Mensaje<input type="text" /> <br /></div>
<button class="send-button">Enviar</button>
</form>
</footer>
styles.css
.send-button {
align-items: center;
background-color: var(--verde);
border-radius: 5px;
color: white;
font-family: var(--secondary-font);
display: flex;
height: 50px;
justify-content: center;
margin-bottom: 48px;
width: 150px;
margin-left: auto;
font-size: 16px;
}
cómo se podrían manejar los errores en un form?
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.