Does aria-label prevent the inner content being read out by assistive devices? : <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" rel="noreferrer">MDN docs</a> say you should use <code>aria-label</code> like this:</p>

<pre><code>&lt;button aria-label="Close" onclick="myDialog.close()"&gt;X&lt;/button&gt;
</code></pre>

<p>I don't have access to a screenreader, but I've seen comments on Stack Overflow suggesting that an <code>aria-label</code> does not <em>replace</em> the inner content, it only <em>prefixes</em> it. So in the above case it would read out "Close X", which is obviously not ideal.</p>

<p>Is this true? If so, what's the solution? I'm guessing it would make sense to wrap the inner content with an <code>[aria-hidden=true]</code> element, like this:</p>

<pre><code>&lt;button aria-label="Close" onclick="myDialog.close()"&gt;&lt;span aria-hidden="true"&gt;X&lt;/span&gt;&lt;/button&gt;
</code></pre>

<p>...but I'm cautious because I can't test it on a real screenreader.</p>
