Opacity

La propiedad opacity nos permite controlar el grado de transparencia de un elemento. Si la ponemos a cero hace que desaparezca de la vista del usuario, pero a efectos del layout el elemento sigue ocupando el mismo espacio que si fuese totalmente opaco.

El elemento que ocultamos de esta forma sigue respondiendo a las acciones del usuario (un enlace sigue siendo clicable), recibe el foco si usamos la navegación por teclado y será leído por cualquier screen reader. A todos los efectos el elemento sigue ahí, lo único que ha cambiado es que ahora es transparente.

.oculto {
    opacity: 0;
}

Visibility

La propiedad visibility con el valor hidden nos permite ocultar un elemento, de hecho de una forma muy parecida a la propiedad opacity aunque con alguna diferencia sustancial.

Al igual que ocurre con la propiedad opacity el elemento que ocultamos toma su lugar dentro del layout. La gran diferencia es que el usuario no puede interactuar con el elemento. Además el elemento no recibe el foco en la navegación por teclado y no es accesible de cara al uso de screen readers.

.oculto {
    visibility: hidden;
}

Display

Si le aplicamos el valor none a la propiedad display conseguimos ocultar el elemento en el sentido estricto de la palabra. El elemento ocultado de esta manera no genera modelo de caja, con lo cual además de estar oculto a la vista, el elemento es sacado del flujo normal de programa. A efectos del resto de elementos, estos se comportan como si el elemento no existiese en el DOM.

Puesto que el elemento queda ocultado completamente, el usuario no puede interactuar con él, ni es accesible mediante la navegación por teclado, ni mucho menos va a ser anunciado por un screen reader. A todos los efecto hemos hecho que desaparezca, tanto él como sus descendientes.

.oculto {
    display: none;
}

Posicionar el elemento fuera de pantalla

Desplazar un elemento lo suficiente para que se salga de la pantalla (o viewport) siempre ha sido una de las formas clásicas de hacer desaparecer un elemento. Mediante la propiedad display con su valor position y alguna de las cuatro propiedades de colocación top, right, bottom o left, con un valor lo suficiente grande, podemos hacer desaparecer un elemento sacándolo del campo de visión.

Como lo único que hemos hecho es desplazar el elemento, este es accesible desde teclado, pudiendo recibir el foco, lo cual si se usa este tipo de navegación puede resultar confuso, ya que este desaparece también del campo de visión. Está en nuestras manos corregir este problema, haciendo por ejemplo que vuelva a aparecer el elemento cuando recibe el foco.

Ocultando el elemento de esta forma los screen readers pueden anunciarlo. En cuanto a la interacción del usuario con un elemento ocultado de esta forma, queda claro que no es posible, ni con ratón, ni mediante una pantalla táctil (como la de cualquier teléfono móvil). Sin embargo si que podemos interactuar con él mediante la navegación por teclado, ya que puede recibir el foco.

.oculto {
    position: absolute;
    top: -9999px;
}

Jugando con el tamaño

Si un objeto no tiene ninguna dimensión, está claro que no es visible. En CSS podemos poner los tamaños (width y height) de un elemento a cero y mágicamente este desaparece. Es aconsejable también poner a cero margin, padding y border, por si el elemento tuviese algún valor por defecto en alguna de estas propiedades.

Además es recomendable usar overflow:hidden para evitar desbordamientos y poner también a cero la propiedad line-height en elementos inline-block para evitar espacios no deseados que generan algunos navegadores.

Con este tipo de ocultación, creo que queda claro que no es posible que el usuario realice ninguna acción sobre el elemento, salvo por teclado, ya que el elemento puede recibir el foco. En teoría, un screen reader anunciaría el elemento, aunque al no haber testado este tipo de ocultación con ellos, no me atrevo a aventurar nada.

.oculto {
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 0; /* sólo en caso de elementos inline-block */
    overflow: hidden;
}

Clip

Realizar un recorte con la propiedad clip es también una buena forma de ocultar un elemento. Es tan sencillo como declarar las cuatro coordenadas con las que creamos la forma recortada, que según esta propiedad sólo puede ser un rectángulo, con un mismo valor. Para que sea accesible a los screen readers es recomendable no usar el valor cero, ya que algunos de ellos tienen problemas y pueden no anunciar el elemento.

Al igual que ocurre con otras formas de ocultar elementos no permite acción alguna por parte del usuario, salvo en la navegación por teclado, ya que puede recibir el foco.

Es una de las forma más usadas para ocultar un elemento cuando queremos mantener la accesibilidad, y no es porque lo diga yo, muchos expertos en accesibilidad así lo aseguran, como Olga Carreras, que en su artículo ocultar contenido sin comprometer la accesibilidad ni el posicionamiento de la página, realiza un análisis de 5 técnicas para ocultar contenido desde el punto de vista de la accesibilidad.

Tan sólo un apunte más, el elemento debe estar posicionado de forma absoluta para permitir realizar un recorte mediante la propiedad clip, es una de la limitaciones de esta propiedad, sobre la que puedes leer más en el interesante artículo The CSS Clip Property de Louis Lazaris.

.oculto {
    position: absolute
    clip: rect(1px, 1px, 1px, 1px);
}

Clip-path

La propiedad clip-path viene a sustituir a la obsoleta propiedad clip (que se sigue usando para ocultación de elementos). A diferencia de la propiedad clip, clip-path permite más formas de recorte que un simple rectángulo, además de la aplicación de patrones de recorte mediante SVGs, tanto en línea como externos, aunque sobre esto ya hablamos en el artículo recortando con CSS.

Lo que nos interesa de clip-path en este caso, es la posibilidad de ocultar un elemento, y se hace de forma muy similar a como lo hicimos con clip. Para ello podemos usar cualquiera de las formas básica de CSS o un SVG, siempre que creemos una región de recorte de valor igual a cero. Esto no quiere decir que los valores sean igual a cero, tan sólo el valor de la región de recorte, de hecho al igual que ocurriese para la propiedad clip debemos evitar los valores a cero para mantener la accesibilidad.

A mi parecer la forma más sencilla de hacerlo es con la forma básica polygon, que nos permite crear cualquier tipo de polígono mediante pares de coordenadas. Lo único de debemos hacer es que estos pares de coordenadas tengan el mismo valor. Por cierto, se puede aplicar clip-path sobre cualquier elemento, no es necesario que esté posicionado de forma absoluta.

.oculto {
    clip-path: polygon(1px 1px, 1px 1px, 1px 1px);
}