¿Cuál será el mejor ARIA para un control de selección que muestra una cantidad especificada de conjuntos de campos de formulario?

Tengo un control de selección que el usuario utilizará para mostrar una cantidad especificada de conjuntos de campos de formulario (por ejemplo, “¿Cuántos conjuntos de campos necesitas?”). No tengo mucho control sobre la estructura del formulario, que utiliza un UL con 1 LI por entrada de formulario; algunos LIs están ocultos y luego se vuelven visibles según el valor de la selección. Estoy pensando en configurar aria-controls=”id del UL” en la selección, e introducir un elemento de texto con los atributos aria-live=”polite” y role=”status”, luego actualizar el texto de este elemento para describir la cantidad de conjuntos de campos disponibles. ¿Qué opinas?

Nathaniel pidió un ejemplo de código: aquí está el HTML básico (no puedo modificar la estructura de la lista, pero puedo modificar todo lo demás a través de JS):

<ul id="myform"> <li><select aria-controls="myform"> <option>1</option> <option>2</option> </select></li> <div role="status" aria-live="polite" aria-atomic="true" id="statusMsg">Este texto anunciará cuántos conjuntos de campos son visibles ahora</div> <li class="fieldset1"><input type="text"></li> <li class="fieldset1"><input type="text"></li> <li class="fieldset2"><input type="text"></li> <li class="fieldset2"><input type="text"></li> </ul>

davy.ai

July 27, 2023 at 6:07 pm

Como experto en tecnología de la información especializado en accesibilidad, diría que tu enfoque es bueno. Al establecer aria-controls con el ID de UL, estás estableciendo una relación entre el select y el UL, lo cual es necesario para que los lectores de pantalla entiendan la relación entre los dos elementos.

Introducir un elemento de texto con los atributos aria-live=”polite” y role=”status” también es una buena idea, ya que proporcionará contexto adicional a los usuarios de tecnología de asistencia. El lector de pantalla anunciará el texto actualizado cada vez que cambie, proporcionando información sobre la cantidad de fieldsets disponibles, mejorando así la accesibilidad general de tu formulario.

Sugeriría probar la implementación a fondo con diferentes lectores de pantalla y tecnologías de asistencia para asegurarse de que funcione como se pretende.

En cuanto a la implementación, podrías utilizar JavaScript para actualizar el texto del elemento de estado cada vez que cambie el valor del elemento de select, utilizando algo como esto:

const select = document.querySelector('select');
const status = document.querySelector('#statusMsg');

select.addEventListener('change', () => {
  const count = select.value;
  status.textContent = `Ahora hay ${count} fieldsets visibles.`;
});

En general, creo que tu enfoque es bueno y demuestra un compromiso con la mejora de la accesibilidad de tu formulario.

Answer

davy.ai

July 27, 2023 at 6:07 pm
Como experto en tecnología de la información especializado en accesibilidad, diría que tu enfoque es bueno. Al establecer aria-controls con el ID de UL, estás estableciendo una relación entre el select y el UL, lo cual es necesario para que los lectores de pantalla entiendan la relación entre los dos elementos.

Introducir un elemento de texto con los atributos aria-live=”polite” y role=”status” también es una buena idea, ya que proporcionará contexto adicional a los usuarios de tecnología de asistencia. El lector de pantalla anunciará el texto actualizado cada vez que cambie, proporcionando información sobre la cantidad de fieldsets disponibles, mejorando así la accesibilidad general de tu formulario.

Sugeriría probar la implementación a fondo con diferentes lectores de pantalla y tecnologías de asistencia para asegurarse de que funcione como se pretende.

En cuanto a la implementación, podrías utilizar JavaScript para actualizar el texto del elemento de estado cada vez que cambie el valor del elemento de select, utilizando algo como esto:
```
const select = document.querySelector('select');
const status = document.querySelector('#statusMsg');

select.addEventListener('change', () => {
  const count = select.value;
  status.textContent = `Ahora hay ${count} fieldsets visibles.`;
});
```
En general, creo que tu enfoque es bueno y demuestra un compromiso con la mejora de la accesibilidad de tu formulario.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Cuál será el mejor ARIA para un control de selección que muestra una cantidad especificada de conjuntos de campos de formulario?

Answer

davy.ai