Specifying Screen Reader Announcements for Textboxes

Issue

I am posting a new question after having put a few hours into searching for a solution, and reading through Similar questions.

Using NVDA, when the textbox receives focus, the label (Organization) is read, then the aria-describedby content (200 West Street, New York, NY), and then the value (Goldman Sachs):

<label for="organization">Organization</label>
<input type="text" id="organization" value="Goldman Sachs" aria-describedby="organizationLocation" />
<span id="organizationLocation">200 West Street, New York, NY</span>

For obvious reasons, in this case, it is preferred the label to be read first (Organization), then the value (Goldman Sachs), then the aria-describedby content (200 West Street, New York, NY).

I have also attempted referencing the textbox from the aria-describedby attribute, though the value of the textbox (Goldman Sachs) is repeated, being announced once after the label (Organization) and once after organizationLocation:

<label for="organization">Organization</label>
<input type="text" id="organization" value="Goldman Sachs" aria-describedby="organization organizationLocation" />
<span id="organizationLocation">200 West Street, New York, NY</span>

How difficult is it to achieve the desired functionality?

Solution

You generally don't want to dictate how a screen reader will announce an element. Different screen readers may announce things differently. Did you test with JAWS or VoiceOver (Mac) to hear the order?

Elements can have an "accessible name" and an "accessible description" in addition to their role and their value. (See WCAG 4.1.2 and the "Accessible Name Computation"). The name and value are often announced first, and then the description, although as you noted, you are hearing the value after the description. That's just how NVDA is choosing to announce it and will be the expected order by NVDA users. If you change that order, it might confuse NVDA users.

Answered By - slugolicious