Tooltip screen reader will read text of but text to remain visually hidden

Question

I am trying to find a way that the screen reader will read the bubble text inside of tooltip icon, without actually having to display the text in the browser. In other words, its okay to display it inside the bubble that appears when the screen reader tabs over to the tooltip icon and reads the text, but so far the only way screen reader will read the text is if I hard code the text in the DOM if that makes sense.

So this is what I have:

<div class="sub-item content-spaced">
  <span class="text">{{translations.taxEstLabel}}</span>
  {{#hasEstimatedTax}}
  <span class="value">{{totalEstimatedTax}}</span>
  {{/hasEstimatedTax}}
  {{^hasEstimatedTax}}
  <div aria-live="polite" class="tooltip" role="tooltip" tabindex="0" data-info-text="{{translations.taxEstMessage}}"><span
      style="display:none">{{translations.taxEstMessage}}</span></div>
  {{/hasEstimatedTax}}
</div>

I just want screen reader to read whats inside of data-info-text attribute, but it looks like the screen reader does not work that way. So I tried to create a span element with the text inside, but visually hiding the span element, but that hides the message from the screen reader and thus cannot read it.

Any suggestions out there? I have tried different things but I am new to the world of accessibility.

Answer 1

Have you considered using aria-labelledby instead of data-* attributes? You may have to assign a role attribute, since you're using div and span elements.

This article gives an overview of the functionality and usage of aria-labelledby : https://developer.paciellogroup.com/blog/2017/07/short-note-on-aria-label-aria-labelledby-and-aria-describedby/

Alternatively, if you want to hide text from sighted users, but still make it available to screen-readers, that's typically done via CSS and positioning the text off-screen.

/* -- HTML --*/

<div class="hidden-text">Some Hidden Text.</div>

/* --- CSS --- */

.hidden-text { 
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}