title: a11y | Mac voiceover is reading aria-label and all nested text
body: <p>Im having a weird issue in a slider I have. The basic markup is this:</p>
  <pre><code>&lt;ol class=&quot;slider-list&quot; aria-live=&quot;polite&quot;&gt;
      &lt;li class=&quot;slider-page&quot; aria-hidden=&quot;false&quot; aria-roledescription=&quot;slide&quot; aria-label=&quot; | 1 of 5&quot;&gt;
          &lt;ul class=&quot;col-container cols-4 rows-1&quot;&gt;
              &lt;li class=&quot;col item&quot;&gt;
                  &lt;div class=&quot;entity-container&quot;&gt;
                      &lt;div class=&quot;entity-mask&quot;&gt;
                          &lt;a class=&quot;entity-link&quot; aria-label=&quot;My Aria Label&quot; tabindex=&quot;0&quot;&gt;
                              &lt;div class=&quot;entity-box&quot;&gt;
                                  &lt;div class=&quot;aspect&quot;&gt;
                                      &lt;img class=&quot;thumb&quot; src=&quot;https://someurl.com/picture.jpg&quot;&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/a&gt;
                          &lt;div class=&quot;entity-details&quot;&gt;
                              &lt;a class=&quot;entity-link&quot; tabindex=&quot;-1&quot;&gt;
                                  &lt;h3 class=&quot;title no_focus&quot;&gt;
                                      &lt;span&gt;My Title&lt;/span&gt;
                                  &lt;/h3&gt;
                              &lt;/a&gt;
                              &lt;div class=&quot;movie-release-date&quot;&gt;My Release Date&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              ...
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class=&quot;slider-page&quot; aria-hidden=&quot;true&quot; aria-roledescription=&quot;slide&quot; aria-label=&quot; | 2 of 5&quot;&gt;
          ...
      &lt;/li&gt;
      ...
  &lt;/ol&gt;
  </code></pre>
  <p>Now let me get some things out of the way - functionally and visually everything is working. As you tab through the different column items the aria-label is read, in this case <code>My Aria Label</code> is being read.</p>
  <p>The problem is, after that aria-label is read, then all the nested text is read too, including <code>My Title</code> and <code>My Release Date</code>. Even weirder is its ALSO going up the tree and reading the siblings aria-labels all at once without any additional tabbing - its just all read but there is a pause between the proper aria-label being read and the rest of the content being read.</p>
  <p>This is only happening in Safari and Chrome (recent versions).</p>
  <p>Any idea what is going on here?</p>