Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

173
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda