Cómo ocultar contenido de la tecnología de accesibilidad
aria-oculta
Otra técnica importante para perfeccionar la experiencia de asistencia usuarios de tecnología implica asegurarse de que solo se muestren las partes relevantes de la página a la tecnología de asistencia. Existen varias formas de garantizar que una sección del DOM no se expone a las APIs de accesibilidad.
En primer lugar, tampoco se incluirá ningún elemento que quede explícitamente oculto del DOM
en el árbol de accesibilidad. Por lo tanto, todo el contenido que tenga un estilo CSS de visibility:
hidden
o display: none
, o que use el atributo hidden
de HTML5 también se considerará
ocultan para los usuarios de tecnología de asistencia.
Sin embargo, un elemento que no se renderiza visualmente ni está oculto explícitamente que todavía están incluidas en el árbol de accesibilidad. Una técnica común es incluir “texto solo para lector de pantalla” en un elemento que se posiciona 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
Los atributos aria-label
, aria-labelledby
o aria-describedby
que hacen referencia a un
que, de otro modo, está oculto.
Consulta este artículo de WebAIM sobre Técnicas para ocultar texto para obtener más información sobre cómo crear "solo lector de pantalla" texto.
Por último, ARIA proporciona un mecanismo para excluir contenido de asistencia
tecnología que no esté oculta visualmente, con el atributo aria-hidden
Al aplicar este atributo a un elemento, este se quita de manera efectiva y todas sus
subordinados del árbol de accesibilidad. La única excepción son los elementos
a los que hace referencia 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 podría ver algún tipo
de superposición semitransparente que indica que actualmente la mayor parte de la página no se puede
pero un usuario de lector de pantalla aún puede
explorar para otras partes
de la página. En este caso, al igual que la creación de la trampa del teclado se explicó
antes,
debes asegurarte de que las partes de la página que actualmente están fuera del alcance
también son aria-hidden
.
Ahora que comprendes los conceptos básicos de ARIA, cómo se juega con el HTML nativo semántica y cómo puede usarse para realizar cirugías bastante importantes en el árbol de accesibilidad, además de cambiar la semántica de un único elemento, y veamos cómo podemos usarlo para transmitir información urgente.
aria-live
aria-live
permite que los desarrolladores marquen una parte de la página como "publicada" en el sentido de que
las actualizaciones se deben comunicar a los usuarios de inmediato, independientemente de la página
en lugar de explorar esa parte de la página por casualidad. Cuándo
un elemento tiene un atributo aria-live
, la parte de la página que lo contiene y
sus elementos subordinados se denominan región live.
![ARIA live establece una región live.](https://web.dev/static/articles/hiding-and-updating-content/image/aria-live-establishes-li-acc61d8956fc7.jpg?authuser=6&hl=es)
Por ejemplo, una región live 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
atención, es lo suficientemente importante como para dirigir la atención del usuario de la tecnología de asistencia
le otorgas atención estableciendo su atributo aria-live
. Comparar este div
común
<div class="status">Your message has been sent.</div>
con su contenido "en vivo" equivalente.
<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 esto cuando termine lo que esté haciendo actualmente. Es muy bueno usar si algo es importante pero no urgente y es responsable de la mayoría dearia-live
.aria-live="assertive"
le indica a la tecnología de accesibilidad que interrumpa lo que sea y alertar al usuario de inmediato sobre este cambio. Esto es solo para actualizaciones importantes y urgentes, como un mensaje de estado como "Se produjo un servidor y los cambios no se guardan; actualiza la página", o actualizaciones de un campo de entrada como resultado directo de una acción del usuario, como botones en un widget de pasos.aria-live="off"
le indica a la tecnología de accesibilidad que se suspenda temporalmentearia-live
interrupciones.
Existen algunos trucos para garantizar que tus regiones live funcionen correctamente.
En primer lugar, es probable que la región aria-live
esté configurada en la carga inicial de la página.
Esta no es una regla rígida, pero si tienes dificultades con un
aria-live
región, este podría ser el problema.
En segundo lugar, 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.
activando o desactivando el estilo hidden
de un elemento descendiente de verdadero a falso
Otros atributos que funcionan con aria-live
te ayudan a ajustar
de comunicación al usuario
cuando cambia la región live.
aria-atomic
indica si toda la región se debe considerar como un
completo cuando se comunican actualizaciones. Por ejemplo, si un widget de fecha compuesto por un
día, mes y año tiene aria-live=true
y aria-atomic=true
, y el usuario
usa un control paso a paso para cambiar solo el valor del mes, todo el contenido
del widget de fecha se volverá a leer en voz alta. Es posible que el valor de aria-atomic
sea true
o false
(el valor predeterminado).
aria-relevant
indica qué tipos de cambios se le deben presentar al usuario.
Existen algunas opciones que 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 live se
significativo. Por ejemplo, anexar un intervalo a un registro de estado existente
mensajes significa que el intervalo se anunciaría al usuario (suponiendo que
que
aria-atomic
erafalse
). - text, lo que significa que el contenido de texto que se agrega a cualquier nodo subordinado se
relevante. Por ejemplo, modificar la propiedad
textContent
de un campo de texto personalizado leería el texto modificado al usuario. - removals, es decir, la eliminación de texto o nodos subordinados transmitirse al usuario.
- all, lo que significa que todos los cambios son relevantes. Sin embargo, el valor predeterminado para
aria-relevant
esadditions text
, lo que significa que, si no especificasaria-relevant
actualizará al usuario por cualquier adición al elemento. que es lo que probablemente quieras.
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
todo esté configurado, aria-busy
debe ser falso para normalizar la
las operaciones de los lectores.