Dominar las bases de la accesibilidad

1

Bases de Accesibilidad Web y Creación de Portafolio Personal

2

Importancia de la Accesibilidad Web en el Desarrollo de Sitios

3

Pautas de Accesibilidad Web: Comprensión y Aplicación

4

Pautas de Accesibilidad Web: Principios y Criterios WCAG

5

Principios de Accesibilidad Web: Perceptible, Operable, Comprensible, Robusto

6

Tecnologías Asistivas para Accesibilidad Web

Presentar el proyecto

7

Creación de un Portafolio Accesible con HTML, CSS y JavaScript

Evaluar la accessibilidad de sitios web

8

Pruebas de Accesibilidad Web con Lighthouse en Chrome

9

Simulación de Accesibilidad Visual en Sitios Web

10

Pruebas de Accesibilidad Web con Teclado y Elementos Interactivos

11

Lectores de Pantalla: Uso y Configuración para Accesibilidad Web

12

Pruebas básicas con lector de pantalla VoiceOver en Mac

Refactorizar HTML para ser mas accessible

13

HTML Semántico para Mejora de Accesibilidad Web

14

HTML Semántico: Mejora la Estructura de tu Página Web

15

Refactorización de HTML para Mejorar Semántica y Accesibilidad

16

Mejorando la Accesibilidad Web con HTML Semántico

17

Uso de WAI-ARIA para Mejorar la Accesibilidad Web

18

Uso adecuado de roles en aplicaciones web

19

Accesibilidad Web: Uso de Aria para Lectores de Pantalla

20

Accesibilidad Web: Estados ARIA para Lectores de Pantalla

21

Actualizar HTML para Mejorar la Accesibilidad del Sitio Web

Utilizar CSS para aumentar la acessibilidad de un sitio web

22

Mejora de Accesibilidad Web con CSS: Contraste y Colores

23

Estrategias para Mejorar la Accesibilidad de Iconos Web

24

Implementación de Enlaces de Salto para Accesibilidad Web

25

Estilos de Foco y Hover para Accesibilidad Web

26

Optimización de Formularios y Estilos CSS en HTML

Extender la accesibilidad usando JavaScript

27

Interacciones y Accesibilidad en Carruseles Web con JavaScript

28

Accesibilidad en Carruseles: Manejo de Foco con TabIndex

29

Accesibilidad en Carruseles para Lectores de Pantalla

30

Mejoras de Accesibilidad en Modales con HTML y CSS

31

Accesibilidad en Elementos Dinámicos: Mejora de Modales

32

Validación de Formularios Web: Instrucciones Claras y Ejemplos

33

Mejorando la Accesibilidad de Formularios Web

34

Implementación de ARIA Live para Accesibilidad Web

Conclusión

35

Accesibilidad Web: Mejora Continua y Pruebas Prácticas

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Actualizar HTML para Mejorar la Accesibilidad del Sitio Web

21/35
Recursos

¿Cómo hacer que un sitio web sea más accesible?

Mejorar la accesibilidad del HTML de un sitio web no solo significa hacerlo legible y comprensible para todos, sino también asegura que sea semánticamente correcto. Aquí te presentamos algunas prácticas para emparejarte con las técnicas de actualización de HTML y llevar tu proyecto al siguiente nivel.

¿Cuáles son los pasos clave para añadir enlaces accesibles?

Agregar enlaces correctamente es esencial para la accesibilidad y la navegación intuitiva. Aquí te muestro cómo hacerlo:

  1. Crea un enlace con la etiqueta <a> asegurándote de que el texto sea conciso y descriptivo.
    <a href="proyectos.html">Proyectos</a>
    <a href="contacto.html">Contacto</a>
    
  2. Utiliza un formato consistente para que todos los enlaces del sitio mantengan una apariencia uniforme.
  3. Asegúrate de que el cierre del enlace esté colocado correctamente dentro del flujo de contenido HTML.

¿Cómo mejorar la accesibilidad de los iconos sociales?

Aunque los iconos visuales son elementos gráficos, los lectores de pantalla necesitan descripciones textuales para comprender su propósito. Añade texto alternativo usando el atributo alt en cada imagen:

  1. Identifica cada icono social y añade un texto descriptivo.
    <img src="twitter-icon.png" alt="Twitter de Mi Proyecto">
    <img src="facebook-icon.png" alt="Facebook de Mi Proyecto">
    
  2. Asegúrate de que el texto sea claro y exprese el destino del enlace vinculado al icono.

¿Por qué se necesita texto alternativo en imágenes de proyectos?

Las imágenes de proyectos también requieren texto alternativo para proporcionar contexto visual a usuarios que dependen de lectores de pantalla. Aquí te explico cómo hacerlo correctamente:

  1. Añade un texto alternativo a cada imagen de proyecto para explicar su contenido.
    <img src="proyecto1.png" alt="Imagen del Primer Proyecto">
    <img src="proyecto2.png" alt="Imagen del Segundo Proyecto">
    
  2. Facilita que los usuarios comprendan de qué trata cada proyecto, incluso sin poder ver las imágenes.

