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

Usando HTML semántico en footer de nuestro sitio

16/35
Recursos

¿Cómo mejorar la accesibilidad de un sitio web con cambios de HTML semántico?

Adéntrate en el fascinante mundo de la accesibilidad web, donde pequeños ajustes pueden hacer una gran diferencia. Explorar cómo el uso estratégico de etiquetas semánticas en HTML puede transformar la experiencia de usuario, especialmente para aquellas personas que utilizan tecnologías de asistencia como lectores de pantalla, es crucial en el desarrollo web moderno. En esta guía, nos enfocaremos en las mejoras específicas que puedes realizar para elevar la accesibilidad de tu sitio web, manteniendo su apariencia.

¿Qué cambios se pueden hacer en la sección de contacto?

Para mejorar la accesibilidad, uno de los objetivos principales es optimizar cómo los lectores de pantalla interpretan y navegan un sitio web. Aquí te muestro cómo puedes ajustar el código de una sección de contacto utilizando etiquetas semánticas:

  1. Reemplazar etiquetas de texto pequeñas: En lugar de utilizar solo etiquetas de texto genéricas para contener el formulario de contacto, emplea la etiqueta <footer>. Esto indica que se trata de la parte final de la página y establece un contexto claro para los lectores de pantalla.

  2. Utilizar títulos semánticos: Asegúrate de que las secciones importantes como formularios sean claramente marcadas con subtítulos adecuados como <h2>, lo cual ayuda a organizar la estructura de la página para las tecnologías de asistencia.

  3. Implementar la etiqueta del formulario: Usa la etiqueta <form> para encerrar a todo el formulario de contacto. Esta práctica es esencial porque los lectores de pantalla pueden reconocer que hay un conjunto definido de elementos con los que se puede interactuar como parte de una operación específica, en este caso, completar y enviar un formulario.

  4. Optar por un elemento de botón en vez de un enlace: El elemento <button> debe ser preferido sobre enlaces como <a> para botones de enviar. Los botones comunican claramente una acción interactiva, diferenciándose de los enlaces que generalmente llevan a otras páginas.

¿Por qué es esencial el HTML semántico para la accesibilidad?

El HTML semántico no solo organiza mejor el contenido desde la perspectiva de los desarrolladores, sino que también proporciona un lenguaje claro y estructurado para los navegadores y tecnologías de asistencia. Aunque estos cambios pueden ser invisibles para los usuarios que no dependen de estas tecnologías, son fundamentales para quienes lo hacen. El uso de etiquetas semánticas como <header>, <nav>, <main>, y <footer> mejora la manera en que los dispositivos, particularmente los lectores de pantalla, comprenden e interactúan con tu contenido.

¿Cómo luce el resultado final?

Después de realizar las modificaciones semánticas necesarias, tu sitio web ciertamente se verá casi igual a simple vista. Los estilos visuales no cambian, pero la verdad está en los detalles:

  • El código HTML subyacente es mucho más robusto y amigable para tecnologías de asistencia.
  • Aunque la estética visual no cambia drásticamente, el impacto en la experiencia de usuario para quienes utilizan lectores de pantalla es significativo.
  • La estructura HTML bien definida actúa como un mapa para estos dispositivos, facilitando la navegación y mejorando la experiencia del usuario.

Al final, adoptar prácticas de HTML semántico es un paso hacia la creación de un web inclusivo. ¡Empieza a implementar estos cambios y lleva la accesibilidad de tu sitio al siguiente nivel! No te detengas aquí; hay innumerables recursos y técnicas esperando ser descubiertos. Atrévete a seguir aprendiendo y ampliando tu arsenal de herramientas y conocimientos sobre accesibilidad web.

Aportes 13

Preguntas 0

Ordenar por:

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

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/

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.

https://www.unimelb.edu.au/accessibility/exercises

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?

tamalito