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

La ac­ce­si­bi­li­dad en Internet garantiza que personas con distintos tipos de li­mi­ta­cio­nes y ne­ce­si­da­des 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 de­te­r­mi­na­dos co­le­c­ti­vos en el entorno digital, como las personas con di­s­ca­pa­ci­da­des físicas o co­g­ni­ti­vas, y asegurar un acceso equi­ta­ti­vo a los co­n­te­ni­dos y servicios en línea.

¿Qué es la ac­ce­si­bi­li­dad en Internet?

La ac­ce­si­bi­li­dad en Internet tiene como objetivo permitir que todas las personas, in­de­pe­n­die­n­te­me­n­te de sus ca­pa­ci­da­des o li­mi­ta­cio­nes, puedan acceder y pa­r­ti­ci­par en los co­n­te­ni­dos web en igualdad de co­n­di­cio­nes. Esto significa que cualquier usuario puede utilizar una página web sin quedar excluido de de­te­r­mi­na­dos co­n­te­ni­dos o medios debido a una di­s­ca­pa­ci­dad. En el contexto de la inclusión digital, la ac­ce­si­bi­li­dad de páginas web es un factor clave que las empresas deberían tener muy en cuenta. Además, las páginas web ac­ce­si­bles también influyen po­si­ti­va­me­n­te en el po­si­cio­na­mie­n­to en bu­s­ca­do­res.

Las barreras son ob­s­tácu­los que di­fi­cu­l­tan o impiden el uso equi­ta­ti­vo de los servicios digitales. Aunque la co­n­cie­n­cia­ción sobre la ac­ce­si­bi­li­dad en el espacio físico ha aumentado no­ta­ble­me­n­te en los últimos años, en Internet siguen apa­re­cie­n­do barreras con fre­cue­n­cia, a menudo de forma in­vo­lu­n­ta­ria, como co­n­se­cue­n­cia de de­ci­sio­nes técnicas, de diseño o de contenido. Estudios y ejemplos prácticos muestran que, en pa­r­ti­cu­lar, los elementos in­ter­ac­ti­vos como los sistemas de registro o los me­ca­ni­s­mos de seguridad pueden resultar pro­ble­má­ti­cos. Así, de­te­r­mi­na­dos captchas basados en ca­ra­c­te­res di­s­to­r­sio­na­dos o pruebas ex­clu­si­va­me­n­te visuales di­fi­cu­l­tan co­n­si­de­ra­ble­me­n­te el acceso a los co­n­te­ni­dos web para personas con di­s­ca­pa­ci­dad visual y no cumplen los re­qui­si­tos actuales de ac­ce­si­bi­li­dad web.

Es­tá­n­da­res para páginas web ac­ce­si­bles

El estándar más im­po­r­ta­n­te para la creación de páginas web ac­ce­si­bles son las WCAG en su versión WCAG 2.2 (Web Content Ac­ce­s­si­bi­li­ty Gui­de­li­nes). Se trata de di­re­c­tri­ces pu­bli­ca­das por el W3C que co­n­s­ti­tu­yen el principal referente in­te­r­na­cio­nal en materia de ac­ce­si­bi­li­dad de páginas web. Las WCAG 2.2 se centran es­pe­cia­l­me­n­te en la mejora de la usa­bi­li­dad, una na­ve­ga­ción más clara mediante teclado y foco y una in­ter­ac­ción si­m­pli­fi­ca­da en di­s­po­si­ti­vos móviles, dando respuesta a los cambios en los hábitos de uso y a barreras que hasta ahora no estaban su­fi­cie­n­te­me­n­te cubiertas.

Entre los criterios de éxito más re­le­va­n­tes de las WCAG 2.2 se incluyen, entre otros:

• Foco del teclado visible: los elementos in­ter­ac­ti­vos deben ser cla­ra­me­n­te re­co­no­ci­bles al navegar con el teclado.
• Tamaño mínimo de los elementos de control: las su­pe­r­fi­cies de clic y táctiles deben ser lo su­fi­cie­n­te­me­n­te grandes para evitar errores de uso.
• Al­te­r­na­ti­vas a los gestos de arrastre: las funciones no deben depender ex­clu­si­va­me­n­te del uso de arrastrar y soltar.
• Evitar entradas re­du­n­da­n­tes: no se debe obligar a in­tro­du­cir la misma in­fo­r­ma­ción varias veces.
• Au­te­n­ti­ca­ción accesible: los procesos de inicio de sesión no deben basarse en tareas co­g­ni­ti­vas complejas, como de­te­r­mi­na­dos captchas.

