Unidad 10 / 11

Inteligencia artificial en accesibilidad y diseño inclusivo

Ganancias:

  • Capacidad para controlar y mejorar el contraste de color, texto alternativo, acceso al teclado y criterios WCAG con soporte de inteligencia artificial.
  • Capacidad para generar y verificar textos de accesibilidad, como experiencia de lector de pantalla, texto alternativo y etiquetas de formularios con inteligencia artificial.
  • Comprender el límite de validar las recomendaciones de accesibilidad de la IA con tecnología de asistencia real y pruebas de usuarios

Accesibilidad (a11y para abreviar) es la capacidad de un producto para ser utilizado por todos, incluidas las personas con discapacidad: un usuario con discapacidad visual puede navegar con un lector de pantalla (software auxiliar que convierte texto en voz), una persona con dificultades motoras puede hacer cualquier cosa con un teclado, una persona daltónica puede recibir información sin depender del color. El diseño inclusivo es más amplio: pone la diversidad humana en el centro del diseño, incluyendo la edad, el idioma, la cultura, la discapacidad temporal (brazo roto) o la discapacidad contextual (pantalla al sol). La accesibilidad no es un “extra” sino una responsabilidad fundamental y un requisito legal en la mayoría de los países. La IA es un potente preselección y generador de borradores en este campo; pero la verdadera accesibilidad sólo se confirma mediante tecnología de asistencia real y pruebas de usuarios.

WCAG y áreas de control clave

WCAG (Pautas de accesibilidad al contenido web) es un conjunto de criterios de accesibilidad aceptados internacionalmente; Generalmente se apunta al nivel AA. Tiene cuatro principios: el contenido debe ser perceptible, la interfaz debe ser utilizable, la información debe ser comprensible y técnicamente sólida. Las áreas de control más comunes en la práctica son:

  • Contraste de color: ¿Es suficiente la diferencia entre el texto y el fondo? (Para AA, al menos una proporción de 4,5:1 en texto normal).
  • Texto alternativo (alt text): ¿Las imágenes tienen un texto equivalente que las explique al lector de pantalla?
  • Acceso por teclado: ¿Se puede hacer algo sin un mouse? ¿Tiene sentido el orden de enfoque?
  • Información solo sobre el color: frases como "Rellenar campos rojos" excluyen al usuario daltónico.
  • Etiquetas de formulario: ¿Cada campo de entrada tiene una etiqueta que leerá el lector de pantalla?
  • Objetivo táctil: ¿Son los botones lo suficientemente grandes como para presionarlos cómodamente con los dedos?

La IA puede realizar un análisis preliminar rápido en muchas de estas áreas: puede proporcionar algo de texto y preguntar "¿es suficiente el contraste?", proporcionar una descripción de la imagen y preguntar "sugerir texto alternativo", proporcionar una descripción de la interfaz y preguntar "¿cuáles son los problemas de acceso al teclado?".

Precaución: El hecho de que la IA diga "parece accesible" no es garantía de accesibilidad. La verificación automática detecta sólo algunos de los errores WCAG; El resto surgirá con el uso real.

Texto alternativo: el secreto del buen texto alternativo

El texto alternativo reemplaza la imagen para el usuario con discapacidad visual. Un buen texto alternativo transmite la función y el significado de la imagen, no su detalle decorativo. El texto alternativo para un ícono "agregar al carrito" debe ser "Agregar al carrito" y no "imagen del carrito de compras" porque es la acción que le importa al usuario. La IA es buena para generar esquemas de subtexto, pero como no conoce el contexto, puede producir texto demasiado descriptivo o irrelevante. Le preguntas a cada texto alternativo "¿por qué está esta imagen aquí?" Recorta con la pregunta.

visuales

Subtexto débil

Subtexto fuerte

Icono de carrito (botón)

"Icono de carrito, color gris"

"Añadir al carrito"

foto del producto

"imagen"

"Abrigo de invierno azul, vista frontal"

linea decorativa

"Línea de adornos"

(dejar en blanco – decorativo)

Gráficos

"Imagen gráfica"

"Ventas 2024: aumentan cada trimestre"

Lenguaje y alcance inclusivos

La accesibilidad no se limita a los controles técnicos; El lenguaje también es inclusivo. El texto que asuma el género (“usuario y su cónyuge”), excluya según su capacidad (“mirada”, “oír fácilmente”) o contenga suposiciones culturales excluirá a algunos usuarios. La IA puede escanear el texto desde esta perspectiva, pero debe asegurarse de que el lenguaje “neutral” que sugiere siga siendo natural y comprensible; La corrección excesiva puede hacer que el texto sea incómodo.

tres mini casos

Caso 1: errores de contraste detectados tempranamente. Un equipo hizo que la IA escaneara los colores del texto de 20 pantallas y determinó que el contraste estaba por debajo del umbral AA en 7 lugares. Las correcciones se hicieron sin entrar en desarrollo; Se evitó el coste de la corrección posterior. Pero el equipo aún no se saltó la prueba del lector de pantalla real.

