Errores de accesibilidad en webs de transporte público: barreras para moverse por la ciudad

 

¿Por qué son importantes los estilos alternativos en una página web?

 

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a hablar de la importancia de ofrecer estilos alternativos en una página web.

Si se les pregunta a los usuarios de la Web cómo es una página web “buena”, probablemente la mayoría pensará en un diseño visual atractivo, con colores armónicos, tipografías modernas y animaciones, muchas animaciones. Y no les faltaría razón. Pero ¿qué pasa cuando este diseño, pensado para la mayoría, no funciona para todos?

A las páginas web acceden miles de millones de usuarios, muchos de ellos con necesidades, preferencias y contextos de uso diferentes. En especial, las personas con discapacidad muchas veces experimentan problemas, barreras, al navegar por las páginas web.

Por ejemplo, este artículo del prestigioso periódico The New York Times tiene un importante problema de contraste en el título del artículo y en la entradilla. [P] Una persona sin discapacidad seguramente leerá con algunos problemas el título y la entradilla. Pero una persona con discapacidad visual o discapacidad cognitiva quizás sea incapaz de leerlo y entenderlo.

Este problema es muy fácil de resolver.

Los diseñadores web del periódico The New York Times podrían simplemente añadir un fondo semitransparente al título y a la entradilla que aumentase el contraste entre el texto y la fotografía de fondo.

¿Y esto cómo se hace? Seguramente pensarás que es difícil o requiere mucho tiempo y por eso no lo han hecho. Bueno, en realidad, en lo que he tardado en sacarme un moco de la nariz he añadido el código necesario para resolver este problema.

Y entonces, ¿por qué no lo han hecho? Bueno, podemos pensar en muchas razones, pero por mi experiencia, normalmente, el propietario o el diseñador del sitio quiere que su sitio web se vea exactamente de una forma concreta, aunque eso sea negativo para muchos usuarios.

La solución a esta situación es sencilla, podemos diseñar nuestro sitio web con un estilo principal y con todas las mierdas que queramos, aunque nos estemos pegando un tiro en el pie.

Pero a la vez, también debemos ofrecer estilos alternativos para desarrollar una web verdaderamente universal y robusta.

Los estilos alternativos son versiones de nuestra hoja de estilos principal que ofrecen una experiencia de usuario diferente. No son un sitio web nuevo, sino una adaptación del mismo contenido. Los más comunes son:

Estilo oscuro: para reducir la fatiga visual en entornos con poca luz o por preferencia personal.

Estilo de alto contraste: para usuarios con baja visión.

Estilo texto grande: para usuarios con baja visión.

Estilo daltonismo: que ajusta la paleta de colores para garantizar que la información se perciba correctamente.

Estilo de lectura: que elimina elementos superfluos como menús y publicidad para concentrarse en el contenido principal.

Estilo para impresión: elimina elementos superfluos como menús y adapta el contenido al tamaño de una hoja de papel.

Hoy en día, muchos sitios web ofrecen algunos de estos estilos alternativos. Por ejemplo, en mi sitio web sobre accesibilidad web ofrezco una opción de configuración que permite que el usuario seleccione un estilo que se adapte mejor a sus necesidades: el estilo principal, dos estilos de alto contraste (amarillo sobre negro y verde sobre negro), colores de bajo contrate y estilos con diferentes tipos de letra.

Aquí tenemos otro ejemplo, la web de La Moncloa, que por defecto aparece con el modo claro, pero que tiene una opción para cambiar al modo oscuro.

¿Y cómo se ofrecen los estilos alternativos en un sitio web? Existen varias formas, en el vídeo “CSS: definición y uso de estilos alternativos” te explico una forma que se puede emplear en Mozilla Firefox, de forma nativa, y en otros navegadores web con alguna extensión. Pero en la mayoría de los casos, tendrás que proporciona un selector de estilos como el que hemos visto en la web de La Moncloa.

Sobre el estilo para impresión te recomiendo los siguientes vídeos. Por un lado, te recomiendo que veas el vídeo “CSS: hoja de estilo para impresión”, del estudiante Samuel López Brufal. En este vídeo se enseña a crear un CSS correcto para imprimir las páginas web.

Muchos diseñadores no optimizan las páginas web para impresión, lo que genera confusión al imprimir.

Samuel propone los siguientes consejos para una correcta hoja de estilo para impresión:

Diseño adaptativo para impresión.

Uso de tonos blancos y negros (o colores originales si es necesario).

Incluir las URLs visibles para referencia posterior.

Y aplicar filtros CSS para mejorar los resultados.

En el vídeo de Samuel también se explica que se deben evitar las divisiones en tablas y listas con las siguientes propiedades de CSS: page-break-inside, page-break-before y page-break-after.

En realidad, estas propiedades de CSS están obsoletas y en su lugar se deben emplear las propiedades break-after, break-before y break-inside.

El tema de evitar las divisiones en tablas y listas lo tienes desarrollado con más profundidad en los siguientes vídeos. “CSS: cómo controlar los puntos de corte cuando se imprime una página”, parte 1 y parte 2. Y con esto finaliza este vídeo en el que te he explicado la importancia de los estilos alternativos en las páginas web.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