Las WCAG 2.2 co­n­s­ti­tu­yen así el marco técnico fu­n­da­me­n­tal de la ac­ce­si­bi­li­dad web y sirven también como base para los re­qui­si­tos legales en la Unión Europea y en España en materia de ac­ce­si­bi­li­dad de páginas web.

Pe­r­ce­p­ción

Muchas páginas web incluyen anuncios pa­r­pa­dea­n­tes, columnas de co­me­n­ta­rios 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 li­mi­ta­ción, algunos usuarios no perciben estos elementos por completo o di­re­c­ta­me­n­te no llegan a de­te­c­tar­los.

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 in­fo­r­ma­ción legible a te­c­no­lo­gías de apoyo. Una línea braille, por ejemplo, convierte el texto en escritura braille para que pueda pe­r­ci­bi­r­se mediante el tacto. Las he­rra­mie­n­tas de texto a voz re­pro­du­cen los co­n­te­ni­dos en formato de audio, lo que permite procesar la in­fo­r­ma­ción a través del oído. En este contexto, la música de fondo puede resultar es­pe­cia­l­me­n­te molesta.

Las personas con una di­s­ca­pa­ci­dad visual menos grave, entre las que se en­cue­n­tran muchas personas mayores, sí perciben el contenido vi­sua­l­me­n­te, pero necesitan una am­plia­ción co­n­si­de­ra­ble de la pantalla. Las personas con da­l­to­ni­s­mo, por su parte, no reconocen avisos que se tra­n­s­mi­ten úni­ca­me­n­te mediante el color. Las personas sordas, en cambio, no pueden acceder a la in­fo­r­ma­ción de archivos de audio puros ni a gran parte de los co­n­te­ni­dos de vídeo sin apoyos adi­cio­na­les.

Co­m­pre­n­sión

Personas muy jóvenes, personas mayores o usuarios con di­s­ca­pa­ci­da­des co­g­ni­ti­vas pueden tener di­fi­cu­l­ta­des para entender textos cargados de términos técnicos modernos o abre­via­tu­ras sin ex­pli­ca­ción. Del mismo modo, cuando una página web presenta co­n­te­ni­dos re­la­cio­na­dos entre sí de forma muy dispersa, a muchas personas les resulta co­m­pli­ca­do ide­n­ti­fi­car el contexto y el sentido global.

In­ter­ac­ción y na­ve­ga­ción

Dado que cada vez más personas acceden a las páginas web desde el sma­r­t­pho­ne, resulta es­pe­cia­l­me­n­te fru­s­tra­n­te cuando los enlaces no se pueden se­le­c­cio­nar con precisión con el dedo. Si una página web no está op­ti­mi­za­da para di­s­po­si­ti­vos móviles y los enlaces aparecen muy juntos y con un tamaño de letra reducido, esto supone además un in­co­n­ve­nie­n­te im­po­r­ta­n­te para personas mayores o con temblores en las manos.

Para las personas con di­s­ca­pa­ci­dad física existen hoy en día numerosas he­rra­mie­n­tas que facilitan el uso del ordenador: algunas te­c­no­lo­gías registran los mo­vi­mie­n­tos oculares, mientras que otras se controlan mediante el teclado. Una página web accesible debería estar diseñada de forma que pueda uti­li­zar­se co­rre­c­ta­me­n­te con este tipo de te­c­no­lo­gías de apoyo. Si una página web no es navegable en estas co­n­di­cio­nes, los posibles clientes que dependen de ellas no podrán acceder a toda la oferta di­s­po­ni­ble.

Al rellenar fo­r­mu­la­rios, por ejemplo para su­s­cri­bi­r­se a una ne­w­s­le­t­ter, es habitual que se produzcan errores: la co­n­tra­se­ña es demasiado corta o la fecha de na­ci­mie­n­to no se ajusta a los pa­rá­me­tros definidos. Por ello, es fu­n­da­me­n­tal ofrecer in­di­ca­cio­nes claras para la co­rre­c­ción de errores. La in­ter­ac­ción con una página web incluye también la na­ve­ga­ción. Los usuarios que utilizan di­s­po­si­ti­vos con pantallas pequeñas o trabajan con una am­plia­ción elevada dependen de rutas de na­ve­ga­ción adaptadas y de una es­tru­c­tu­ra clara y bien or­ga­ni­za­da de la página web.

Entradas de datos

Las secciones de co­me­n­ta­rios permiten a los usuarios dar su opinión, expresar va­lo­ra­cio­nes sobre un producto o un contenido y co­mu­ni­car­se con otras personas. Las personas con di­s­ca­pa­ci­dad visual suelen utilizar una lupa de pantalla al escribir en el monitor. Esto hace que los elementos se muestren co­n­si­de­ra­ble­me­n­te 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 vi­sua­l­me­n­te cercana y facilitar así la in­ter­ac­ción y el in­te­r­ca­m­bio entre los usuarios.

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

Cuando eliminas barreras en Internet, mejora la usa­bi­li­dad de tu página web y, con ello, también su po­si­cio­na­mie­n­to 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. Además, las páginas web ac­ce­si­bles cumplen las di­re­c­tri­ces europeas de ac­ce­si­bi­li­dad, como la Ley Europea de Ac­ce­si­bi­li­dad, y los re­qui­si­tos legales apli­ca­bles en España. 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 es­tru­c­tu­ra de la in­fo­r­ma­ción como a los distintos co­m­po­ne­n­tes visuales de la presencia web.

Paso 1: ga­ra­n­ti­zar una es­tru­c­tu­ra clara de la in­fo­r­ma­ción

Es­tru­c­tu­ra 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 po­si­cio­na­mie­n­to en bu­s­ca­do­res, ya que los motores de búsqueda también evalúan la le­gi­bi­li­dad de los textos. Si quieres seguir op­ti­mi­za­n­do el SEO y diseñar una ar­qui­te­c­tu­ra de página web co­m­pre­n­si­ble y ordenada, ten en cuenta también los si­guie­n­tes aspectos:

Paso 2: aplicar estímulos visuales

Poder ampliar las ti­po­gra­fías o modificar los colores ayuda a las personas con di­s­ca­pa­ci­dad visual o da­l­to­ni­s­mo a reconocer mejor los co­n­te­ni­dos de una página web. El contenido debe destacar cla­ra­me­n­te sobre el fondo para facilitar la lectura. Resalta los elementos in­ter­ac­ti­vos mediante botones o ma­r­ca­do­res 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 adi­cio­na­les como números o as­te­ri­s­cos para tra­n­s­mi­tir in­fo­r­ma­ció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 cie­n­tí­fi­cos han de­mo­s­tra­do que los patrones de rejilla con contornos muy definidos y alto contraste también pueden provocar crisis en personas con epilepsia fo­to­se­n­si­ble.

Paso 3: presentar la in­fo­r­ma­ción de forma diversa

Ten en cuenta el diseño web accesible también en el trabajo diario. Ya sea para la op­ti­mi­za­ción en bu­s­ca­do­res, con fines de re­la­cio­nes públicas o para presentar nuevas ofertas de venta, publica contenido nuevo de forma constante. Facilita el acceso a estos co­n­te­ni­dos adaptando la in­fo­r­ma­ción a las distintas ne­ce­si­da­des de los usuarios y fo­me­n­ta­n­do así una ac­ce­si­bi­li­dad de páginas web coherente y so­s­te­ni­ble.

Un elemento fu­n­da­me­n­tal de una página web accesible, que además desempeña un papel clave en el SEO, es la asi­g­na­ción de textos al­te­r­na­ti­vos a las imágenes. Los ra­s­trea­do­res de los motores de búsqueda y los lectores de pantalla no pueden in­te­r­pre­tar el contenido visual, lo mismo ocurre con las personas ciegas. El texto al­te­r­na­ti­vo describe el contenido de la imagen y aporta contexto. También se be­ne­fi­cian de los textos al­te­r­na­ti­vos los usuarios con co­ne­xio­nes lentas, en los casos en los que las imágenes se cargan con retraso o no se muestran co­rre­c­ta­me­n­te.

Tra­n­s­cri­p­cio­nes y su­b­tí­tu­los

La creación continua y puntual de tra­n­s­cri­p­cio­nes y su­b­tí­tu­los requiere un mayor esfuerzo, pero resulta esencial para una página web accesible. Estos recursos permiten preparar los co­n­te­ni­dos de audio para personas sordas o con di­fi­cu­l­ta­des auditivas. La tra­n­s­cri­p­ció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 co­rre­s­po­n­die­n­te, por ejemplo mediante un botón con enlace al documento.

Los su­b­tí­tu­los facilitan eno­r­me­me­n­te la co­m­pre­n­sió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 di­s­ca­pa­ci­da­des co­g­ni­ti­vas o tra­s­to­r­nos de atención como el TDAH asimilan mejor la in­fo­r­ma­ción au­dio­vi­sual cuando pueden des­ac­ti­var los ruidos de fondo mediante la co­n­fi­gu­ra­ción del re­pro­du­c­tor de vídeo.

Au­dio­de­s­cri­p­ción

Ge­ne­ra­l­me­n­te, las personas con una agudeza visual inferior al 30 % se co­n­si­de­ran personas con di­s­ca­pa­ci­dad 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 co­m­pre­n­der los co­n­te­ni­dos de vídeo, es re­co­me­n­da­ble añadir una pista de audio adicional. A través de ella se explican elementos visuales como paisajes o personas y se describen bre­ve­me­n­te las acciones que aparecen en pantalla. Estas de­s­cri­p­cio­nes 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 co­n­te­ni­dos de forma muy sencilla y ayuda a las personas con di­s­ca­pa­ci­da­des co­g­ni­ti­vas a co­m­pre­n­der mejor cue­s­tio­nes complejas. Este tipo de lenguaje evita, por ejemplo, el uso del su­b­ju­n­ti­vo, los sinónimos y las ne­ga­cio­nes. Las frases son cortas y tra­n­s­mi­ten una única idea por oración. Las personas con di­s­ca­pa­ci­da­des co­g­ni­ti­vas tienen el mismo derecho a la in­fo­r­ma­ción que cualquier otra. Por ello, muchos medios de co­mu­ni­ca­ción digitales, como los pe­rió­di­cos, ofrecen cada vez más versiones de sus artículos en lenguaje fácil como ejemplo de páginas web ac­ce­si­bles. También las ad­mi­ni­s­tra­cio­nes públicas recurren cada vez más al lenguaje fácil en sus textos in­fo­r­ma­ti­vos.

Paso 4: hacer co­m­pa­ti­ble la página web

Los lectores de pantalla y otras te­c­no­lo­gías de apoyo hacen posible la ac­ce­si­bi­li­dad en Internet para muchas personas. Estos programas procesan los do­cu­me­n­tos web de forma es­tri­c­ta­me­n­te lineal, de izquierda a derecha y de arriba abajo. Por este motivo, es fu­n­da­me­n­tal separar el diseño del contenido. De lo contrario, los lectores de pantalla pueden in­te­r­pre­tar la página de forma in­co­rre­c­ta. Para facilitar una na­ve­ga­ción eficiente en tu página web, conviene respetar las si­guie­n­tes reglas básicas.

Enlaces de salto de na­ve­ga­ción y otros atajos

Los lectores de pantalla tra­n­s­mi­ten la in­fo­r­ma­ció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 re­pe­ti­ti­vos como la barra de na­ve­ga­ción, iconos o enlaces a su­b­pá­gi­nas. Para evitar que esta in­fo­r­ma­ción se repita in­ne­ce­sa­ria­me­n­te en cada página, es re­co­me­n­da­ble integrar enlaces de salto de na­ve­ga­ción, conocidos como “skip links”.

También las personas que navegan ex­clu­si­va­me­n­te con el teclado, por ejemplo mediante di­s­po­si­ti­vos de apoyo, en­cue­n­tran grandes di­fi­cu­l­ta­des si deben avanzar a través de numerosos elementos in­ter­ac­ti­vos. Estas personas se be­ne­fi­cian es­pe­cia­l­me­n­te de un skip link situado al inicio de la página y cla­ra­me­n­te 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 in­vi­si­bles en el diseño, pero que el lector de pantalla anuncia mediante el texto al­te­r­na­ti­vo “Saltar na­ve­ga­ción” cuando el código se im­ple­me­n­ta de la siguiente forma:

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

Es im­po­r­ta­n­te 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 mo­de­ra­ción, ya que un uso excesivo puede anular su efecto positivo y obligar a los usuarios a recorrer de­ma­sia­dos elementos. Una al­te­r­na­ti­va más elegante es el uso de atributos ARIA (Ac­ce­s­si­ble Rich Internet Ap­pli­ca­tio­ns) junto con una es­tru­c­tu­ra de documento bien definida. Además, se re­co­mie­n­da emplear elementos de HTML5.

