Let VoiceOver on iOS read a split element as a single element with the text role

VoiceOver on iOS reads each element individually when a user swipes across the screen. If an element like a link is composed of several span elements, VoiceOver will not read the entire link text but only the text of the active span element (the one that the user has swiped on). Buttons are an exception - VoiceOver will read all child elements at once.

For cases where you want VoiceOver to read the whole text at once you can use the unofficial role text which causes VoiceOver to read the split element as one element. Note that this role is not an official role but just used by VoiceOver. In addition, the role should not be placed on the a tag directly but on a child element because it would overwrite the implicit link role of the a tag.

<a href="https://tinytip.co">
  <!-- Let VoiceOver on iOS read the entire link text at once -->
  <span role="text">
    <span>tinytip</span>
    <span class="material-icons" aria-label="(external)">open_in_new</span>
  </span>
</a>