¿Qué rol tiene el atributo aria-label en los formularios?

El aria-label se utiliza para mejorar la navegación en formularios, especialmente para aquellos usuarios que utilizan tecnologías asistivas.

  1. Asigna un aria-label al campo del correo para una mejor identificación por parte de los lectores de pantalla.
    <input type="email" aria-label="Correo Electrónico" name="correo">
    
  2. Esto ayudará a los usuarios a entender qué información se espera en cada campo del formulario.

Tu sitio web se verá igualmente en la superficie, pero será mucho más accesible y semánticamente correcto tras estos cambios. ¡Realizar estas mejoras es solo el comienzo de crear un espacio web inclusivo!

A medida que creas, recuerda que cada acción cuenta hacia un internet más accesible para todos. ¡Sigue aprendiendo y perfeccionando tu juego de HTML y CSS!

Aportes 22

Preguntas 0

Ordenar por:

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

Yo agregue etiquetas label, de esta manera también seria correcto? y de igual manera agregar los aria-label o ya estarían de mas?

así quedo mi código del Form…

        <label for="nombre">Nombre</label>
        <input
          aria-label="nombre"
          name="nombre"
          type="text"
          placeholder="Ingresa tu nombre"
        />
        <br />
        <label for="correo">Correo</label>
        <input
          aria-label="correo"
          name="correo"
          type="text"
          placeholder="Ingresa tu correo"
        />
        <br />
        <label for="mensaje">Mensaje</label>
        <textarea
          aria-label="mensaje"
          name="mensaje"
          cols="30"
          rows="10"
          placeholder="Ingresa tu mensaje"
        ></textarea>
        <button class="send-button">Enviar</button>
      </form>

Definitivamente es mejor arrancar un proyecto teniendo la accesibilidad en mente, que refactorizarlo para añadirla.
Dará menos dolores de cabeza 😅

Después de refactorizar

¡Así voy por ahora con mi portafolio! Gracias Juliana 💕

Como tengo multilenguaje los Alt y Aria-label los cargué con la traducción también, así, si eligen cambiar el idioma estos cambiarán también.

Adjunto pagina con mejoras:

![](

Ha estado calidad la refactorización del HTML 😃

Me gusto que este video ya que es de las respuestas a los retos de videos previos, esto porque, porque asi podemos verificar si lo hicimos parecido o similar los que lo hicieron o resolver las dudas para los que no, en ambos caso es util, debieran copiar esta idea en otros cursos donde dejan retos pero posteriormente ni se acuerdan de ellos y no sabemos si los hicimos correctamente. es una sugerencia.

El sitio ya se volvió mucho más accesible con todo lo que llevamos

Yo le pusé un aria-label al elemento input del mensaje.

Este es el código de mi formulario. Añadí etiquetas label con su correspondiente for y el aria-label para los inputs

<form class="form-container">
      <label for="nombre">Nombre</label>
      <input type="text" id="nombre" aria-label="nombre" />
      <label for="correo">Correo</label>
      <input type="text" id="correo" aria-label="correo" />
      <label for="mensaje">Mensaje</label>
      <textarea class="message-input" type="text" id="mensaje" aria-label="mensaje"></textarea>
      <button class="send-button" aria-label="enviar formulario">Enviar</button>
    </form>

De 10 😄 !!!

Con este curso uno se da cuenta de lo importante que es el tema de la accesibilidad en la web. Todo debe ser pensado para mejorar la navegación del otro.

Pienso que falta un label para el form de mensaje.

Asi quedo mi portfolio 😄…!!

Bastante genial!, nunca había visto a fondo lo importante que es la accesibilidad para los sitios web.

Después de refactorizar el html:

tamalito

Se me hace muy impresionante cómo mejora tanto la accesibilidad solamente con HTML semántico

excelente

Ya los había realizado, el footer me quedo así:

<footer class="contact-section">
      <h2 class="header">Contacto</h2>
      <form class="form-container">
        <label for="Nombre">Nombre:</label>
        <input type="text" aria-label="Tu Nombre" id="Nombre" /> <br />
        <label for="Correo">Correo</label>
        <input type="email" aria-label="Tu Correo" id="Correo" /> <br />
        <label for="Mensaje">Mensaje</label>
        <textarea
          id="Mensaje"
          aria-label="Tu Mensaje"
          cols="48"
          rows="10"
        ></textarea>
        <br />
        <button class="send-button">Enviar</button>
      </form>
    </footer>

Poniendo label y el input email para correo y textarea para el mensaje. Además borre ese div y sus estilos se los aplique al textarea

Que genial curso, ahora antes de empezar a desarrollar la pagina, tambien pensare en la accesibilidad que le voy a dar

👌