'Why is my screen reader reading lines multiple times?

I have an HTML structure like

<button ng-disabled="vm.updating" ng-click="doSomething()" class="something" type="submit" aria-label="average score">
  
<span ng hide="hideConditional()" class="font-white">score</span>
<span ng-show="showConditional()" class="font-white">
  <span class="grey"></span>
  <span>scoring</span>
</span>
</button>

When I turn on the screen reader, it reads average score score scoring button multiple times and then again score scoring, but I only want it to read whatever text I write into the button and ignore child elements text like everything which is inside spans or any control underneath the button. But I am not able to ignore the rest of the content.

I tried to use aria-hidden on each span but no avail.

Can anyone please correct me? What am I missing here? How can make the screen reader ignore text from elements inside button and make it only read text which is set on the button itself?

htmlangularjswai-ariascreen-readers


Solution 1:[1]

I've used: 

<div class="" aria-hidden="true" role="presentation" > </div>

It worked very well for me.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Shanaz

Related Questions