Cómo ocultar y actualizar el contenido

Cómo 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 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.

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 de aria-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 temporalmente aria-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 era false).
• 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 es additions text, lo que significa que, si no especificas aria-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.