使屏幕阅读器阅读跨度文本的正确方法是什么

Question

I am new to accessibility, I have a span with text like below

<span  class="text" >Account Information</span>

By default screen reader doesn't stop on my span and doesn't read it, so I googled and searched on SO, but none of the solutions work

I ended up something like below, still not working (I tested on Chrome, with JAWS screen reader)

<span aria-live="assertive" class="text" role="region" tabindex="4" aria-label="Account Information">Account Information</span>

What is the best practice to make screen readers read the span texts?

update full html

<section _ngcontent-lfb-c4="" class="toolbar">

  <dx-button _ngcontent-lfb-c4="" class="maximizing-button dx-button dx-button-normal dx-button-mode-contained dx-widget dx-button-has-icon" ng-reflect-element-attr="[object Object]" ng-reflect-icon="material-icons mat-fullscreen" role="button" aria-label="Maximize Widget" tabindex="0" aria-pressed="false">
        <div class="dx-button-content"><i class="dx-icon material-icons mat-fullscreen"></i></div>
    </dx-button>

    <span _ngcontent-lfb-c4="" aria-live="assertive" class="text" role="region" tabindex="4" aria-label="Account Information">
        Account Information
    </span>

    <span _ngcontent-lfb-c4="" class="toolbar-right">
      <span _ngcontent-lfb-c1="" class="total-account-value-info" role="note" tabindex="3" toolbar-right="">
       (Total Account Value is as of the end of last business day)
      </span>
    </span>

</section>

Answer 1

I found what was my mistake, I am sharing in case someone else had same issue.

The problem was with tabindex="4" , actually this will change the order of tabs in a way. so I set it to 0 and my issue is fixed.

tabindex=0

When tabindex is set to 0 , the element is inserted into the tab order based on its location in the source code. If the element is focusable by default there's no need to use tabindex at all, but if you're repurposing an element like a <span> or <div> , then tabindex=0 is the natural way to include it in the tab order.

tabindex=-1

When tabindex is set to a negative integer like -1 , it becomes programmatically focusable but it isn't included in the tab order. In other words, it can't be reached by someone using the tab key to navigate through content, but it can be focused on with scripting.

tabindex>=1

It's when tabindex is set to a positive integer that things get problematic. It imposes a tab order on the content that bears no resemblance to the expected tab order.