Accessibility reader - Drop-Down List Value rather than Text | Community
Skip to main content
LucreciousDFF
LucreciousDFF
Level 4
Apr 25, 2019 4:19 PM UTC
Solved

Accessibility reader - Drop-Down List Value rather than Text

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Gaurav-Behl
Gaurav-BehlAccepted solution
Level 10
Apr 25, 2019 7:38 PM UTC

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

View reply

3 replies

Gaurav-Behl
Gaurav-BehlAccepted solution
Level 10
Apr 25, 2019 7:38 PM UTC

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

Translate
LucreciousDFF
LucreciousDFFAuthor
Level 4
Apr 25, 2019 7:11 PM UTC

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?

Translate
Gaurav-Behl
Gaurav-Behl
Level 10
Apr 25, 2019 5:54 PM UTC

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

Translate
Terms & ConditionsAccessibility statement

Loading footer...