El uso de CSS: para ocultar un contenido necesario para los usuarios de lectores de pantalla
  |  |
Imprimir  |
Enviar  |
Parte         |
Advertencia: La versión original de este documento es CSS en acción: Contenido invisible sólo para los usuarios de lectores de pantallas . Esta traducción al francés fue realizada por Ideose como parte de un acuerdo entre WebAIM y Ideose .
Nota: Vea la página de los documentos sobre accesibilidad web para obtener una lista de todos los documentos traducidos. Otras fuentes de información sobre la accesibilidad web también aparecen en el portal digital accesible .
Resumen
Introducción
A veces hay casos en los que deben ser los contenidos puestos a disposición de los usuarios de lector de pantalla, pero oculto a las personas videntes. En la mayoría de los casos, si el contenido (sobre todo el contenido que proporciona una funcionalidad e interactividad) es lo suficientemente grande como para que los usuarios de lector de pantalla, probablemente debería ponerse a disposición de todos los usuarios. Cuando la información o las instrucciones se proporcionan sólo para usuarios de lectores de pantalla son más un reflejo de un mal diseño y la accesibilidad de los pobres. Sin embargo, hay pocos casos en que la información es visualmente evidente, pero no puede ser para los usuarios de lectores de pantalla. En estos casos, es conveniente para codificar una declaración acerca de esta información para que sea leída por un lector de pantalla, pero invisible para los usuarios videntes.
Técnicas para ocultar el texto
Existen varios mecanismos para ocultar el contenido. Es importante que la aplicación técnica da el resultado deseado y que es accesible.
visibility: hidden; y / o display:none;
Estos estilos de ocultar el texto a todos los usuarios. El texto se elimina del flujo visual de la página y es ignorado por los lectores de pantalla. No utilice este CSS, si desea que el contenido para ser leído por un lector de pantalla. Sin embargo, se debe usar si desea que el contenido no es leído por lectores de pantalla.
width:0px;height:0px
Como arriba, porque un elemento sin altura o anchura se elimina del flujo de la página, la mayoría de los lectores de pantalla ignorará este contenido.
HTML atributos de width y height con un valor de cero, por lo tanto, podría dar el mismo resultado. Esto no es un enfoque correcto para ocultar el contenido visual, sino que permite que el contenido para ser leído por un lector de pantalla.
text-indent: -1000px;
Este enfoque se mueve el contenido de 1000 píxeles a la izquierda - exterior, de modo de la pantalla visible. Lectores de pantalla leen el texto siempre con este estilo. Sin embargo, si un enlace o un elemento de formulario tiene este estilo, puede dar lugar a una indicación de enfoque (líneas de puntos o las "hormigas marchantes" en torno a un enlace con el foco) que se extenderá desde el donde el elemento se encuentra en la página donde se encuentra realmente en el hecho de (extrema izquierda). No es muy bonito. Como tal, es una opción correcta si el artículo no contiene elementos de navegación.
Posicionamiento de contenido fuera de la pantalla en términos absolutos
Usar CSS para mover el contenido oculto en una posición fuera de la pantalla por lo general en vivo es considerado como el más útil y accesible para ocultar visualmente el contenido.
Posicionamiento de contenido fuera de la pantalla
Los estilos siguientes se recomiendan para ocultar visualmente el contenido para ser leídos por un lector de pantalla.
{Position: absolute;
a la izquierda:-10000px;
arriba: auto;
ancho: 1px;
altura: 1px;
overflow: hidden;}
. La clase CSS oculto debe estar indicado en el código del artículo que debe ser ocultado de la siguiente manera:
<div class="hidden">Ce texte et caché.</div> Los usuarios videntes no ven en absoluto el contenido oculto. En realidad, es mostrado fuera de su alcance - bien escondido a la izquierda de la ventana visible del explorador. Los usuarios de lectores de pantalla tienen acceso a los contenidos como si no se oculta. Lectores de pantalla leen el contenido normalmente, ignorando por completo los estilos utilizados en esta técnica.
Analizar el código en detalle.
position:absolute; le dice al navegador para eliminar el elemento del flujo de la página y comenzar a posicionar. left:-10000px; . se mueve el contenido de 10.000 píxeles a la izquierda top:auto; indica al navegador que la posición vertical del contenido en la misma posición donde estaba originalmente.
El fracaso de top podría dar lugar a que el estilo de left se pasa por alto en algunos casos y en algunos navegadores.
En resumen, esta pieza de código mueve los 10.000 píxeles a la izquierda.
width:1px; height:1px; overflow:hidden; indica al navegador que por el tamaño de 1px 1px al elemento y ocultar visualmente todo lo que no se ajusta a estas dimensiones.
Hay algunos casos en los que la posición (izquierda) no pueden trabajar, mientras que todos los otros estilos están habilitadas.
En este caso, el elemento permanece en su posición inicial y tener un tamaño de 1 píxel.
Observación
Una versión anterior de este artículo recomendó el uso de left:0px; top:-500px .
A pesar de este posicionamiento opera para almacenar el contenido por encima de la parte superior, encontramos que si el elemento contiene un enlace oculto o forma, cuando se toma el foco del teclado, el navegador trata de ir al elemento - para desplazarse por la página hacia arriba.
Esto puede ser confuso para los usuarios videntes mediante el teclado.
Mediante la colocación directa de la izquierda, el navegador no se desplazará hacia arriba de la página. Cabe señalar que, debido a los enlaces y elementos de formulario ofrecer características interactivas, que rara vez se oculta a las personas videntes.
Los usuarios videntes no será capaz de ver que elemento tiene el foco, ya que está fuera de la pantalla.
Los puntos de referencia e indicadores
¡Importante!
Por lo general, una instrucción en la información deben ser ocultados de los usuarios videntes y disponibles para los usuarios de lectores de pantalla, si la información es visualmente evidente, pero incognoscible para los usuarios de lectores de pantalla.
Esta técnica puede utilizarse para proporcionar puntos de referencia e indicadores para los usuarios de lectores de pantalla. Debe aplicarse con discreción y sólo cuando sea necesario. La página de WebAIM muestra un buen uso de esta técnica en tres lugares.
En primer lugar, el campo de búsqueda en la parte superior de la página tiene un título (etiqueta de la etiqueta) inmediatamente antes de él. Visualmente es claro que el campo es un campo de investigación, pero un lector de pantalla necesita una etiqueta para dar esta información. Para ello, hemos proporcionado un título a través de una etiqueta de rótulo, pero oculta visualmente.
En segundo lugar, la ruta de navegación en la parte superior de la página es un elemento común en los sitios web. La mayoría de los usuarios de Internet entender cómo funciona y se puede identificar visualmente. Pero debido a que un lector de pantalla accede a esta lista de enlaces de una manera lineal, puede que no sea obvio para los usuarios de lector de pantalla que este es el pan rallado hasta que que han desempeñado un papel. Por lo tanto les digo. Para ello, un texto oculto "Usted está aquí:" se añadió justo antes de las migas de pan.
Por último, hemos identificado el inicio de la publicidad en la parte inferior de cada página con el texto oculto. Al igual que con las migas de pan, que es visualmente evidente que este es un anuncio, pero no para un usuario de lector de pantalla, ya que no comenzar a leer el contenido.
Usted puede ver todo el texto oculto mediante la desactivación de WebAIM estilos de página. Recuerde, todo el contenido visual de ocultar con CSS se puede ver si los estilos están desactivadas.
Otras implementaciones
Para que un usuario visual, algunas células de encabezado de la tabla puede llevar a cabo la doble función de organizar el contenido de la tabla y también proporcionan las etiquetas (etiqueta) para formar los elementos dentro de esta tabla, como se ha visto en la siguiente imagen de un formulario en una tabla de datos.
La fila de encabezado y la columna de la tabla son de poco valor en términos de entender el diseño de la tabla, pero no son las cabeceras de los campos de formulario. Cuando los usuarios de lectores de pantalla para tabular un campo de formulario a otro campo, no van a escuchar a los encabezados de la tabla. De hecho, no se oye ninguna etiqueta. Los lectores de pantalla necesitan etiquetas de los campos de formulario de texto. Sin embargo, añadir etiquetas de texto para cada campo del formulario sin duda sería redundante, innecesaria y probablemente sería confuso para los usuarios videntes. En este caso, las etiquetas pueden ser proporcionados en el código adyacentes a sus campos de formulario correspondientes pero oculta utilizando el CSS arriba y aplicado como sigue ...
<label for= »amembers "class= »hidden »> Número de miembros en el equipo A </ label>
...
Otro ejemplo de la aparente incompatibilidad entre las necesidades de los usuarios de lectores de pantalla y los usuarios videntes se produce cuando muchos desarrolladores crear campos de formulario que parecen pertenecer a la misma etiqueta. Un ejemplo común de esto es cuando dos o más campos de entrada de texto se utilizan los números de teléfono.
La mayoría de los usuarios con visión de América del Norte incluyen las áreas de entrada de texto corresponden a las diferentes partes de un número de teléfono. Los usuarios de lectores de pantalla, sin embargo, puede que desee entrar en el número de teléfono completo en la primera casilla. Desde luego será un poco sorprendido al descubrir que el campo se limita a sólo tres dígitos, o que hay otros campos que no están denominados en que la siguen.
La solución más obvia a este problema sería la de combinar todas las casillas de entrada de texto en uno, y luego proporcionar la etiqueta apropiada. Sin embargo, la técnica de CSS también se puede aplicar a esta situación para añadir etiquetas ocultas en cada cuadro de texto separado.
<p> Número de teléfono:
(
<label for= »area "class= »hidden »> código de área </ label>
<input name= »area "id= »area" type= »text "size= »3" maxlength= »3"/>
)
...
Conclusión
Cuando las técnicas que se presentan aquí se usan CSS para ocultar el contenido, los usuarios videntes nunca sabrán que el contenido está presente (a menos que desactivar los estilos). Los usuarios de lectores de pantalla, por el contrario, nunca se dará cuenta de que este contenido es invisible para los usuarios videntes. Ambos tipos de usuarios será capaz de utilizar el contenido intuitivamente sin ninguna modificación de código es necesario. Esto puede proporcionar importante información contextual, de lo contrario imposible de capturar a los usuarios de lectores de pantalla debido a su carácter visual. Cuando se utiliza con criterio, esta técnica puede resolver algunos problemas entre los requisitos de accesibilidad y los requisitos de la presentación visual de las páginas web. Esta no es la única forma técnica o sólo para resolver este problema, pero es una de las soluciones que los desarrolladores Web pueden utilizar cuando sea necesario.
Enlaces comerciales
WebAIM es una iniciativa de:
Derechos de autor 1999-2009 WebAIM
