Adding aria-label to text elements

Question

So I have an HTML button, with 2 divs inside it - each of which displays certain text. Sample code below. I need to insert some text between the 2 divs such that it is only to be read by screen readers and isn't needed visually speaking. This is a large shared component so I can't really modify the control itself, hoping to just tweak the accessibility part:-

I tried using aria-label on div2, and arialabelledBy keeping the label text hidden on the screen (display: none).

<button>
    <div id="div1" >Main text here</div>
    <div id="div2" >sub text here</div>
</button>

In the above example, I need the screen reader to read something like:- "Main text here, in between, sub text here". How do i represent "in between" above. I tried aria-label \ labelledBy but those get ignored by Narrator.

I would try adding an aria-labelledby on the button itself and point it to “div1 betweentext div2”, thus concatenating your way to the required result. — Tobias Christian Jensen

slugolicious slugolicious · Accepted Answer · 2019-08-06T07:20:32

You need the additional text in its own <div> and then use a class to visually hide the element but still allow screen readers to read it. This is a very common practice. See What is sr-only in Bootstrap 3? for an example of a class that will do this.

Also check out "Invisible Content Just for Screen Reader Users" by WebAIM.

So you'd have something like:

<button>
    <div id="div1" >Main text here</div>
    <div class="sr-only" >in between</div>
    <div id="div2" >sub text here</div>
</button>

Adding aria-label to text elements

1 Answers