title: How to make screen reader reads aria-label inside <span>?
body: <p>I'd like the screenreader to read the text &quot;Stories, menu item&quot; when the mouse hovers over the &quot;Stories&quot; button in the menu bar. I have tried to add <code>aria-label</code> as well as <code>aria-describedby</code> inside the <code>span</code> but the screenreader is still reading the &quot;Stories&quot; text, instead of &quot;stories, menu item&quot; text.</p>
  <p>Original code:</p>
  <pre><code>&lt;li role=&quot;menuitem&quot;&gt;
       &lt;span class=&quot;&quot;&gt;Stories&lt;/span&gt;
  &lt;/li&gt;
  </code></pre>
  <p>Things that I tried but doesn't work:</p>
  <p>(1) Adding <code>aria-label</code></p>
  <pre><code> &lt;li role=&quot;menuitem&quot;&gt;
           &lt;span class=&quot;&quot; aria-label=&quot;stories, menu item&quot;&gt;Stories&lt;/span&gt;
   &lt;/li&gt;
  </code></pre>
  <p>(2) Adding <code>aria-describedby</code></p>
  <pre><code> &lt;li role=&quot;menuitem&quot;&gt;
           &lt;span class=&quot;&quot; aria-describedby=&quot;stories, menu item&quot;&gt;Stories&lt;/span&gt;
   &lt;/li&gt;
  </code></pre>