A la hora de desarrollar muchas veces ocultamos o mostramos elementos sin tener en cuenta a los lectores de pantalla. En algunos casos, cuando escondemos un componente deseamos que los screen readers tampoco puedan visualizarlos; en otros sí queremos que puedan verlos; y en otras circunstancias deseamos no mostrarlos solamente a ellos.
Para conseguir que la experiencia de usuario sea igual de placentera para todas las personas, y garantizar un uso universal de la web, en este artículo voy a enumerar las diferentes maneras de esconder y visualizar componentes.
CSS
Para comenzar, vamos a hablar de diferentes propiedades de Hojas de Estilo en Cascada, su comportamiento en los navegadores y, por último, cómo los perciben los lectores de pantalla.
display
display: none;
Esta propiedad de CSS determina el tipo de caja (para más info podéis consultar este artículo). Si le añades el valor none lo que reciba este código será ocultado y eliminado del flujo, por lo que el lugar que ocupaba anteriormente, también desaparece.
Lector de pantalla: El elemento será ignorado.
visibility
visibility: hidden;
Nos permite esconder o enseñar un elemento sin eliminarlo del flujo y manteniendo la estructura de la página. Es decir, al contrario que con display: none; si le indicamos el valor hidden el elemento ya no está visible en la página pero el espacio sigue ocupado.
Lector de pantalla: El elemento será ignorado.
Imagen con un elemento con visibility: hidden
width, height, overflow
width: 0;
height: 0;
overflow: hidden;
Height y width sirven para establecer el alto y ancho de los elementos y overflow permite controlar qué se va a hacer con el contenido que supera el tamaño que tiene un elemento.
Si los combinamos de esta forma, los componentes que se vean afectados por este código estarán ocultos y no se mantendrá el espacio que ocupan.
Lector de pantalla: El elemento será ignorado.
position
position: absolute;
left: -9999em;
Esta propiedad indica la forma de posicionar que se va a utilizar en un componente. Si empleamos el absolute y left: -9999em, el contenido se desvanecerá del flujo normal, estará emplazado en la esquina izquierda y el espacio que ocupaba también desaparecerá.
Lector de pantalla: Tendrán en cuenta esos elementos y podrán acceder a su contenido.
text-indent
text-indent: -9999em;
text-indent especifica la indentación que va a tener la primera línea de un párrafo. En este caso, los elementos son ocultados aunque pueden seguir recibiendo el foco.
Lector de pantalla: Tendrán en cuenta esos elementos y podrán acceder a su contenido, aunque éste sólo podrá ser texto o elementos en línea.
HTML
Dejando a un lado las propiedades de CSS, hay que destacar algunos atributos de HTML.
aria-hidden
<p aria-hidden="true">Esto es un texto</p>
Este atributo de HTML si tiene su valor en true será ocultado exclusivamente para los lectores de pantalla, pudiendo ser visualizado en los navegadores.
Sin embargo, hay que tener en cuenta que este atributo no funciona en elementos que pueden recibir el foco como los botones, los inputs o los links.
Lector de pantalla: El elemento será ignorado.
type="hidden"
<input type="hidden" name="input"/>
Como mencionamos anteriormente, el aria-hidden="true" no funcionará en elementos que admiten tener el foco, como los inputs. No obstante, si a un input le ponemos que es de tipo hidden sí que podrá ser ocultado.
Lector de pantalla: El elemento será ignorado.
hidden
<p hidden="true">Esto es un texto</p>
Al colocar este atributo en el HTML, este elemento se comportará como si tuviera un display: none, siendo escondido y eliminado del flujo. Este atributo afecta a elementos que pueden recibir el foco.
Lector de pantalla: El elemento será ignorado.
Conclusión
Disponemos de muchas formas de mostrar y ocultar elementos tanto usando HTML como CSS y que se comportan de diferente forma. Ahora que conocemos cómo funcionan cada uno de ellos, podremos tenerlo en cuenta a la hora de desarrollar y así crear proyectos accesibles.
Para más información
https://www.pluralsight.com/guides/how-to-hide-text-from-screen-readers
http://alistapart.com/article/now-you-see-me/
Top comments (0)