Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

168
Vistas
JAWS no lee los elementos de la lista desplegable creados usando una lista desordenada cuando se usa SelectBoxIt js

Tengo el siguiente código de lista desplegable que se genera usando selectboxit js lib. JAWS no está leyendo los elementos en la lista de selección cuando se enfoca en los elementos. He intentado agregar atributos aria-label y title en li, a, span e incluso en el elemento i, pero aún no se lee. ¿Qué atributo necesito agregar para que JAWS pueda leerlo correctamente en foco? El foco va correctamente en el elemento li cuando se usa la flecha hacia arriba y hacia abajo.

 <ul id="ddlSubReason_1SelectBoxItOptions" class="selectboxit-options selectboxit-list" tabindex="-1" role="listbox" aria-hidden="true"> <li id="0" data-val="" data-disabled="false" class="selectboxit-option selectboxit-option-first selectboxit-selected" role="option" aria-label=""> <a class="selectboxit-option-anchor"> <span class="selectboxit-option-icon-container"> <i class="selectboxit-option-icon selectboxit-container"></i></span></a></li> <li id="1" data-val="29" data-disabled="false" class="selectboxit-option" role="option" aria-label="Selection text placeholder 1"> <a class="selectboxit-option-anchor"> <span class="selectboxit-option-icon-container"> <i class="selectboxit-option-icon selectboxit-container"></i></span> Selection text placeholder 1</a></li> <li id="2" data-val="28" data-disabled="false" class="selectboxit-option" role="option" aria-label="Selection text placeholder 2"> <a class="selectboxit-option-anchor"> <span class="selectboxit-option-icon-container"> <i class="selectboxit-option-icon selectboxit-container"></i></span> Selection text placeholder 2</a></li> <li id="3" data-val="55" data-disabled="false" class="selectboxit-option" role="option" aria-label="Selection text placeholder 3"> <a class="selectboxit-option-anchor"> <span class="selectboxit-option-icon-container"> <i class="selectboxit-option-icon selectboxit-container"></i></span> Selection text placeholder 3</a></li> </ul>
about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

Tiene aria-hidden="true" en el contenedor principal ( <ul> ). Eso ocultará a todos los niños del lector de pantalla y no se anunciará nada. Intenta eliminarlo.

.<ul id="ddlSubReason_1SelectBoxItOptions" class="selectboxit-options selectboxit-list" tabindex="-1" role="listbox" aria-hidden="true" >

about 4 years ago · Juan Pablo Isaza Denunciar

0

Publicando la solución que funcionó para mí que encontré en este enlace: https://webaim.org/discussion/mail_thread?thread=6559

  1. Se movió tabindex="0" al lapso circundante, ya que esto debería manejar la interacción del teclado.
  2. Se agregaron ID y tabindex="-1" a todos los elementos con role=option.
  3. Se agregó aria-activedescendant al contenedor con role=combobox, que debe actualizarse dinámicamente para apuntar al seleccionado. (Me faltaba este punto en particular que me solucionó el problema)
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda