CODEWITHSUNDEEP
htmlcsswai-ariascreen-readers
D. Mous
D. Mous

Reputation: 1

Adding aria-label to text elements

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.

Upvotes: 0

Views: 1774

Answers (1)

slugolicious
slugolicious

Reputation: 17435

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>

Upvotes: 1

Related Questions