Categoría: Accesibilidad

Artículos sobre accesibilidad y diseño para todos

Qué es WCAG(Web Content Accessibility Guidelines)

Publicado el

La accesibilidad en la Web es un aspecto esencial para garantizar que todas las personas, independientemente de sus habilidades o necesidades especiales, puedan participar en la sociedad de la información. Para promover esta inclusividad, nacieron las WCAG, o Pautas de Accesibilidad para el Contenido Web (Web Content Accessibility Guidelines).
WCAG es un conjunto de pautas internacionales diseñadas para mejorar la accesibilidad web. Estas pautas proporcionan recomendaciones para que sitios web, aplicaciones y contenidos digitales sean accesibles a personas con discapacidad.
WCAG fue desarrollada por el World Wide Web Consortium (W3C), una organización internacional que trabaja en la estandarización de las tecnologías para la Web.
Dentro del W3C, el Web Accessibility Initiative (WAI) lidera los esfuerzos relacionados con la accesibilidad web.
Los perfiles de discapacidad incluidos en WCAG son la discapacidad visual, auditiva, motriz y cognitiva.
Las WCAG son ampliamente utilizadas por desarrolladores, diseñadores, empresas y gobiernos para garantizar que sus plataformas digitales sean inclusivas. También sirven como referencia para cumplir con legislaciones y normativas de accesibilidad en varios países.

Objetivo de las WCAG

El objetivo principal de las WCAG es garantizar que la web sea accesible para todos.

La inclusión digital no solo es un derecho humano fundamental, sino que también beneficia a las empresas y a la sociedad en general. Los sitios web accesibles pueden llegar a una audiencia más amplia, mejorar el SEO y reducir riesgos legales.
Además, las WCAG ofrecen una guía clara y estructurada para abordar las barreras más comunes en la web, asegurando que los desarrolladores y diseñadores puedan crear experiencias más igualitarias para todas las personas.

En los años 90, cuando internet comenzó a masificarse, se hizo evidente que las tecnologías digitales podían ser una barrera significativa para las personas con discapacidad.
Por ello, en 1999 se publicó la primera versión de WCAG (WCAG 1.0). Desde entonces, ha evolucionado para reflejar los cambios en las tecnologías y las necesidades de los usuarios, con WCAG 2.1 como la versión actual y que se utiliza como referencia para leyes y normativas para la accesibilidad digital.

Estructura de las WCAG

Las WCAG están organizadas en torno a cuatro principios fundamentales, conocidos como los principios POUR: perceptible, operable, comprensible y robusto.

Principios

Estos son los cuatro principios de WCAG:
• Perceptible: La información y los componentes de la interfaz de usuario deben ser presentados de forma que los usuarios puedan percibirlos. Por ejemplo, ofrecer alternativas textuales para contenido visual o auditivo.
• Operable: Los usuarios deben poder navegar y usar los elementos de la interfaz. Esto incluye garantizar que se pueda interactuar con el contenido utilizando un teclado y ofrecer suficiente tiempo para leer e interactuar con el contenido.
• Comprensible: La información y el funcionamiento de la interfaz deben ser comprensibles. Por ejemplo, utilizar un lenguaje claro y proporcionar ayuda para la corrección de errores.
• Robusto: El contenido debe ser suficientemente robusto para ser interpretado de manera confiable por diferentes herramientas, incluidas las herramientas de asistencia como lectores de pantalla o sistemas de control por voz.

Pautas en las WCAG

Cada uno de los principios POUR incluye una serie de pautas que tratan aspectos específicos de accesibilidad.

Cada pauta proporciona orientación concreta mediante técnicas y ejemplos que permiten a los desarrolladores implementar accesibilidad de manera efectiva evitando la creación de barreras de accesibilidad.

Criterios de éxito

Dentro de cada pauta hay varios criterios de éxito relacionados con esa pauta.

Los criterios de éxito son los estándares medibles que determinan si un sitio o aplicación cumple con las pautas. Estos criterios se dividen en tres niveles de conformidad.

Un ejemplo específico de criterio de éxito es el requisito de que todo contenido de video tenga subtítulos sincronizados (Nivel A) o que los mecanismos  de navegación deben ser consistentes en todas las páginas de un sitio web (Nivel AA).
Los criterios de éxito están diseñados para ser verificables mediante pruebas automáticas o evaluaciones manuales, facilitando el proceso de validación de accesibilidad.

Niveles de conformidad

Estos son los tres niveles de conformidad de los criterios de éxito en las WCAG:
• Nivel A: El mínimo indispensable para la accesibilidad simple. Este nivel es insuficiente en la mayoría de marcos legales del mundo.
• Nivel AA: Un nivel de accesibilidad recomendado y generalmente aceptado como suficiente en la mayoría de marcos legales en el mundo.
• Nivel AAA: El nivel más alto de accesibilidad, alcanzable en contextos específicos.

Detección de barreras de accesibilidad con TAW

Publicado el

El Test de Accesibilidad Web (TAW) es una herramienta en línea que ayuda a evaluar la accesibilidad de sitios web según las directrices del estándar WCAG (Web Content Accessibility Guidelines). Diseñada para identificar problemas de accesibilidad, TAW es especialmente útil para desarrolladores, diseñadores y responsables de contenido que desean crear experiencias inclusivas para todos los usuarios, incluidas personas con discapacidad.

Al igual que Wave, TAW es una herramienta de validación automática de barreras de accesibilidad web.

Esta herramienta evalúa criterios como:
• Texto alternativo en imágenes.
• Contraste de colores.
• Navegación mediante teclado.
• Uso correcto de etiquetas HTML y roles ARIA.

¿Cómo utilizar TAW?

Para utilizar TAW debemos visitar su sitio web oficial. Allí encontraremos un formulario en el que introducir la URL de la página que queremos revisar. Además, dentro de las opciones podremos elegir entre nivel A, nivel AA y nivel AAA. Tras introducir la dirección de la página que queremos evaluar debemos pulsar el botón analizar.

Tras unos segundos se nos cargará la página de resultados.

A diferencia de Wave y otras herramientas automáticas TAW no dispone de widget para revisar páginas en local. Además TAW utiliza WCAG 2.1 frente a otras herramientas que poco a poco van incorporando WCAG 2.2.

Comparando herramientas

Si realizamos una evaluación con TAW y Wave podremos comprobar que los informes de resultados son parecidos pero no exactamente iguales. Esto se debe a que los algoritmos de detección de barreras utilizados por TAW y Wave no son iguales aunque utilicen los criterios e interpretaciones definidos en WCAG.

TAW proporciona la información en español y portugués por lo que se hace más sencillo de consultar para personas que desarrollen o diseñen en estas lenguas.

Lo ideal es poder utilizar estas dos herramientas para procurar que todas las barreras posibles sean solucionadas. Siempre recordando que las herramientas automáticas de validación de barreras de accesibilidad no son 100% efectivas ni fiables.

Seguridad digital básica con ZERO

Publicado el

La seguridad en línea es una preocupación creciente, especialmente para entornos altamente sensibles que manejan información crítica. Pero la seguridad digital no es sólo necesaria para el ámbito empresarial, también es necesaria para garantizar la seguridad de todos los miembros de una familia. Es habitual que todas las personas de una familia tengan acceso a Internet pero no todos los miembros de esa familia conocen los peligros de la red y de cómo evitarlos. Es cada vez más clara la necesidad de un sistema que garantice la seguridad a la hora de acceder a Internet por aquellas personas que desconocen o no saben identificar posibles estafas o fraudes digitales. Para abordar esta necesidad, dns0.eu ha desarrollado ZERO, un servicio diseñado para ofrecer una protección reforzada contra amenazas cibernéticas emergentes.
Los cibercriminales emplean tácticas cada vez más sofisticadas para comprometer sistemas y datos. Una estrategia común es el uso de dominios maliciosos que, en las primeras horas de actividad, pueden evadir las medidas de seguridad tradicionales. ZERO se centra en detectar y bloquear estos dominios combinando  técnicas avanzadas que identifican automáticamente patrones de alto riesgo.
Este servicio ofrece las siguientes ventajas:
• Detección temprana de amenazas: Al identificar y bloquear dominios maliciosos recién registrados o activados, ZERO reduce significativamente el riesgo de ataques antes de que causen daño.
• Protección contra técnicas avanzadas: ZERO aborda amenazas como el typosquatting, homógrafos IDN y algoritmos de generación de dominios (DGA), que suelen ser utilizados para engañar a los usuarios y eludir sistemas de seguridad convencionales.
• Bloqueo de dominios de alto riesgo: Al restringir el acceso a dominios de nivel superior (TLD) conocidos por ser utilizados por actores malintencionados, se minimiza la exposición a posibles amenazas.
Pero como todo servicio automatizado ZERO también tiene sus fallos:
• Posibles falsos positivos: La implementación de filtros estrictos puede resultar en el bloqueo de dominios legítimos que comparten características con los maliciosos, lo que podría afectar la experiencia del usuario.
• Requiere actualización constante: Para mantener su eficacia, ZERO necesita una actualización continua de su base de datos de amenazas y ajustes en sus heurísticas, lo que implica un esfuerzo sostenido en ciberseguridad.
• Limitaciones en entornos dinámicos: En organizaciones con necesidades de acceso a una amplia variedad de dominios, las restricciones de ZERO podrían interferir con operaciones legítimas, requiriendo configuraciones personalizadas.
Con todo esto ZERO puede resultar un servicio indispensable para mantener seguros a los miembros más jóvenes y más ancianos de la familia.

Macdown, un editor de textos sencillos en Markdown para MacOS

Publicado el

A la hora de escribir textos en formato Markdown, aunque podemos utilizar cualquier editor en texto plano, a veces nos resulta muy útil poder ver el resultado de la maquetación de nuestro documento para detectar posibles errores en el marcado de nuestro documento.

Un editor básico de Markdown nos debe permitir poder visualizar el resultado de nuestro documento en una vista web. Esto es lo que nos permite Macdown. Este editor de código abierto y de distribución gratuita nos permite editar documentos en formato Markdown, visualizar su contenido en la vista web y exportar nuestros documentos a formato PDF y HTML.

Este editor resulta muy accesible con los diversos productos de apoyo para MacOS y su uso es bastante sencillo.

La importancia de los encabezados para la accesibilidad web y móvil

Publicado el

Cuando navegamos por una interfaz web o una aplicación móvil, probablemente no somos conscientes de la importancia que tienen los encabezados. Para la mayoría de los usuarios estas marcas semánticas sólo se aprecian por un cambio de tamaño del texto o por un resaltado de su aspecto visual pero para personas con discapacidad visual o cognitiva resultan imprescindibles para comprender mejor la interfaz que están navegando.

¿Qué son los encabezados?

Los encabezados son elementos que organizan y estructuran el contenido de una página o pantalla. En HTML, estos se definen mediante marcas semánticas o etiquetas como <h1>, <h2>, <h3>, y así sucesivamente hasta <h6>. En interfaces móviles, los encabezados suelen representarse como texto destacado o títulos que dividen secciones de contenido y utilizan atributos de la API de accesibilidad para que esos bloques de texto sean identificados como encabezados semánticos.

Para los usuarios sin discapacidad visual, los encabezados facilitan una comprensión visual rápida del contenido y su jerarquía. en cambio, para los usuarios que dependen de tecnologías de asistencia como lectores de pantalla, los encabezados son mucho más que un simple formato: son un mapa estructural que permite moverse rápidamente por la página o la app.

Por ejemplo, una persona ciega que usa un lector de pantalla puede saltar entre los encabezados para encontrar secciones específicas sin tener que escuchar todo el contenido desde el principio. Esto es especialmente útil en páginas con mucho texto o pantallas móviles con varias secciones de información.
Para las personas con discapacidad cognitiva esta estructura de encabezados les permite asimilar y comprender cómo se ha estructurado la información y los elementos de navegación en la interfaz.

Encabezados en WCAG

Las Pautas de Accesibilidad para el Contenido Web (WCAG) incluyen un criterio específico que aborda la correcta implementación de los encabezados. Este criterio está relacionado con el principio de Perceptible y se resume así:

Criterio 2.4.10 – Encabezados de sección (Section Headings)

Este criterio establece que, si el contenido está dividido en secciones, cada una debe contar con un encabezado descriptivo que refleje su propósito o tema. Esto no solo mejora la navegación, sino también la comprensión del contenido. Puedes leer más detalles sobre el criterio 2.4.10 en la página oficial del W3C.

Para cumplir con este criterio debemos asegurarnos de:
• Usar encabezados de forma jerárquica y lógica (por ejemplo, <h1> para el título principal, <h2> para subtítulos, etc.).
• Los encabezados deben ser descriptivos. Un encabezado como “Servicios” es claro, pero uno como “Más información” es ambiguo.
• Evitar saltos innecesarios en los niveles de encabezado (por ejemplo, pasar de un <h1> directamente a un <h3> sin un <h2> intermedio).

Buenas prácticas

A la hora de estructurar los contenidos de una interfaz web o de una pantalla de una aplicación es aconsejable seguir los siguientes puntos:
1. Respetar una estructura jerárquica

El encabezado principal de la página o pantalla debe ser un <h1>. A partir de ahí, usa <h2> para las subsecciones principales, <h3> para las subsecciones de estas, y así sucesivamente. Esto crea un flujo lógico que las tecnologías de asistencia pueden interpretar fácilmente.

Ejemplo en HTML:

<h1>Recetas saludables</h1>
<h2>Desayunos</h2>
<h3>Zumos y batidos saludables</h3>
<h3>Tostadas con aguacate</h3>
<h2>Cenas</h2>
<h3>Ensaladas ligeras</h3>
<h3>Sopas nutritivas</h3>

2. Prohibido usar encabezados para aplicar un estilo visual a un texto

Es común usar etiquetas de encabezado simplemente porque hacen el texto más grande o más llamativo. Esto es un error, ya que confunde a los usuarios de lectores de pantalla. Si es necesario aplicar un estilo concreto a un texto grande sin que sea un encabezado, es aconsejable usar estilos CSS en lugar de etiquetas como <h1>.

3. Los encabezados deben ser claros y concisos

Un buen encabezado es breve y refleja con precisión el contenido de su sección. Por ejemplo, “Configuración avanzada” es mejor que “Detalles sobre las configuraciones avanzadas”.

Cómo comprobar la accesibilidad de los encabezados

Muchas herramientas automatizadas para la detección de barreras de accesibilidad identifican la mayoría de problemas relacionados con el criterio WCAG 2.4.10. Tanto Wave como Lighthouse o Axe pueden detectar si falta algún encabezado o si se han utilizado de manera incorrecta.
En cualquier caso es muy recomendable realizar una verificación manual utilizando un lector de pantallas como NVDA, VoiceOver, TalkBack o JAWS. Todos estos lectores de pantalla incorporan funciones para navegar por encabezados o mostrar una lista con los encabezados detectados.

Cómo mostrar la pantalla de tu teléfono Android en tu Mac

Publicado el

En un artículo anterior aprendimos a mostrar la pantalla de nuestro iPhone en el mac.

Esta misma necesidad nos puede surgir pero con un teléfono Android. El programa Quicktime no detecta a los teléfonos y dispositivos Android como fuentes de video por lo que necesitaremos otra aplicación como puede ser scrcpy.

¿Qué es scrcpy?

El paquete scrcpy es una herramienta que permite reflejar y controlar dispositivos Android desde un ordenador. Es ideal para realizar demostraciones en tiempo real, capturar la pantalla para tutoriales o pruebas, y mejorar la productividad cuando necesitas interactuar con tu dispositivo móvil sin tener que tocarlo. Además, es una solución ligera, sin necesidad de instalar aplicaciones en el teléfono, ya que utiliza ADB (Android Debug Bridge) para conectarse a tu dispositivo.

Su instalación es sencilla ya que se distribuye como un paquete de Homebrew.

Para instalar scrcpy simplemente deberemos ejecutar este comando de brew en la Terminal de MacOS:

brew install scrcpy

Una vez instalado para poder utilizarlo deberemos activar el modo de depuración por USB en nuestro teléfono Android. Esta opción está disponible dentro del menú de opciones para desarrolladores del teléfono.

Una vez activado este modo de depuración es necesario conectar el teléfono Android al Mac utilizando un cable USB. El teléfono preguntará si confías en el ordenador al que se ha conectado. Debemos responder que sí.

En la Terminal de Mac ejecutaremos el comando:

scrcpy

Aparecerá una nueva ventana con el contenido de nuestro teléfono y, además, si el teléfono está ejecutando una versión de Android moderna, también podremos escuchar el sonido del teléfono en nuestro Mac. De esta forma podremos compartir el contenido visual y auditivo de nuestro teléfono Android en videoconferencias y reuniones compartiendo la pantalla de nuestro Mac.

Puedes consultar más opciones y comandos de scrcpy en la página oficial del proyecto scrcpy.