WAI-ARIA: Accesibilidad en Aplicaciones Web Modernas (2)

WAI-ARIA se basa en tres pilares: roles (qué es un elemento), propiedades (cómo es y cómo se nombra) y estados (su situación dinámica). Estos atributos solo afectan al árbol de accesibilidad y no sustituyen a CSS ni JavaScript. Los roles permiten estructurar la página y definir widgets complejos; las propiedades aseguran nombres accesibles y ocultan elementos irrelevantes; y los estados comunican cambios dinámicos. ARIA requiere soporte completo de teclado y correcta gestión del foco. No reemplaza al HTML semántico, sino que lo complementa, y su correcta implementación debe validarse con herramientas automáticas y lectores de pantalla.

WAI-ARIA: Accesibilidad en Aplicaciones Web Modernas (1)

WAI-ARIA es una especificación del W3C destinada a mejorar la accesibilidad de aplicaciones web dinámicas e interactivas cuando el HTML nativo resulta insuficiente. Proporciona atributos que añaden semántica, roles y estados comprensibles para los lectores de pantalla, actuando como puente entre JavaScript y los productos de apoyo. Su uso debe ser excepcional y seguir cinco reglas fundamentales: priorizar elementos nativos, no alterar semántica innecesariamente, garantizar operación por teclado, no ocultar elementos interactivos y asegurar un nombre accesible. WAI-ARIA modifica el árbol de accesibilidad del navegador, no la presentación visual.

Analizar la accesibilidad de una página web con la consola de JavaScript

En Using the browser console for accessibility testing se explica cómo se puede usar la consola de JavaScript para analizar la accesibilidad de una página web.

Un ejemplo sencillo:

Here’s a simple script you can try first. It shows every link on the page as a NodeList in the console, which is useful for quick checks.

document.querySelectorAll("a");

Or you could highlight all links on the page:

document.querySelectorAll("a").forEach(a => a.style.outline = "2px solid red");

Some people turn snippets like these into bookmarklets (small saved JavaScript actions). That can be useful, but for teaching and quick testing, the console is often easier. I explain why at the end of the article.

Animaciones accesibles en páginas web

Un ejemplo de la primera regla de ARIA

En I Learned The First Rule of ARIA the Hard Way explican un ejemplo real de violación de la primera regla de ARIA:

If you can use a native HTML element [HTML51] or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

Actualización de WCAG 3.0

El W3C ha publicado una actualización de W3C Accessibility Guidelines (WCAG) 3.0.

Texto alternativo en las imágenes de los artículos de la editorial Frontiers

La editorial de revistas científicas Frontiers publica los artículos con texto alternativo en las imágenes. Si el autor no proporciona un texto alternativo, se emplea la inteligencia artificial para generar uno de forma automática.

En la guía para autores de Frontiers podemos leer la explicación Alternative text (alt text):

As part of our commitment to make science open for all, we are dedicated to accessibility in our publications. One way you can make your manuscript more accessible is by including alternative text (alt text) with all figures or images.

What is alt text?

Alt text is a short visual description of the contents of an image. Alt text is not the same as a caption, as it provides a description of the entire image. It is included in the manuscript alongside the image, but in the background, not visible on the page.

Good alt text will be specific, concise, and not overly descriptive. It should include any essential text or data that appears on the image and would be lost if a user couldn't see it.

See Harvard University's guide for more tips on writing good alt text.

Why is alt text important?

It allows people using screen reading technology to clearly understand the contents of an image, therefore making your manuscript more accessible for readers with visual impairments. This is also useful for anyone else who can't view the image - if it doesn't load quickly, for instance .

Alt text can also provide better descriptions to search engine crawlers, helping with article discoverability and indexing.

For more support, our partner AuthorMate offers an alt-text writing service.

Aumento de los estudiantes con discapacidad en las universidades más prestigiosas de Estados Unidos

Curioso lo que se explica en Why Are 38 Percent of Stanford Students Saying They're Disabled?.

El artículo analiza el notable aumento de estudiantes que solicitan adaptaciones académicas por discapacidad en universidades de élite de Estados Unidos. Según datos citados de un artículo de The Atlantic, entre el 20 % y el 38 % del alumnado de centros como Harvard, Brown, Amherst o Stanford figura como discapacitado, principalmente por condiciones de salud mental o trastornos del aprendizaje como ansiedad, depresión o TDAH. Esta situación resulta paradójica, dado que estas universidades son extremadamente selectivas y, en contraste, los community colleges —donde sería más esperable encontrar mayores dificultades académicas— presentan tasas muy inferiores de adaptaciones.

El texto sostiene que, aunque algunos estudiantes necesitan realmente estos apoyos, el marco legal del Americans with Disabilities Act permite obtener adaptaciones amplias con requisitos poco exigentes. Profesores entrevistados sugieren que muchos alumnos recurren a diagnósticos para evitar el fracaso académico, especialmente solicitando más tiempo en exámenes.

Guía de AccesibleEU sobre accesibilidad cognitiva en español

En Guía de AccesibleEU sobre accesibilidad cognitiva, ahora disponible en todas las lenguas de la UE podemos leer:

La accesibilidad cognitiva es un concepto en crecimiento. Aunque hay varias pautas disponibles para abordarlo desde el punto de vista de la comunicación, la prestación de servicios y el entorno construido, todavía queda mucho trabajo por hacer.

Esta guía tiene como objetivo ofrecer información sobre la accesibilidad cognitiva y sus conceptos relacionados para profesionales que no están familiarizados con este campo. Les proporciona los conocimientos e información actuales sobre las principales barreras a las que se enfrentan las personas con necesidades de accesibilidad cognitiva, así como directrices básicas, metodologías de evaluación y buenas prácticas existentes.

Audiodescripción en YouTube

YouTube ya admite añadir una pista con audiodescripción, lo podemos leer en How to Create Audio Description for YouTube Videos:

While once only available for select creators, YouTube Audio Description is now available for any creator that has access to multi-language audio! This feature allows viewers to easily toggle the descriptive audio on and off.

Previously, if a viewer wanted to access audio description for a YouTube video, they would need to access a separate version of the video that was audio-described.

Why is this important?

YouTube currently has 2.53 billion active users, with 122 million people using the platform every day.

71% of people with disabilities leave a website immediately if it’s not accessible.

You don’t have to be a mathematician to understand these stats and their implications. If you want your YouTube videos to reach their full potential, you need to make them accessible with captions and audio description.

If you want your content to reach the millions of people who are blind or have low vision, keep reading to learn how to create and add audio description to YouTube videos.

Dos microcredenciales de la Universidad de Lleida

Desde la Universidad de Lleida (UdL) van a ofertar dos cursos de accesibilidad:

Una Microcredencial Universitaria en Documentos Accesibles (2 ECTS):

https://www.linkedin.com/feed/update/urn:li:activity:7424858067793776641/

Aún no está publicado en la web de la UdL, pero para ver la previsión, los interesados pueden deja sus datos para reserva una plaza: 

https://forms.gle/wcTRyfBXkjhTGULv5

Y el otro curso, una Microcredencial Universitaria en Introducción a la Accesibilidad  Digital (4 ECTS):

https://www.linkedin.com/feed/update/urn:li:activity:7427624746931945473/

Aún no está publicado en la web de la UdL, pero para ver la previsión, los interesados pueden deja sus datos para reserva una plaza:

https://forms.gle/w7UY6MHhgYDSVUFh6gdyKeic

Subtítulos expresivos en YouTube

En Expressive Captions are now available on YouTube podemos leer:

Expressive captions are now available on YouTube videos in English across all devices, providing our viewers a more immersive content experience by displaying the intensity of speech in all caps, expressions of sounds like sighs and gasps, as well as noises from the environment.

YouTube videos in English uploaded after October showcase these expressive captions, and we’ll continue rolling this feature out on more videos.

Expressive captions use AI to communicate things like tone, volume, environmental cues and human noises from the audio playing on a device.

Accesibilidad y SEO

La etiqueta output es una live region

En HTML’s Best Kept Secret: The <output> Tag explican que la etiqueta <output> tiene el role="status" de forma nativa, por lo que cuando se actualice su contenido, un lector de pantalla debería anunciar el nuevo contenido.

Lo he probado con Google Chrome y NVDA y funciona:

Lo he probado con Google Chrome y Microsoft Narrador y también funciona:

Recreo - accesibilidad

La gente de Recreo me ha invitado a participar en el siguiente evento el 5 de febrero en Alicante:

¡Hola! Arrancamos la semana con súper plan 👀 El 5 de febrero no te pierdas recreo x Alicante con nuestros amigos de weAAAre ❤️❤️❤️ y el amor de Friends of Figma Alicante. Hablaremos de diseño sin barreras, cómo hacer que accesibilidad y estética vayan de la mano y con una mesa de debate espectacular.

1. Roberto Ramos, gerente y director creativo de Small
2. Sergio Luján, profesor de la Universitat d'Alacant, investigador y teórico sobre accesibilidad
3. María Arseguet, Design System Lead enfocada en accesibilidad en Hi Experience
4. Carlos Garrido, fundador de weAAAre y desarrollador
5. Jorge Rebate, User Experience Lead en Fundación ONCE / Inserta y Profesor de la Universitat Oberta de Catalunya

Estaremos Antonio Díaz, Dani Sánchez y yo intentando hacer lo que podamos para moderar el debate (que con tanto nivel va a estar difícil jiji). Y nada de esto hubiera sido posible sin las ganazas de Carlos Garrido, Raúl Aliaga,Vanesa Marcos y ULab Ideas Meeting Point 🙌

1️⃣ La entradas presenciales ya las tenéis disponibles en nuestra web: https://lnkd.in/dJ26Jzua
2️⃣ Si prefieres remoto este es el link de inscripción de Zoom : https://lnkd.in/egiyS-qS

¡No os lo perdáis que hay un montón de sorpresas y regalitos!