2

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 correct way 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>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Reza
  • 18,865
  • 13
  • 88
  • 163
  • 1
    What screen reader are you testing with? Can you also share the whole block of markup? Is it reading the adjacent text and just skipping your span, or is it stopping at the span and not continuing? – Lian Oct 08 '19 at 16:25
  • @Lian I am using JAWS screen reader v2019, there is a button before this span, it stops on button reads button aria-label, then skips the span and goes to table – Reza Oct 08 '19 at 17:09
  • @Lian what html tag I have to use to display a text readable by screen readers? – Reza Oct 08 '19 at 17:27
  • I saw you answered your question, but is there a compelling reason to make that span tabbable at all? – Lian Oct 08 '19 at 18:13
  • @Lian coincidentally I found out it was actually got focused, but after all of the other elements and tables – Reza Oct 08 '19 at 18:17

1 Answers1

3

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.

Reza
  • 18,865
  • 13
  • 88
  • 163
  • 1
    yes you should never use a positive number tabindex as that will ruin the order of the page. Like you wrote -1 or 0 or the only possible tab indexes that generally work. – Gcamara14 Oct 08 '19 at 19:24