El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Perceptible: Hacer el Contenido Disponible a los Sentidos

Siguiente ►
►

En este tema, exploraremos el primer principio de las Pautas de Accesibilidad para el Contenido Web (WCAG): Perceptible. Este principio se centra en garantizar que la información y los componentes de la interfaz de usuario sean presentados de manera que puedan ser percibidos por todos los usuarios, independientemente de sus capacidades sensoriales.

Conceptos Clave

  1. Alternativas Textuales:

    • Proporcionar texto alternativo para imágenes, gráficos y otros elementos no textuales.
    • Ejemplo: Usar el atributo alt en imágenes HTML para describir su contenido.

  2. Contenido Multimedia:

    • Ofrecer subtítulos para videos y transcripciones para contenido de audio.
    • Asegurar que los videos tengan descripciones de audio para personas con discapacidades visuales.

  3. Adaptabilidad:

    • Crear contenido que pueda ser presentado de diferentes maneras sin perder información o estructura.
    • Ejemplo: Usar HTML semántico para estructurar el contenido de manera lógica.

  4. Distinguibilidad:

    • Asegurar que el contenido sea fácil de ver y escuchar, separando el primer plano del fondo.
    • Ejemplo: Mantener un contraste adecuado entre el texto y el fondo.

Ejemplos Prácticos

Alternativas Textuales

<img src="imagen-de-ejemplo.jpg" alt="Un paisaje montañoso al amanecer con un cielo despejado">

Explicación: El atributo alt proporciona una descripción textual de la imagen, lo que permite a los lectores de pantalla transmitir esta información a los usuarios con discapacidades visuales.

Subtítulos y Transcripciones

Para un video educativo, puedes proporcionar subtítulos y una transcripción completa:

<video controls>
  <source src="video-educativo.mp4" type="video/mp4">
  <track kind="subtitles" src="subtitulos.vtt" srclang="es" label="Español">
</video>

Explicación: El elemento <track> se utiliza para añadir subtítulos al video, mejorando la accesibilidad para personas con discapacidades auditivas.

Contraste de Color

Asegúrate de que el texto sea legible sobre el fondo:

body {
  background-color: #ffffff;
  color: #333333;
}

Explicación: Un buen contraste entre el texto y el fondo es crucial para la legibilidad. Utiliza herramientas de verificación de contraste para asegurarte de que cumples con los estándares de accesibilidad.

Ejercicios Prácticos

Ejercicio 1: Añadir Texto Alternativo

Tarea: Añade texto alternativo a las siguientes imágenes:

<img src="logo.png" alt="">
<img src="foto-equipo.jpg" alt="">

Solución:

<img src="logo.png" alt="Logotipo de la empresa">
<img src="foto-equipo.jpg" alt="Foto del equipo de desarrollo en la oficina">

Ejercicio 2: Evaluar el Contraste de Color

Tarea: Evalúa el siguiente esquema de color y sugiere mejoras si es necesario:

body {
  background-color: #f0f0f0;
  color: #a0a0a0;
}

Solución: El contraste entre el texto y el fondo es insuficiente. Una mejora podría ser:

body {
  background-color: #f0f0f0;
  color: #333333;
}

Conclusión

El principio de "Perceptible" es fundamental para garantizar que todos los usuarios puedan acceder al contenido web de manera efectiva. Al proporcionar alternativas textuales, asegurar la adaptabilidad del contenido y mantener un buen contraste de color, mejoramos significativamente la experiencia de usuario para personas con diversas capacidades sensoriales. En el próximo tema, exploraremos cómo hacer que las interfaces de usuario sean operables para todos los usuarios.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados