Aria-label and voice over

Question

I am working on accessibility and have a issue where the aria-label is ignored by voice over on iPhone when using mobile. I have also tested with Jaws and NVDA without issue. On Jaws and NVDA the aria-label + the title is read, but on voice over only the {{title}} is read.

#Example 1:
 <item-content>
    <div class="title-container-text">
      <span class="title-container-title" [attr.aria-label]="(titles.get('purpose') | async).label + (': ') + (title)">
        {{title}}
      </span>

#Example 2:
         <label id="draftItemTitle" class="visually-hidden">(titles.get('purpose') | async).label</label>
      <span aria-labelledby="draftItemTitle" class="title-container-title">
        {{title}}
      </span>
    </div>
  </app-list-item-content>

The code above shows 2 ways I have tried to fix this without success.

Answer 1

aria-label does not work consistently on non interactive items.

Note: aria-label is intended for use on interactive elements, or elements made to be interactive via other ARIA declarations...

Source: MDN

There is an interesting thread as to why aria-label doesn't override on generic containers etc.

The fix

The solution is to use visually hidden text (screen reader only text) instead and hide the original text using aria-hidden.

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<item-content>
    <div class="title-container-text">
      <span class="title-container-title" aria-hidden="true">
        {{title}}
      </span>
      <span class="visually-hidden">{{sr-title}}</span>
</div>
</item-content>