Question

我有一个自定义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>

我该怎么做才能使屏幕阅读器读取它。

Answer 1

我相信您需要给列表框一个tabindex=“0”并集中精力使其具有所需的功能。

Answer 2

所以我找到了解决方案，我的代码的问题是，当我们滚动选项时，它没有更改输入字段中的值。在我们浏览选项时更改输入字段的值会使屏幕阅读器读取它们。

屏幕阅读器无法读取自定义下拉菜单中的选项

2 个答案: