0

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.

2
  • Just curious, but why don't you want to hard code an accessibility feature? Sep 24, 2018 at 14:50
  • @DonCarlosII, what I don't want to hard code is the tooltip message. Its just supposed to show the tooltip icon, but the screen reader should read the bubble message that pops up when the user tabs over to the tooltip icon, but the screen reader cannot read it at this time, unless the message is written to the browser as opposed to the pop up bubble text the tooltip feature offers.
    – user8359832
    Sep 24, 2018 at 16:05

1 Answer 1

0

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;
}
1
  • Josh, your top suggestion did not work because I need the data-info-text for the bubble text to appear, however, the code you suggested did work. Thank you.
    – user8359832
    Sep 24, 2018 at 18:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.