我有一个自定义的js下拉列表，屏幕阅读器不会读取，如果下拉列表打开，则不会读取使用箭头键从一个选项移动到另一个选项，只有在选择其中一个选项后，所选选项才会发音，所以问题是，用户在选择一个选项之前不会对可用选项的列表一无所知。
我已经定义了角色，但它仍然不起作用。
<div class="select__holder" role="listbox" id="select-7181726" style="top: 1540px; max-height: 324.955px; left: 531.352px; width: 759px;">
<div id="select-7181726option-11" data-index="0" data-value="1" role="option" class="select__option" aria-selected="false">
<span class="select__option__lbl">
<span class="select__option__txt">option 1</span>
</span>
</div>
<div id="select-7181726option-22" data-index="1" data-value="2" role="option" class="select__option" aria-selected="false">
<span class="select__option__lbl">
<span class="select__option__txt">option 2</span>
</span>
</div>
<div id="select-7181726option-33" data-index="2" data-value="3" role="option" class="select__option" aria-selected="false">
<span class="select__option__lbl">
<span class="select__option__txt">option 3</span>
</span>
</div>
<div id="select-7181726option-44" data-index="3" data-value="4" role="option" class="select__option active" aria-selected="true">
<span class="select__option__lbl">
<span class="select__option__txt">option 4</span>
</span>
</div>
<div id="select-7181726option-55" data-index="4" data-value="5" role="option" class="select__option" aria-selected="false">
<span class="select__option__lbl">
<span class="select__option__txt">option 5</span>
</span>
</div>
</div>
我该怎么做才能让屏幕阅读器阅读它。
所以我为此找到了一个解决方案，我的代码问题是，当我们滚动选项时，它不会更改输入字段中的值。 当我们浏览选项时，更改输入字段的值会使屏幕阅读器阅读它们。
我相信你需要给你的列表框一个tabindex=“0”，并把重点放在它上，以获得你想要的功能。