Manuales

Appearance

Bloque 3: Accesibilidad ​

3.1 Introducción a la Accesibilidad en la Interacción Persona-Ordenador ​

La Accesibilidad en la Interacción Persona-Ordenador (IPO) es un principio clave que se enfoca en diseñar sistemas informáticos de manera que puedan ser utilizados por todas las personas, independientemente de sus capacidades físicas, sensoriales o cognitivas. El objetivo es eliminar las barreras que puedan impedir el acceso y la interacción con la tecnología, promoviendo así la inclusión y la igualdad de oportunidades.

3.2 Tipos de Discapacidades a Considerar en la Accesibilidad ​

3.2.1 Discapacidad Visual ​

La discapacidad visual incluye a personas ciegas o con visión reducida. Para mejorar la accesibilidad, se deben implementar soluciones como:

  • Etiquetas de texto descriptivas: Proporcionar descripciones de texto para imágenes y gráficos para que los lectores de pantalla puedan transmitir la información a los usuarios con discapacidad visual.

  • Contrastes adecuados: Utilizar combinaciones de colores con alto contraste para que la información sea claramente legible para aquellos con baja visión.

  • Compatibilidad con lectores de pantalla: Asegurar que la interfaz sea compatible con software de lectura de pantalla para que los usuarios con discapacidad visual puedan navegar y acceder al contenido.

3.2.2 Discapacidad Auditiva ​

La discapacidad auditiva se refiere a personas sordas o con dificultades auditivas. Para mejorar la accesibilidad, es fundamental considerar:

  • Subtítulos: Proporcionar subtítulos para contenido de audio y video, lo que permite a las personas sordas acceder al contenido de forma escrita.

  • Transcripciones: Ofrecer transcripciones de contenido de audio, como podcasts o videos, para que los usuarios con discapacidad auditiva puedan acceder a la información.

  • Señales visuales: Utilizar indicadores visuales o vibraciones para alertas y notificaciones sonoras, de manera que las personas con dificultades auditivas puedan recibir información relevante.

3.2.3 Discapacidad Motriz ​

Las personas con discapacidad motriz pueden tener dificultades para usar dispositivos estándar como teclados y ratones. Para mejorar la accesibilidad, se pueden emplear las siguientes estrategias:

  • Teclas de acceso rápido: Proporcionar atajos de teclado para las funciones principales del sistema, permitiendo a los usuarios con discapacidad motriz navegar y operar el sistema sin depender exclusivamente del ratón.

  • Diseño centrado en el uso del teclado: Asegurar que todas las funciones y elementos de la interfaz sean navegables utilizando solo el teclado, sin requerir movimientos precisos del ratón.

3.2.4 Discapacidad Cognitiva ​

Las personas con discapacidad cognitiva pueden tener dificultades para procesar información compleja o seguir instrucciones complicadas. Para mejorar la accesibilidad, se pueden aplicar las siguientes prácticas:

  • Diseño claro y simple: Utilizar un diseño limpio y sencillo, evitando elementos distractivos o innecesarios en la interfaz.

  • Instrucciones explícitas: Proporcionar instrucciones claras y paso a paso, utilizando un lenguaje sencillo y directo, para que los usuarios puedan comprender y seguir fácilmente los procedimientos.

3.3 Principios del Diseño Accesible ​

3.3.1 Perceptible ​

El principio de "Perceptible" se refiere a asegurarse de que toda la información y funcionalidades sean claramente perceptibles para todos los usuarios. Algunas estrategias para lograrlo son:

  • Etiquetas y descripciones: Utilizar etiquetas de texto descriptivas para elementos visuales e imágenes, para que los usuarios con discapacidad visual puedan comprender la información.

  • Contrastes adecuados: Utilizar combinaciones de colores con alto contraste para mejorar la legibilidad del contenido, beneficiando a usuarios con baja visión.

  • Multimodalidad: Proporcionar información a través de diferentes canales sensoriales, como texto, imágenes y sonidos, para que los usuarios puedan elegir el modo que mejor se adapte a sus necesidades.

3.4 Ejemplo Práctico de Accesibilidad ​

Imaginemos que estamos diseñando una aplicación de lectura de libros electrónicos para dispositivos móviles. Queremos asegurarnos de que sea accesible para todos los usuarios, incluyendo aquellos con discapacidad visual.

Estrategias para mejorar la accesibilidad:

  1. Etiquetas descriptivas para imágenes: Asegurarnos de que cada imagen utilizada en la aplicación tenga una etiqueta de texto descriptiva, para que los lectores de pantalla puedan transmitir la información a los usuarios con discapacidad visual.

  2. Compatibilidad con lectores de pantalla: Garantizar que la aplicación sea compatible con lectores de pantalla para que los usuarios con discapacidad visual puedan navegar y acceder al contenido de manera efectiva.

  3. Ajuste del tamaño del texto: Permitir a los usuarios ajustar el tamaño del texto según sus preferencias, para facilitar la lectura a aquellos con baja visión.

  4. Opción de modo oscuro: Proporcionar un modo oscuro en la aplicación para reducir el brillo y mejorar la legibilidad para usuarios con sensibilidad a la luz.

  5. Subtítulos para audiolibros: Si la aplicación ofrece audiolibros, asegurarse de que estén disponibles subtítulos para que los usuarios con discapacidad auditiva también puedan acceder al contenido.

3.5 Conclusiones ​

La Accesibilidad en la IPO es esencial para garantizar que la tecnología sea inclusiva y accesible para todos los usuarios. Al considerar las diferentes discapacidades y aplicar los principios del diseño accesible, podemos crear un entorno digital en el que todas las personas tengan igualdad de oportunidades para interactuar con los sistemas informáticos y beneficiarse de las ventajas que ofrece la tecnología. La accesibilidad en la IPO es un paso significativo hacia una sociedad más inclusiva y equitativa en la era digital.

3.6 Accesibilidad web práctica ​

En desarrollo web, la accesibilidad se aplica con HTML semántico, navegación por teclado, contraste adecuado, formularios claros y compatibilidad con tecnologías de asistencia.

HTML semántico ​

Usa elementos HTML según su significado.

html
<header>...</header>
<nav>...</nav>
<main>...</main>
<section>...</section>
<footer>...</footer>

Un botón debe ser un <button> si ejecuta una acción. Un enlace debe ser un <a> si navega a otra URL.

Texto alternativo ​

Las imágenes informativas necesitan alt descriptivo.

html
<img src="grafico-ventas.png" alt="Gráfico de ventas mensuales de enero a junio">

Las imágenes decorativas pueden usar alt="".

Formularios accesibles ​

Cada campo debe tener una etiqueta asociada.

html
<label for="email">Email</label>
<input id="email" name="email" type="email">

Los errores deben explicar qué ocurre y cómo corregirlo.

3.7 Navegación por teclado ​

Una interfaz accesible debe poder usarse sin ratón.

Comprueba que:

  • Se puede llegar a todos los controles con Tab.
  • El foco visible se aprecia claramente.
  • El orden de tabulación es lógico.
  • No hay trampas de teclado.
  • Los modales devuelven el foco al cerrarse.

3.8 ARIA: cuándo usarlo ​

ARIA ayuda cuando HTML semántico no es suficiente, pero no debe reemplazar elementos nativos.

Regla práctica:

txt
Primero HTML semántico.
Después ARIA solo si hace falta.

Ejemplo:

html
<button aria-expanded="false" aria-controls="menu-principal">
  Menú
</button>

3.9 Checklist de accesibilidad ​

  • La página tiene un título claro.
  • Hay un único main.
  • Los encabezados siguen una jerarquía lógica.
  • Los enlaces tienen texto descriptivo.
  • Los formularios tienen labels.
  • Los errores se comunican con texto.
  • El contraste es suficiente.
  • La interfaz funciona con teclado.
  • Las imágenes informativas tienen texto alternativo.
  • No se usa color como único medio de comunicación.

3.10 Buenas prácticas ​

  • Diseña accesibilidad desde el inicio.
  • Prueba con teclado durante el desarrollo.
  • Usa componentes nativos cuando sea posible.
  • Incluye estados de foco visibles.
  • Redacta mensajes simples y directos.
  • Revisa contraste en texto, botones y alertas.

3.11 Errores comunes ​

  • Usar div clicables en lugar de botones.
  • Quitar el contorno de foco sin alternativa visible.
  • Poner placeholder como única etiqueta de un campo.
  • Escribir enlaces como "haz clic aquí".
  • Usar iconos sin texto accesible.

3.12 Chuleta rápida ​

txt
button = acción
link = navegación
label = nombre de campo
alt = descripción de imagen
focus = ubicación del teclado
ARIA = complemento, no sustituto

Recursos relacionados ​