Caso 2: solo se corrigió la información relacionada con el color. Un formulario mostraba campos de error solo con un borde rojo. La IA señaló esto; El equipo también agregó texto e íconos a cada error. Los usuarios daltónicos ahora pueden ver el error. Lección: el color por sí solo no puede transmitir información.

Caso 3: La IA engañó la aprobación. Un diseñador se saltó las pruebas del lector de pantalla porque calificó la IA de "accesible". En la prueba real, resultó que el orden de enfoque era confuso y algunos botones no se leían en absoluto. Lección: la confirmación automática es el comienzo; Las pruebas reales de tecnología de asistencia son obligatorias.

Indicaciones copiables

Escanee previamente la descripción de esta interfaz para verificar la accesibilidad: 1) ¿hay información que se transmite únicamente en función del color? 2) ¿hay una etiqueta de texto para cada elemento en el que se puede hacer clic? 3) ¿hay elementos a los que no se puede acceder mediante el teclado? 4) ¿tiene sentido el orden de enfoque? Enumere cada problema y sugerencia. Agregar nota "Se requiere prueba real". Receta: <<texto>>

Sugiera texto alternativo para estas imágenes. Regla: transmitir la FUNCIÓN/significado de la imagen, no el detalle decorativo. Escriba la acción para los iconos de los botones. Para imágenes decorativas, diga "el texto alternativo debe dejarse en blanco". Descripciones de contexto e imagen: <<lista>>

Consulte estos textos para ver si hay lenguaje inclusivo: ¿existen supuestos de género, lenguaje excluyente basado en habilidades (como “ver”, “oír”), supuestos culturales? Sugerir alternativas que sigan siendo naturales; no corregir en exceso.Textos: <<lista>>

Escriba texto de etiqueta y error accesible para este formulario: etiqueta visible para cada campo, descripción para el lector de pantalla y mensaje que describe el error, independientemente del color (texto + icono). Voz y tono: <<tarjeta>>Campos del formulario: <<lista>>

Aviso débil / Aviso fuerte

Débil: "Escribe texto alternativo para esta imagen".

El resultado: “Una imagen” o texto demasiado descriptivo que omite la función.

Fuerte: "Sugerir texto alternativo para estas imágenes; transmitir la función/significado de la imagen; escribir la acción para los íconos de los botones; marcar los decorativos como 'deben dejarse en blanco'".

El resultado: subtextos contextuales, orientados a funciones y precisos.

Diferencia: un mensaje fuerte aporta un enfoque funcional + convención de botones + distinción decorativa.

Errores comunes

  • Confundir la aprobación de la inteligencia artificial con una garantía de accesibilidad. No sustituye a las pruebas reales.
  • Simplemente cargando información en color. Los usuarios daltónicos pierden información.
  • Explicar la imagen, no la función, en el texto alternativo. Se debe escribir una acción para el icono del botón.
  • Dejando la accesibilidad para el final. Si no se inicia en la etapa de estructura alámbrica, será costoso parchearlo más adelante.
  • Lenguaje sobrecorregido. El lenguaje inclusivo que pierde naturalidad también perjudica la comprensibilidad.

En resumen

Accesibilidad significa que el producto está disponible para todos; No es un extra, es una responsabilidad imprescindible y, en la mayoría de lugares, legal. La IA es valiosa como verificación previa rápida y generador de borradores para contraste, texto alternativo, acceso al teclado y escaneo de idiomas inclusivo. Pero la aprobación automática detecta sólo algunos de los errores de las WCAG; La accesibilidad real se confirma mediante pruebas con lectores de pantalla y usuarios reales de tecnología de asistencia. Utilice el modelo como navegador frontal y obtenga pruebas de pruebas reales.

Tarea de aplicación

  1. Escanee previamente una descripción de la interfaz para comprobar su accesibilidad en el primer mensaje.
  2. Corrija únicamente la información basada en el color o los elementos sin etiquetar.
  3. Genere textos alternativos orientados a funciones para los elementos visuales en su pantalla con el segundo mensaje.
  4. Verifique que sus textos tengan un lenguaje inclusivo con el tercer mensaje.
  5. Si es posible, intente la prueba real con un lector de pantalla y observe lo que omite el escaneo automático.

lista de verificación

  • [] Escaneé previamente el contraste, el acceso al teclado y las etiquetas.
  • [] No dejé información basada únicamente en el color.
  • [ ] Escribí los subtextos de forma funcional y dejé los decorativos en blanco.
  • [ ] Hice un control del lenguaje inclusivo, conservé la naturalidad.
  • [ ] No consideré la aprobación automática una garantía de accesibilidad.
  • [ ] Planifiqué/implementé pruebas reales de tecnología de asistencia.