Webmaster Libre

La mayoría de las técnicas para hacer el contenido web accesible para los lectores de pantalla son invisibles para los usuarios visuales. El texto alternativo (alt), las etiquetas de encabezado de las tablas, sumarios de tablas, y los elementos label de los formularios son ejemplos de técnicas que marcan una gran diferencia para los usuarios de lectores de pantalla pero tienen muy poco o ningún impacto en la apariencia visual del contenido web.

No obstante, muy de vez en cuando, los diseñadores web afrontan situaciones en las que la adición de marcado accesible tiene un impacto en la presentación visual. En algunos casos, este impacto visual puede decrecer la usabilidad del contenido para usuarios visuales. En otros casos, los diseñadores simplemente quieren proveer una estructura o apariencia más agradable que esté comprometida al incluir todo el texto en una forma semánticamente correcta.

Índice de contenidos

1. Ocultar texto para usuarios videntes
2. Usar imágenes como encabezados
3. Enlaces para saltarse la navegación
4. Formularios dentro de tablas de datos
5. Múltiples elementos de un formulario compartiendo una etiqueta
6. Dando pistas conceptuales para usuarios de lectores de pantalla
7. Conclusión

Ocultar texto para usuarios videntes:

Afortunadamente, hay formas de resolver los conflictos entre las necesidades y deseos de los usuarios visuales y aquellos de los usuarios de lectores de pantalla. Este articulo examina ciertas circunstancias en las que esconder el texto de los usuarios visuales puede ser beneficioso y propone una solución que permite al HTML ser escondido sin comprometer la accesibilidad o integridad semántica del documento y que funciona en todos los navegadores y plataformas.

La esencia de la técnica propuesta en este documento es esconder el contenido por encima del área visible del navegador y también encoger el contenido a un alto y un ancho de 1 píxel. La combinación de mover el contenido y encogerlo es lo que permite funcionar a esta técnica en un amplio rango de navegadores y plataformas.

Código de Ejemplo 1:

El siguiente código debería aparecer en la hoja de estilo:

.hidden {
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}

Se debe hacer referencia a la clase CSS en la etiqueta del elemento a ocultar, como sigue:

<div class="hidden">
This text is hidden.
</div>

Los usuarios videntes no verán nada del contenido oculto. Estará fuera de su rango de visión, escondido mas allá de la parte de arriba del navegador. Los lectores de pantalla leerán el contenido normalmente, ignorando completamente los estilos utilizados por esta técnica.
Algunos navegadores responden correctamente a la primera mitad de esta técnica, que es colocar el elemento sobre la zona visible del navegador. Otros navegadores no responden a este método, por lo que la segunda técnica, de hacer el elemento demasiado pequeño para ser visto, también es usada. Ambos métodos son necesarios para superar las diferencias en la implementación de los navegadores. La distancia de 500px sobre el punto de vista es un número seleccionado al azar. Cualquier distancia bastará siempre que coloque el contenido fuera del rango de visión de los usuarios videntes. Es preferible colocar el contenido por encima del punto de vista ya que colocarlo a la derecha o izquierda puede causar irregularidades al mostrarse en algunos navegadores. El ancho y alto del elemento es 1 pixel, como oposición a 0px, ya que algunos lectores de pantalla se niegan a leer contenido que no tiene ancho o alto. Establecer el valor de overflow como hidden toma en cuenta los bugs de implementación de otros navegadores. Juntos, estos métodos funcionan en un amplio rango de navegadores, plataformas y lectores de pantalla.

Usar imágenes como encabezados

Los diseñadores siempre han deseado hacer el contenido Web tan agradable visualmente como sea posible. El lenguaje de marcado HTML produce un contenido de aspecto anodino sin la adición de gráficos u otros elementos. Una de las técnicas favoritas de los diseñadores visuales es usar gráficos como encabezados de los documentos. Esta técnica permite a los diseñadores tener más control sobre el aspecto de las cabeceras que el que proporciona un simple texto. Desafortunadamente, esto ocasiona documentos que no proveen de una buena estructura semántica a nivel de marcado. Los lectores de pantalla no pueden reconocer estos elementos como encabezados sin el marcado adecuado (por ejemplo h1, h2…). Rodear un gráfico con las etiquetas de encabezado tampoco soluciona el problema. Desde el punto de vista semántico, los encabezados deben ser texto.

