Html 屏幕阅读器未读取自定义下拉列表的选项

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

选择1
选择2
选择3
选择4
备选案文5

---

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

我认为您需要给您的列表框一个

tabindex=“0”

，并将焦点放在它上，以获得您想要的功能。

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

不幸的是，制作一个可访问的自定义下拉菜单非常复杂，没有简单的解决方法。我建议您阅读这篇文章。我想最简单的解决方法是使用

元素，但是您不能将自定义样式应用于下拉列表。目前这不是一个可行的解决方案，可能是最后一个选项@TedWhiteheadI刚刚使用VoiceOver进行了测试，当从一个选项移动到另一个选项时，会读取原始HTML。你能发布一个包含JS和CSS的例子吗？这可能与此有关。