Otra ayuda eficaz es incluir un índice de co­n­te­ni­dos al inicio del documento, que permita a los usuarios de­s­pla­zar­se a las distintas secciones mediante enlaces internos. Los lectores de pantalla modernos leen los en­ca­be­za­dos co­rre­s­po­n­die­n­tes en voz alta. Por ello, trabajar con títulos claros y bien es­tru­c­tu­ra­dos mejora tanto la le­gi­bi­li­dad para los motores de búsqueda como la ac­ce­si­bi­li­dad para las te­c­no­lo­gías de apoyo.

Tablas de datos en lugar de tablas de ma­que­ta­ción

Para una página web accesible conforme a las di­re­c­tri­ces del W3C, lo ideal es utilizar úni­ca­me­n­te tablas de datos. Los lectores de pantalla tienen menos di­fi­cu­l­ta­des para in­te­r­pre­tar co­rre­c­ta­me­n­te este formato y re­pro­du­cir la in­fo­r­ma­ción de forma co­m­pre­n­si­ble tras la co­n­ve­r­sión. Las tablas de ma­que­ta­ción, en cambio, sirven para es­tru­c­tu­rar vi­sua­l­me­n­te la página, pero di­fi­cu­l­tan que los lectores de pantalla tra­n­s­mi­tan el contenido de manera clara.

Define las tablas de ma­que­ta­ción úni­ca­me­n­te con elementos simples: TABLE, TR y TD (tabla, fila y celda). Utiliza elementos es­tru­c­tu­ra­les para organizar ló­gi­ca­me­n­te la relación entre las celdas; de este modo, el lector de pantalla in­te­r­pre­ta­rá la tabla de ma­que­ta­ción como si fuera una tabla de datos. Este efecto se anula si se eliminan de­te­r­mi­na­dos elementos de la tabla del ac­ce­s­si­bi­li­ty 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 fi­na­li­za­da la creación de tu página web, esta checklist te ayudará a comprobar que has tenido en cuenta los aspectos clave de la ac­ce­si­bi­li­dad de páginas web:

✓ Es­tru­c­tu­ra de la in­fo­r­ma­ción clara y co­m­pre­n­si­ble

✓ Uso de un lenguaje sencillo y accesible

✓ Textos al­te­r­na­ti­vos para imágenes

✓ Tra­n­s­cri­p­cio­nes de vídeo y audio

✓ Marcado visual de co­n­te­ni­dos im­po­r­ta­n­tes

✓ Su­fi­cie­n­te contraste

✓ Co­m­pa­ti­bi­li­dad con lectores de pantalla

He­rra­mie­n­tas gratuitas para crear páginas web ac­ce­si­bles

Existen diversas he­rra­mie­n­tas que pueden ayudarte a crear una página web accesible y a comprobar si cumple los re­qui­si­tos de ac­ce­si­bi­li­dad. A co­n­ti­nua­ción, te pre­se­n­ta­mos algunas de las más conocidas:

• Ac­ce­s­si­bi­li­ty Checker: apli­ca­ción web que permite comprobar gra­tui­ta­me­n­te si una página web cumple las WCAG. Está di­s­po­ni­ble en inglés y es adecuada para eva­lua­cio­nes generales de ac­ce­si­bi­li­dad de páginas web.
• Si­tei­m­pro­ve: el co­m­pro­ba­dor de ac­ce­si­bi­li­dad de Si­tei­m­pro­ve ofrece un análisis gratuito de tu página web y envía los re­su­l­ta­dos por correo ele­c­tró­ni­co, con in­di­ca­cio­nes claras sobre posibles problemas y mejoras.

Co­n­clu­sión: la ac­ce­si­bi­li­dad digital mejora la UX para todos

Diseñar una página web accesible mejora la usa­bi­li­dad y optimiza la ex­pe­rie­n­cia de usuario. Los usuarios que navegan desde di­s­po­si­ti­vos móviles, aquellos con di­s­ca­pa­ci­da­des físicas o co­g­ni­ti­vas, las personas mayores y los usuarios menos ex­pe­ri­me­n­ta­dos se orientan con mayor facilidad en una web accesible.

Además, una es­tru­c­tu­ra clara y una pre­se­n­ta­ción inclusiva de la in­fo­r­ma­ción mejoran el po­si­cio­na­mie­n­to en bu­s­ca­do­res y aumentan el tiempo de pe­r­ma­ne­n­cia en la página web. Aunque la ac­ce­si­bi­li­dad web requiere cierto esfuerzo adicional y pruebas pe­rió­di­cas, la inversión merece la pena: una buena ac­ce­si­bi­li­dad de páginas web beneficia a todos los usuarios.