html - 屏幕阅读器不读取自定义下拉菜单的选项

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

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