ágina web accesible: llega a más personas en la red

La accesibilidad en Internet garantiza que personas con distintos tipos de limitaciones y necesidades puedan utilizar las páginas web de forma autónoma, sin barreras y sin depender de ayuda externa. El objetivo de una página web accesible es, por tanto, evitar la exclusión de determinados colectivos en el entorno digital, como las personas con discapacidades físicas o cognitivas, y asegurar un acceso equitativo a los contenidos y servicios en línea.

¿Qué es la accesibilidad en Internet?

La accesibilidad en Internet tiene como objetivo permitir que todas las personas, independientemente de sus capacidades o limitaciones, puedan acceder y participar en los contenidos web en igualdad de condiciones. Esto significa que cualquier usuario puede utilizar una página web sin quedar excluido de determinados contenidos o medios debido a una discapacidad. En el contexto de la inclusión digital, la accesibilidad de páginas web es un factor clave que las empresas deberían tener muy en cuenta. Además, las páginas web accesibles también influyen positivamente en el posicionamiento en buscadores.

Las barreras son obstáculos que dificultan o impiden el uso equitativo de los servicios digitales. Aunque la concienciación sobre la accesibilidad en el espacio físico ha aumentado notablemente en los últimos años, en Internet siguen apareciendo barreras con frecuencia, a menudo de forma involuntaria, como consecuencia de decisiones técnicas, de diseño o de contenido. Estudios y ejemplos prácticos muestran que, en particular, los elementos interactivos como los sistemas de registro o los mecanismos de seguridad pueden resultar problemáticos. Así, determinados captchas basados en caracteres distorsionados o pruebas exclusivamente visuales dificultan considerablemente el acceso a los contenidos web para personas con discapacidad visual y no cumplen los requisitos actuales de accesibilidad web.

Estándares para páginas web accesibles

El estándar más importante para la creación de páginas web accesibles son las WCAG en su versión WCAG 2.2 (Web Content Accessibility Guidelines). Se trata de directrices publicadas por el W3C que constituyen el principal referente internacional en materia de accesibilidad de páginas web. Las WCAG 2.2 se centran especialmente en la mejora de la usabilidad, una navegación más clara mediante teclado y foco y una interacción simplificada en dispositivos móviles, dando respuesta a los cambios en los hábitos de uso y a barreras que hasta ahora no estaban suficientemente cubiertas.

Entre los criterios de éxito más relevantes de las WCAG 2.2 se incluyen, entre otros:

• Foco del teclado visible: los elementos interactivos deben ser claramente reconocibles al navegar con el teclado.
• Tamaño mínimo de los elementos de control: las superficies de clic y táctiles deben ser lo suficientemente grandes para evitar errores de uso.
• Alternativas a los gestos de arrastre: las funciones no deben depender exclusivamente del uso de arrastrar y soltar.
• Evitar entradas redundantes: no se debe obligar a introducir la misma información varias veces.
• Autenticación accesible: los procesos de inicio de sesión no deben basarse en tareas cognitivas complejas, como determinados captchas.

Las WCAG 2.2 constituyen así el marco técnico fundamental de la accesibilidad web y sirven también como base para los requisitos legales en Estados Unidos en materia de accesibilidad de páginas web.

Percepción

Muchas páginas web incluyen anuncios parpadeantes, columnas de comentarios con textos muy pequeños y, en algunos casos, incluso música de fondo destinada a reforzar el ambiente o la temática de la página web. Sin embargo, según el tipo y el grado de limitación, algunos usuarios no perciben estos elementos por completo o directamente no llegan a detectarlos.

Las personas ciegas, por ejemplo, navegan por Internet sin estímulos visuales. En su lugar, un lector de pantalla lee el contenido de la página web y transmite la información legible a tecnologías de apoyo. Una línea braille, por ejemplo, convierte el texto en escritura braille para que pueda percibirse mediante el tacto. Las herramientas de texto a voz reproducen los contenidos en formato de audio, lo que permite procesar la información a través del oído. En este contexto, la música de fondo puede resultar especialmente molesta.

Las personas con una discapacidad visual menos grave, entre las que se encuentran muchas personas mayores, sí perciben el contenido visualmente, pero necesitan una ampliación considerable de la pantalla. Las personas con daltonismo, por su parte, no reconocen avisos que se transmiten únicamente mediante el color. Las personas sordas, en cambio, no pueden acceder a la información de archivos de audio puros ni a gran parte de los contenidos de vídeo sin apoyos adicionales.

