-1

When I using div content for showing under the image or graphic I must closed these visual contents for accessibility options. And I wannat just showed ( voice over speak ) my aria-label content but. Voiceover didt read this label.

<div tabindex="0" role="definition" aria-hidden="false" aria-label="the bar for Current Balance & Available Credit" ng-if="vm.openCycleInfo" >
        <progress-bar tabindex="-1" aria-hidden="true" class="full-width" vb-min-text="Current Balance" vb-max-text="Available Credit" vb-id="BalanceProgress" vb-minimum-value="0" vb-maximum-value="{{vm.openCycleInfo.CreditLimit.Value}}" vb-current-value="vm.openCycleInfo.OTBBalance.Value"></progress-bar>
        <div tabindex="-1" aria-hidden="true" class="progress-bar-space"></div>
    </div>
Ozan türcan
  • 42
  • 4

1 Answers1

0

I tested your code in NVDA using Chrome and Firefox on Windows, and the aria-label attribute was read correctly each time. VoiceOver does seem to have some unique behavior when compared to other screen readers, so I wouldn't worry about it too terribly much.

Some options:

  1. You could just add the contents of the aria-label attribute to the div as plain text. It would definitely be read.

  2. If you really don't want this text to be visible, you could also take the approach of positioning the text off-screen with CSS rather than using aria-label.

In any case, I wouldn't get too hung up on how one screen reader works. Every screen reader/browser combination will produce slightly different results, and these results will change over time with software updates. The best you can do as a developer is to code to the established standards.

Some people will code hacky "workarounds" to mitigate weaknesses of technology (like this). Going down that path is fine, if you have the resources to continually update your code. When screen reader or browser manufacturers get around to fixing the issues, the workarounds put in place can potentially cause more problems than they solved.

Josh
  • 3,872
  • 1
  • 12
  • 13