Accessibility reader - Drop-Down List Value rather than Text

[LucreciousDFF]

Hello,

I am attempting to have NVDA and JAWS read back the "Value" of a drop-down selection rather than the abbreviated "Text". Does there exist a solution to force reading of the "Value" as the field width is constrained and we are using abbreviated "Text" as options?

[Gaurav-Behl]

Try aria-label on each option and specify the value otherwise

create a custom class with 1*1px and overflow:hidden and put it in each option. That ways it would only be visible to screen readers and not on DOM but in view source

[LucreciousDFF]

Thank you, I have previously tried <text aria-label="Alberta"> AB</text> for one of the options, however, it did not work so I asked the question here. Now... that being said, I did not follow your second suggestion for the custom class... could you please elaborate with code sample or details on how to implement?

[Gaurav-Behl · Accepted solution]

A sample -

            <a class="nav-menu-toggle" href="#">

                <span class="sr-only">Toggle Nav</span>

                    <span class="nav-menu-toggle">

                        <span class="nav-menu-toggle-1"></span>

                        <span class="nav-menu-toggle-2"></span>

                    </span>

                </a>

.sr-only {

  position: absolute;

width: 1px;

  height: 1px;

  margin: -1px;

  padding: 0;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  border: 0;

}

In your case, you could use <span> within <option>, it would work but that's not recommended per HTML5 specs..

otherwise, you may have to apply a hack here. I'll revert when I find a better solution