Cómo ocultar y actualizar el contenido

Ocultar contenido de la tecnología de accesibilidad

Alice Boxhall

Dave Gash

Meggin Kearney

aria-oculta

Otra técnica importante para perfeccionar la experiencia de los usuarios de tecnología de accesibilidad implica garantizar que solo las partes relevantes de la página queden expuestas a la tecnología de accesibilidad. Existen varias maneras de garantizar que una sección del DOM no quede expuesta a las APIs de accesibilidad.

En primer lugar, todo lo que quede explícitamente oculto del DOM tampoco se incluirá en el árbol de accesibilidad. Por lo tanto, todo lo que tenga un estilo de CSS de visibility: hidden o display: none, o que use el atributo hidden de HTML5, también estará oculto para los usuarios de tecnología de accesibilidad.

Sin embargo, los elementos que no se renderizan visualmente, pero que no están explícitamente ocultos siguen incluidos en el árbol de accesibilidad. Una técnica común es incluir "texto solo para lectores de pantalla" en un elemento que quede ubicado absolutamente fuera de la pantalla.

.sr-only {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

Además, como vimos, es posible proporcionar texto solo para lectores de pantalla a través de un atributo aria-label, aria-labelledby o aria-describedby que haga referencia a un elemento que, de otro modo, esté oculto.

Consulta este artículo de WebAIM sobre Técnicas para ocultar texto y obtén más información para crear texto "solo para lector de pantalla".

Por último, ARIA proporciona un mecanismo para excluir contenido de la tecnología de accesibilidad que no está visualmente oculto mediante el atributo aria-hidden. Cuando se aplica este atributo a un elemento, este se quita y todos sus elementos subordinados del árbol de accesibilidad de forma eficaz. Las únicas excepciones son elementos a los que se hace referencia por un atributo aria-labelledby o aria-describedby.

<div class="deck">
    <div class="slide" aria-hidden="true">
    Sales Targets
    </div>
    <div class="slide">
    Quarterly Sales
    </div>
    <div class="slide" aria-hidden="true">
    Action Items
    </div>
</div>

Por ejemplo, puedes usar aria-hidden si creas una IU modal que bloquea el acceso a la página principal. En este caso, un usuario vidente puede ver una superposición semitransparente que indique que la mayor parte de la página no se puede usar actualmente, pero un usuario de lector de pantalla puede seguir explorando las otras partes de la página. En este caso, además de crear la trampa de teclado que se explicó anteriormente, debes asegurarte de que las partes de la página que están fuera del alcance también estén aria-hidden.

Ahora que comprendes los conceptos básicos de ARIA, cómo funciona con la semántica de HTML nativo y cómo se puede usar para realizar una cirugía bastante importante en el árbol de accesibilidad, así como para cambiar la semántica de un solo elemento, veamos cómo podemos usarlo para transmitir información urgente.

aria-live

aria-live permite a los desarrolladores marcar una parte de la página como "publicada", en el sentido de que las actualizaciones se deben comunicar a los usuarios de forma inmediata, independientemente de la posición de la página, en lugar de si solo exploran esa parte. Cuando un elemento tiene un atributo aria-live, la parte de la página que lo contiene y sus elementos subordinados se denominan regiones activas.

Por ejemplo, una región publicada puede ser un mensaje de estado que aparece como resultado de una acción del usuario. Si el mensaje es lo suficientemente importante como para captar la atención de un usuario vidente, es lo suficientemente importante como para dirigir la atención de un usuario de tecnología de accesibilidad hacia él configurando el atributo aria-live. Compara este div común

<div class="status">Your message has been sent.</div>

con su contraparte “live”.

<div class="status" aria-live="polite">Your message has been sent.</div>

aria-live tiene tres valores permitidos: polite, assertive y off.

• aria-live="polite" le indica a la tecnología de accesibilidad que alerte al usuario sobre este cambio cuando haya finalizado lo que esté haciendo actualmente. Es excelente usarlo si algo es importante, pero no urgente, y representa la mayor parte del uso de aria-live.
• aria-live="assertive" le dice a la tecnología de accesibilidad que interrumpa lo que está haciendo y alerte al usuario sobre este cambio de inmediato. Esto es solo para actualizaciones importantes y urgentes, como un mensaje de estado como “Se produjo un error del servidor y tus cambios no se guardaron; actualiza la página” o las actualizaciones de un campo de entrada como resultado directo de una acción del usuario, como los botones en un widget paso a paso.
• aria-live="off" le indica a la tecnología de accesibilidad que suspenda temporalmente las interrupciones de aria-live.

Existen algunos trucos para garantizar que tus regiones activas funcionen correctamente.

En primer lugar, es probable que tu región aria-live esté configurada en la carga inicial de la página. Esta no es una regla estricta, pero si tienes problemas con una región aria-live, es posible que este sea el problema.

En segundo lugar, los distintos lectores de pantalla reaccionan de manera diferente a los distintos tipos de cambios. Por ejemplo, es posible activar una alerta en algunos lectores de pantalla cambiando el estilo de hidden de un elemento subordinado de verdadero a falso.

Otros atributos que funcionan con aria-live te ayudan a definir mejor lo que se comunica al usuario cuando cambia la región publicada.

aria-atomic indica si toda la región debe considerarse una región completa cuando se comunican actualizaciones. Por ejemplo, si un widget de fecha que consta de un día, un mes y un año tiene aria-live=true y aria-atomic=true, y el usuario usa un control de pasos para cambiar el valor de solo el mes, todo el contenido del widget de fecha se volverá a leer. El valor de aria-atomic puede ser true o false (el valor predeterminado).

aria-relevant indica qué tipos de cambios se deben presentar al usuario. Algunas opciones se pueden usar por separado o como una lista de tokens.

• additions, lo que significa que cualquier elemento que se agregue a la región publicada es significativo. Por ejemplo, agregar un intervalo a un registro existente de mensajes de estado significaría que el intervalo se anunciaría al usuario (suponiendo que aria-atomic era false).
• text: Significa que el contenido de texto que se agrega a cualquier nodo subordinado es relevante. Por ejemplo, la modificación de la propiedad textContent de un campo de texto personalizado le leería el texto modificado al usuario.
• eliminaciones, lo que significa que se debe comunicar al usuario la eliminación de cualquier texto o nodos subordinados.
• all: Significa que todos los cambios son relevantes. Sin embargo, el valor predeterminado de aria-relevant es additions text, lo que significa que, si no especificas aria-relevant, se actualizará el usuario para cualquier adición al elemento, que es lo que más te convenga.

Por último, aria-busy te permite notificar a la tecnología de accesibilidad que debe ignorar temporalmente los cambios en un elemento, como cuando se están cargando los elementos. Una vez que todo está implementado, aria-busy se debe establecer como falso para normalizar la operación del lector.