How to read input then label via screen reader?

Question

I'm making changes for accessibility and I've got an input that has a label that has a dynamic value (number of search results) that needs to be read to the user via screen reader.

I'm seeing an issue where the input is read, then the label I've set up with the dynamic content begins to read, and then the input is read again, interrupting the dynamic content.

I've tried setting aria-live="assertive" on the label, and using aria-describedby as well as aria-labelledby .

Is there a way to have the input read before or after an input label?

Thanks :)

      <label id="searcHResults" aria-live="polite">
        {numResults}
      </label>
      <div className="input-parent">
       <div className="input-container">
        <input aria-labelledby="searchResults" />
        {hintText && (
          <div className="hint">
            {hintText}
          </div>
        )}
       </div>
      </div>

Answer 1

A screen reader will typically read the label or name of an element first, and then the value of the element. You can't control that order.

Is there a way to have the input read before or after an input label?

Which do you want? Before or after? If you're asking about both, then one will always be true, although as mentioned above, the value of an <input> is normally read after its label.

I've got an input that has a dynamic value (number of search results)

I'm having trouble following this. When you say you have an "input", do you literally mean <input>? When showing search result numbers, it's typically just plain text. Putting it in an <input> sounds like the user can change the number of search results.

Any text on the page that updates should always be wrapped in aria-live="polite" so that when innerHTML changes (or whatever property you're changing), it will be announced by screen readers.

It sounds like you might be throwing too much ARIA at the problem. It's always best to keep it simple. Use semantic HTML first , and if that's not sufficient, then a small dose of ARIA can usually fix the problem.

If you post the code, it might be easier to diagnose.

Update January 24, 2019

A few clarifications given the newly posted code and your comment.

There is a googlePlaces API search results div that is appended to the input

If you're referring to the {hintText...} stuff in your code snippet, then technically that code is not appended to the input. The <input> has a closing tag ( /> ) so there's nothing added to the input. The {hintText...} code is appended after the <input> so it is a sibling of the <input>. That might sound like a petty detail but it makes a difference.

the number of results is retrieved, and that value becomes the innerHTML of a dynamically updated label associated with this input.

Ok, so that clears up a little confusion. Your OP said you had dynamic text in your <input> but in reality, you have dynamic text in your <label>. Again, this is a big difference.

As mentioned in my earlier comment to Use semantic HTML first , avoid ARIA attributes if you can. In this case, instead of having aria-labelledby on the <input>, use the for attribute on the <label>

<label id="searcHResults" aria-live="polite" for="myinput">
  {numResults}
</label>
<div className="input-parent">
  <div className="input-container">
  <input id="myinput"/>
  {hintText && (
    <div className="hint">
      {hintText}
    </div>
  )}
  </div>
</div>

Above code has

• for attribute added to the <label> (points to the <input>)
• id added to the <input>
• aria-labelledby removed from the <input>

When you tab to the input field, its label (the dynamic number) will be read before the <input> itself.

If you do something else on the page that causes the <label> to have an updated number, only the new number in the label will be read because it's the only thing with aria-live="polite" , so you'll just hear "15" (or whatever the search results number changes to).

If you want more context to what the updated number means, you can look at aria-atomic .

For example,

<label id="searcHResults" aria-live="polite" for="myinput">
  <span id="updateme">{numResults}</span>
  search results were found
</label>

When updateme has a new value, only "15" will be announced by the screen reader because that's all that changed. The rest of the text in the label didn't change so it's not announced. If you want everything to be read, add aria-atomic="true" to the <label>

<label id="searcHResults" aria-live="polite" for="myinput" aria-atomic="true">
  <span id="updateme">{numResults}</span>
  search results were found
</label>

Now when the number changes, the screen reader will announce " 15 search results were found ".

Answer 2

<input type='text' aria-label='Screen reader can see this!' />

我认为这是您正在寻找的答案。