Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I have a custom js dropdown, which is not read by screen readers, If dropdown is open, moving from one option to another using arrow keys won't be read, only after selecting one of the options the selected options is pronounced, so the problem is, users won't have any idea about the list of available options until they select one.

I have defined the role but it is still not working.

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

What can i do to make the screen reader read it.

like image 247
Amit Pandey Avatar asked Sep 06 '25 18:09

Amit Pandey


1 Answers

So i found a solution for this, the problem with my code was, it was not changing the value in the input field as we scroll through option. changing the value of input field while as we go through the options makes the screen reader read them.

like image 114
Amit Pandey Avatar answered Sep 08 '25 11:09

Amit Pandey