Se han presentado varias técnicas para permitir a los desarrolladores usar gráficos como encabezados en documentos semánticamente correctos. La primera y más ampliamente conocida técnica es la de Todd Fahmer. Poco después de su presentación, los expertos en accesibilidad se dieron cuenta de que la técnica hacia el contenido inaccesible a los lectores de pantalla. No mucho después, mucha gente presentó técnicas alternativas, como la de Bob Easton, el método de indentado del texto de Mike Runde, la técnica de transformación de imágenes de Tom Gilder y otras. Todas esas técnicas tuvieron éxito escondiendo el contenido HTML, algunas lo lograron en cuanto a hacerlo accesible a los lectores de pantalla, y muchas de ellas funcionan en todos los navegadores y sistemas operativos más importantes. No obstante, ninguna lo consiguió en las tres áreas, aunque unas son mejores que otras.

Ejemplo de Código 2

El siguiente código debe aparecer en la hoja de estilo

.hidden {
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
} 

Se debe hacer referencia a la clase CSS en la etiqueta del elemento a ocultar, como sigue:

<h1><img src="header.jpg" alt="" height="30" width="60">
<span class="hidden">
This heading text is hidden.
</span></h1>

Alternativamente, puedes dar estilo al encabezado para que la imagen se muestre como una imagen de fondo en CSS.

Enlaces para saltarse la navegación

Los diseñadores generalmente aborrecen la idea de proveer un enlace de texto en su página sólo para que los usuarios de lectores de pantalla puedan saltar los repetitivos enlaces de navegación como requiere la Sección 508 del Acta de Rehabilitación en los Estados Unidos y como recomiendan las especificaciones de accesibilidad de contenido web (WCAG), versión 1.0. Añadir un enlace para saltar la navegación en una página web se entromete con el diseño original y suele obligar al diseñador a alterar el aspecto.

Algunos diseñadores han respondido escondiendo el texto dentro del texto alternativo de una imágen (alt) o usando cualquier otro método que oculte completamente el enlace a los usuarios visuales. El mayor inconveniente de hacer este enlace invisible es que lo hace inaccesible para los usuarios videntes que podrían encontrar un enlace así útil, como gente con deficiencias motoras que no pueden utilizar un ratón. Algunos usuarios con deficiencias motoras se fatigan con facilidad y preferirian utilizar un enlace para saltarse la navegación en lugar de utilizar el tabulador a lo largo de todos los elementos del menu y otros contenidos que precedan al contenido principal de la página.

Una forma de reconciliar los deseos de los diseñadores visuales con esos de los usuarios de lectores de pantalla y los usuarios con deficiencias motrices es usar una técnica que oculta el enlace hasta que el usuario llega con el tabulador a él, momento en el cual el enlace se hace visible a los usuarios videntes. Esto permitiría tanto a usuarios ciegos como videntes aprovechar las ventajas de la funcionalidad del enlace.

Para conseguir esta meta, el enlace está oculto por defecto – usando la técnica descrita en este articulo – pero se mueve al área visible cuando el enlace recibe el foco con el ratón. En otras palabras, se crean dos estilos uno para la etiqueta a y otro para el pseudo-elemento a:focus. El estilo para el pseudo-elemento a:focus sólo se activará cuando el usuario tabule en el enlace, y volverá a su estado por defecto (es decir, volverá a desaparecer) cuando el usuario tabule fuera del enlace.

Ejemplo de Código 3

El siguiente código debe aparecer en la hoja de estilo

#skip a, #skip a:hover, #skip a:visited {
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
} 

#skip a:active {
position:static;
width:auto;
height:auto;
} 

Se debe hacer referencia a la clase CSS en la etiqueta del elemento a ocultar, como sigue:

<div id="skip"><a href="#content">
Saltar al contenido principal
</a></div>

