屏幕 reader 未读取自定义下拉选项

Question

我有一个自定义的 js 下拉菜单，它不会被屏幕读取 readers，如果下拉菜单打开，使用箭头键从一个选项移动到另一个选项将不会被读取，只有在 selecting selected options 发音为其中一个选项，所以问题是，用户在 select 一个选项之前不会对可用选项列表有任何想法。

我已经定义了角色，但它仍然不起作用。

<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>

我该怎么做才能让屏幕显示 reader 阅读。

Answer 1

我认为您需要为您的列表框提供一个 tabindex=“0” 并关注它以获得您想要的功能。

Answer 2

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

屏幕 reader 未读取自定义下拉选项

Screen reader is not reading options of the custom drop-down

html

screen-readers

nvda