Accessibility reader - Drop-Down List Value rather than Text | Community
Skip to main content
LucreciousDFF
LucreciousDFF
Level 4
April 25, 2019
Solved

Accessibility reader - Drop-Down List Value rather than Text

  • April 25, 2019
  • 3 replies
  • 2812 views

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.
Best answer by Gaurav-Behl

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

3 replies

Gaurav-Behl
Gaurav-Behl
Level 10
April 25, 2019

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
LucreciousDFFAuthor
Level 4
April 25, 2019

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
Gaurav-BehlAccepted solution
Level 10
April 25, 2019

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

Terms & ConditionsAccessibility statement

Loading footer...