Comprensión

Personas muy jóvenes, personas mayores o usuarios con discapacidades cognitivas pueden tener dificultades para entender textos cargados de términos técnicos modernos o abreviaturas sin explicación. Del mismo modo, cuando una página web presenta contenidos relacionados entre sí de forma muy dispersa, a muchas personas les resulta complicado identificar el contexto y el sentido global.

Interacción y navegación

Dado que cada vez más personas acceden a las páginas web desde el smartphone, resulta especialmente frustrante cuando los enlaces no se pueden seleccionar con precisión con el dedo. Si una página web no está optimizada para dispositivos móviles y los enlaces aparecen muy juntos y con un tamaño de letra reducido, esto supone además un inconveniente importante para personas mayores o con temblores en las manos.

Para las personas con discapacidad física existen hoy en día numerosas herramientas que facilitan el uso del ordenador: algunas tecnologías registran los movimientos oculares, mientras que otras se controlan mediante el teclado. Una página web accesible debería estar diseñada de forma que pueda utilizarse correctamente con este tipo de tecnologías de apoyo. Si una página web no es navegable en estas condiciones, los posibles clientes que dependen de ellas no podrán acceder a toda la oferta disponible.

Al rellenar formularios, por ejemplo para suscribirse a una newsletter, es habitual que se produzcan errores: la contraseña es demasiado corta o la fecha de nacimiento no se ajusta a los parámetros definidos. Por ello, es fundamental ofrecer indicaciones claras para la corrección de errores. La interacción con una página web incluye también la navegación. Los usuarios que utilizan dispositivos con pantallas pequeñas o trabajan con una ampliación elevada dependen de rutas de navegación adaptadas y de una estructura clara y bien organizada de la página web.

Entradas de datos

Las secciones de comentarios permiten a los usuarios dar su opinión, expresar valoraciones sobre un producto o un contenido y comunicarse con otras personas. Las personas con discapacidad visual suelen utilizar una lupa de pantalla al escribir en el monitor. Esto hace que los elementos se muestren considerablemente más grandes y que aumente la distancia entre el área de lectura y el campo de entrada. Por ello, conviene disponer los elementos de forma visualmente cercana y facilitar así la interacción y el intercambio entre los usuarios.

¿Qué ventajas ofrece el diseño web accesible?

Cuando eliminas barreras en Internet, mejora la usabilidad de tu página web y, con ello, también su posicionamiento en Google. El diseño web accesible resulta, por tanto, rentable desde el punto de vista económico y suele requerir solo un esfuerzo adicional moderado. Otro factor clave para las empresas es que una página web accesible alcanza a un público más amplio, ya que puede ser utilizada por más personas que una página web no accesible.

Diseñar una página web accesible: consejos y ejemplos

Si quieres crear una página web accesible, debes prestar especial atención tanto a la estructura de la información como a los distintos componentes visuales de la presencia web.

Paso 1: garantizar una estructura clara de la información

Estructura tu página web de forma clara y utiliza un lenguaje orientado al usuario. De este modo atraerás a más lectores y, al mismo tiempo, mejorarás tu posicionamiento en buscadores, ya que los motores de búsqueda también evalúan la legibilidad de los textos. Si quieres seguir optimizando el SEO y diseñar una arquitectura de página web comprensible y ordenada, ten en cuenta también los siguientes aspectos:

Paso 2: aplicar estímulos visuales

Poder ampliar las tipografías o modificar los colores ayuda a las personas con discapacidad visual o daltonismo a reconocer mejor los contenidos de una página web. El contenido debe destacar claramente sobre el fondo para facilitar la lectura. Resalta los elementos interactivos mediante botones o marcadores de color, por ejemplo haciendo que un enlace cambie de color cuando los usuarios navegan hasta él con el teclado, pasan el ratón por encima o hacen clic. Además del color, utiliza siempre señales adicionales como números o asteriscos para transmitir información.

Close

Las personas que sufren epilepsia pueden verse en riesgo si una página web contiene gráficos o vídeos que parpadean más de tres veces por segundo. Además, estudios científicos han demostrado que los patrones de rejilla con contornos muy definidos y alto contraste también pueden provocar crisis en personas con epilepsia fotosensible.

Paso 3: presentar la información de forma diversa

Ten en cuenta el diseño web accesible también en el trabajo diario. Ya sea para la optimización en buscadores, con fines de relaciones públicas o para presentar nuevas ofertas de venta, publica contenido nuevo de forma constante. Facilita el acceso a estos contenidos adaptando la información a las distintas necesidades de los usuarios y fomentando así una accesibilidad de páginas web coherente y sostenible.

Un elemento fundamental de una página web accesible, que además desempeña un papel clave en el SEO, es la asignación de textos alternativos a las imágenes. Los rastreadores de los motores de búsqueda y los lectores de pantalla no pueden interpretar el contenido visual, lo mismo ocurre con las personas ciegas. El texto alternativo describe el contenido de la imagen y aporta contexto. También se benefician de los textos alternativos los usuarios con conexiones lentas, en los casos en los que las imágenes se cargan con retraso o no se muestran correctamente.

Transcripciones y subtítulos

La creación continua y puntual de transcripciones y subtítulos requiere un mayor esfuerzo, pero resulta esencial para una página web accesible. Estos recursos permiten preparar los contenidos de audio para personas sordas o con dificultades auditivas. La transcripción, que recoge tanto el contenido hablado como los sonidos y ruidos en formato de texto, debería situarse lo más cerca posible del contenido de audio correspondiente, por ejemplo mediante un botón con enlace al documento.

Los subtítulos facilitan enormemente la comprensión de los vídeos web a las personas sordas. También resultan útiles para usuarios que prefieren no activar el sonido, por ejemplo para no molestar a su entorno. Asimismo, las personas con discapacidades cognitivas o trastornos de atención como el TDAH asimilan mejor la información audiovisual cuando pueden desactivar los ruidos de fondo mediante la configuración del reproductor de vídeo.

Audiodescripción

Generalmente, las personas con una agudeza visual inferior al 30 % se consideran personas con discapacidad visual y, con una agudeza inferior al 2 %, personas ciegas. Perciben los estímulos visuales de forma limitada o no los perciben en absoluto. Para que estas personas puedan comprender los contenidos de vídeo, es recomendable añadir una pista de audio adicional. A través de ella se explican elementos visuales como paisajes o personas y se describen brevemente las acciones que aparecen en pantalla. Estas descripciones deben colocarse en las pausas del diálogo y del sonido de la pista de audio original, para evitar que las distintas pistas se solapen.

Lenguaje sencillo

El lenguaje sencillo expresa los contenidos de forma muy sencilla y ayuda a las personas con discapacidades cognitivas a comprender mejor cuestiones complejas. Este tipo de lenguaje evita, por ejemplo, el uso del subjuntivo, los sinónimos y las negaciones. Las frases son cortas y transmiten una única idea por oración. Las personas con discapacidades cognitivas tienen el mismo derecho a la información que cualquier otra. Por ello, muchos medios de comunicación digitales, como los periódicos, ofrecen cada vez más versiones de sus artículos en lenguaje fácil como ejemplo de páginas web accesibles. También las administraciones públicas recurren cada vez más al lenguaje fácil en sus textos informativos.

Paso 4: hacer compatible la página web

Los lectores de pantalla y otras tecnologías de apoyo hacen posible la accesibilidad en Internet para muchas personas. Estos programas procesan los documentos web de forma estrictamente lineal, de izquierda a derecha y de arriba abajo. Por este motivo, es fundamental separar el diseño del contenido. De lo contrario, los lectores de pantalla pueden interpretar la página de forma incorrecta. Para facilitar una navegación eficiente en tu página web, conviene respetar las siguientes reglas básicas.

Enlaces de salto de navegación y otros atajos

Los lectores de pantalla transmiten la información textual a sistemas de síntesis de voz y a líneas braille. Para ello, leen la página de arriba abajo, incluidos elementos repetitivos como la barra de navegación, iconos o enlaces a subpáginas. Para evitar que esta información se repita innecesariamente en cada página, es recomendable integrar enlaces de salto de navegación, conocidos como “skip links”.

También las personas que navegan exclusivamente con el teclado, por ejemplo mediante dispositivos de apoyo, encuentran grandes dificultades si deben avanzar a través de numerosos elementos interactivos. Estas personas se benefician especialmente de un skip link situado al inicio de la página y claramente visible:

<a href="#content">Saltar navegación</a>
<main id="content">
    <h1>Encabezado principal</h1>
    <p>Primer párrafo</p>
</main>

Existen skip links que son invisibles en el diseño, pero que el lector de pantalla anuncia mediante el texto alternativo “Saltar navegación” cuando el código se implementa de la siguiente forma:

<a href="#content"><img src="empty.gif" height="15" border="0" alt="Saltar navegación" width="5"></a>

Es importante que los skip links se sitúen lo más al principio posible del código. El punto de anclaje debe colocarse al inicio del contenido principal:

<div id="content"></div>

Utiliza los skip links con moderación, ya que un uso excesivo puede anular su efecto positivo y obligar a los usuarios a recorrer demasiados elementos. Una alternativa más elegante es el uso de atributos ARIA (Accessible Rich Internet Applications) junto con una estructura de documento bien definida. Además, se recomienda emplear elementos de HTML5.

Otra ayuda eficaz es incluir un índice de contenidos al inicio del documento, que permita a los usuarios desplazarse a las distintas secciones mediante enlaces internos. Los lectores de pantalla modernos leen los encabezados correspondientes en voz alta. Por ello, trabajar con títulos claros y bien estructurados mejora tanto la legibilidad para los motores de búsqueda como la accesibilidad para las tecnologías de apoyo.

Tablas de datos en lugar de tablas de maquetación

Para una página web accesible conforme a las directrices del W3C, lo ideal es utilizar únicamente tablas de datos. Los lectores de pantalla tienen menos dificultades para interpretar correctamente este formato y reproducir la información de forma comprensible tras la conversión. Las tablas de maquetación, en cambio, sirven para estructurar visualmente la página, pero dificultan que los lectores de pantalla transmitan el contenido de manera clara.

Define las tablas de maquetación únicamente con elementos simples: TABLE, TR y TD (tabla, fila y celda). Utiliza elementos estructurales para organizar lógicamente la relación entre las celdas; de este modo, el lector de pantalla interpretará la tabla de maquetación como si fuera una tabla de datos. Este efecto se anula si se eliminan determinados elementos de la tabla del accessibility tree.

En una página web accesible, puedes usar, como en el ejemplo, el atributo role="none", que se aplica tanto a la tabla como a sus elementos hijos. Si incluyes tablas dentro de otras tablas, deberás definir ambos elementos de la misma manera.

<table role="none">
<tr>
<td>
<table role="none">
<tr>
<td>
Ejemplo de texto <abbr title="por ejemplo">p. ej.</abbr>
</td>
</tr>
</table>
</td>
</tr>
</table>

Página web accesible: checklist

Una vez finalizada la creación de tu página web, esta checklist te ayudará a comprobar que has tenido en cuenta los aspectos clave de la accesibilidad de páginas web:

✓ Estructura de la información clara y comprensible

✓ Uso de un lenguaje sencillo y accesible

✓ Textos alternativos para imágenes

✓ Transcripciones de vídeo y audio

✓ Marcado visual de contenidos importantes

✓ Suficiente contraste

✓ Compatibilidad con lectores de pantalla

Herramientas gratuitas para crear páginas web accesibles

Existen diversas herramientas que pueden ayudarte a crear una página web accesible y a comprobar si cumple los requisitos de accesibilidad. A continuación, te presentamos algunas de las más conocidas:

• WAVE Web Accessibility Evaluation Tool (WebAIM): herramienta para probar la accesibilidad de páginas web, plenamente alineada con la ADA y la Sección 508.
• Accessibility Checker: aplicación web que permite comprobar gratuitamente si una página web cumple las WCAG.
• Siteimprove: el comprobador de accesibilidad de Siteimprove ofrece un análisis gratuito de tu página web y envía los resultados por correo electrónico, con indicaciones claras sobre posibles problemas y mejoras.

Conclusión: la accesibilidad digital mejora la UX para todos

Diseñar una página web accesible mejora la usabilidad y optimiza la experiencia de usuario. Los usuarios que navegan desde dispositivos móviles, aquellos con discapacidades físicas o cognitivas, las personas mayores y los usuarios menos experimentados se orientan con mayor facilidad en una web accesible.

Además, una estructura clara y una presentación inclusiva de la información mejoran el posicionamiento en buscadores y aumentan el tiempo de permanencia en la página web. Aunque la accesibilidad web requiere cierto esfuerzo adicional y pruebas periódicas, la inversión merece la pena: una buena accesibilidad de páginas web beneficia a todos los usuarios.