How can I determine the order in which text is read by a screen reader?

Question

I have a created a checkbox component with vue. I am required to create an example checkbox with a two-line label. The first line could be a telephone number and the second line simply says "telephone number".

<checkbox>
  <div class="number">012345678</div>
  <div class="source">telephone number</div>
</checkbox>

Is it possible to let a screen reader read the second line (telephone number) first and then the first line (012345678) and if yes, how is it possible?

Answer 1

It gets read in source order. You can get around it a little bit by styling them to appear in a different order:

 .checkbox { display: flex; flex-direction: row-reverse; justify-content: start; }

 <div class="checkbox"> <div class="number">012345678</div> <div class="source">telephone number</div> </div>

Answer 2

You can use aria-flowto attribute: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-flowto

With that You can set custom reading order of html sections.

Update: I found out that aria-flowto is yet not supported by most of the screen readers. For now JAWS does support it, but NVDA does not. Take a look here: https://www.digitala11y.com/aria-flowto-properties/

Answer 3

There are various aria- attributes that can be used for such purposes.

There is for example the aria-labelledby attribute that you can use to tell which element should be the label for another element.

<div class="checkbox">
  <div class="number" aria-labelledby="phone-number-label">012345678</div>
  <div class="source" id="phone-number-label">telephone number</div>
</div>