Why is my screen reader reading lines multiple times?
<p>I have an HTML structure like</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button ng-disabled="vm.updating" ng-click="doSomething()" class="something" type="submit" aria-label="average score"&gt;
  
&lt;span ng hide="hideConditional()" class="font-white"&gt;score&lt;/span&gt;
&lt;span ng-show="showConditional()" class="font-white"&gt;
  &lt;span class="grey"&gt;&lt;/span&gt;
  &lt;span&gt;scoring&lt;/span&gt;
&lt;/span&gt;
&lt;/button&gt;</code></pre>
</div>
</div>
</p>
<p>When I turn on the screen reader, it reads <strong>average score score scoring button</strong> multiple times and then again <strong>score scoring</strong>, 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.</p>
<p>I tried to use <code>aria-hidden</code> on each <code>span</code> but no avail.</p>
<p>Can anyone please correct me? What am I missing here? How can make the screen reader ignore text from elements inside <code>button</code> and make it only read text which is set on the button itself?</p>