El único inconveniente de esta idea, a un nivel conceptual, es que la aparición repentina de un enlace que previamente era invisible no será esperada y puede confundir al usuario vidente de teclado. Esto no será un problema para los usuarios de lectores de pantalla, ya que no pueden ver la pantalla para darse cuenta de que el enlace se hace visible de repente. Desde su perspectiva, el enlace siempre ha estado ahí, porque, de hecho, estaba. Simplemente no era visible para los ojos. Los usuarios de ratón nunca verán el enlace, así que no es problema para ellos.

Formularios dentro de tablas de datos

Para un usuario visual, las celdas de encabezado de las tablas pueden acometer la doble función de organizar el contenido de la tabla y también de hacer de etiquetas de los elementos de un formulario contenido en la tabla, como puede verse en la captura de un formulario dentro de una tabla de datos de aquí abajo.

Figura 1: Tabla de datos utilizada para proveer etiquetas para los elementos del formulario.

Para un usuario de lector de pantalla, los encabezados de filas y columnas son de alguna manera útiles en términos de entender la estructura de la tabla, pero los encabezados no actúan como. Cuando un usuario de lectores de pantalla tabula de un elemento del formulario a otro no escuchará leerse los encabezado de la tabla. De hecho, no escucharan ninguna etiqueta. Los lectores de pantalla necesitan etiquetas de texto. Idealmente, estas etiquetas deben ser envueltas con la etiqueta label, como recomiedan las WCAG 1.0. El etiquetado adicional y la agrupación pueden llevarse a cabo utilizando las etiquetas fieldset y legend.

En este caso en particular, no obstante, los usuarios visuales no recibirán ningún beneficio adicional de las etiquetas visuales de texto. Para ellos, estas etiquetas serían redundantes con los encabezados de la tabla, ya que, desde el punto de vista visual, esos encabezados ya proporcionan etiquetas adecuadas para los elementos del formulario. Aquí está como se vería la misma tabla para los usuarios videntes si las etiquetas estándar fuesen agregadas con las etiquetas label, fieldset y legend

Figura 2: Formulario con etiquetas dentro de una tabla

A pesar de que los usuarios de lectores de pantalla estarán felices con esta versión de la tabla, la mayoría de los usuarios videntes considerarán el texto adicional una distracción. Para los usuarios visuales, la tabla simplemente se ha vuelto mas atestada, llena de palabras y difícil de comprender a primera vista. Esta es una situación en la que el añadido de código pensado para beneficiar a los usuarios de lectores de pantalla interfiere con la accesibilidad, o al menos con la amistosidad del contenido para los usuarios visuales.

Código de ejemplo 4

El siguiente código debe aparecer en la hoja de estilo

.hidden {
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
} 

Se debe hacer referencia a la clase CSS en la etiqueta del elemento a ocultar, como sigue:

…
<label for="amembers" class="hidden">
Number of members in team A
</label>
…

Múltiples elementos de un formulario compartiendo una sola etiqueta

Otro ejemplo de aparente incompatibilidad entre las necesidades de los usuarios de lectores de pantalla y los usuarios visuales, sucede cuando los desarrolladores crean múltiples elementos de un formulario que parece como si tuviesen que pertenecer a la misma etiqueta. Un ejemplo común de esto es cuando dos o mas elementos de entrada de texto se usan para números de teléfono.

Figura 3: Etiquetas de un formulario que se aplican a más de un elemento

En la imagen anterior, la mayoría de usuarios visuales de Norte América comprenderán que las áreas de entrada de texto individuales corresponden a las diferentes secciones de un número de teléfono corriente. Los usuarios de lectores de pantalla pueden tratar de introducir el número de teléfono entero e el primer espacio. Cuando descubren que la caja los limita a sólo tres caractéres, seguramente les lleve a cierta confusión. Algunos usuarios serán capaces de intuir el contexto entero tras experimentar con él, pero esta clase de experimentación lleva tiempo y es innecesaria.

El truco más obvio para este problema en particular podría ser combinar todos las cajas de entrada de texto en una sola y entonces proporcionar la etiqueta adecuada. Esta puede ser la mejor solución en la mayoría de circunstancias en casi todas las formas. No obstante, la técnica de CSS puede ser también aplicada en esta situación.

Código de Ejemplo 5

.hidden {
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}

Se debe hacer referencia a la clase CSS en la etiqueta del elemento a ocultar, como sigue:

<form method="post" action="">
<p>Phone number:
(
<label for="area" class="hidden">Area code</label>
<input name="area" type="text" size="3" maxlength="3" id="area" />
)
<label for="first" class="hidden">first 3 digits</label>
<input name="first" type="text" size="3" maxlength="3" id="first" />
 -
<label for="last" class="hidden">last 4 digits</label>
<input name="last" type="text" size="4" maxlength="4" id="last" />

<label for="ext" class="hidden">extension</label>
<input name="ext" type="text" size="5" maxlength="5" id="ext" />
</p>
<p><input type="submit" name="Submit" value="Submit" /></p>
</form>

Dando pistas conceptuales para usuarios de lectores de pantalla

La misma técnica de CSS puede utilizarse para proporcionar pistas contextuales especiales para usuarios de lectores de pantalla que los usuarios visuales pueden no necesitar ver. A pesar de que esta técnica no es demasiado utilizada, los usuarios de lectores de pantalla pueden beneficiarse de los mensajes de texto que les explican el contexto del contenido web. Por ejemplo, sitios con complejos sistemas de menús suelen estar diseñados de forma que se destaque la posición del usuario dentro de la jerarquía del menú. La mayoría de esta información se pierde para los usuarios de lectores de pantalla porque está construida de forma visual. Puede ser apropiado ofrecer frases ocultas que permitan a los usuarios de lectores de pantalla orientarse dentro de semejantes estructuras. Frases que pueden ser utiles y apropiadas para insertarse entre el contenido son:

• Comienzo del menú principal
• Fin del menú principal
• Principio [y final] del submenú Productos y Servicios
• Estás aquí [seguido del texto del objeto de menu actual dentro de la jerarquia]
• Anuncios [colócalo antes de un banner publicitario, por ejemplo]

Un aviso, todas estas frases deben ser breves y deben usarse con moderación, si se usan. Muchos sitios no necesita de este tipo de ayuda contextual. A más claro y simple sea el diseño, menor es la necesidad de usar esta técnica. Los diseñadores no deberían sobrecargar a los usuarios de lectores de pantalla con texto que les proporcione poco o ningún beneficio. Esta técnica puede proporcionar importantes pistas contextuales que son de otra manera de naturaleza puramente visual, pero como los usuarios de lectores de pantalla deben escuchar a cualquier texto que haya en la página, estas pistas deben mantenerse en un mínimo.

.hidden {
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
} 

Se debe hacer referencia a la clase CSS en la etiqueta del elemento a ocultar, como sigue:

<div class="hidden">
Comienzo del menu principal.
</div>
...
<div class="hidden">
Fin del menu principal.
</div> 

Conclusión

Cuando se utiliza la técnica CSS presentada aquí para ocultar contenido del HTML, los usuarios videntes nunca sabrán que el contenido está ahí. Los usuarios de lectores de pantalla, por otra parte, nunca se darán cuenta de que ese contenido es invisible para los usuarios videntes. Ambos tipos de usuarios serán capaces de usar el contenido intuitivamente, sin tener que ajustarse a mucha o demasiado poca información en el marcado. Esto puede proporcionar importantes pistas contextuales que de otra forma son inaccesible para los usuarios de lectores de pantalla debido a la naturaleza visual de las mismas. Cuando se utilizan juiciosamente, esta técnica puede aminorar cierta tension entre las demandas de la accesibilidad y las del diseño visual. No es la única técnica o método que soluciona este problema pero es uno que los desarrolladores web pueden añadir a su lista de posibles soluciones cuando la necesidad emerge.

Éste texto es una traducción de un original de Web AIM titulado CSS in Action: Invisible Content Just for Screen Reader Users