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.

The `` element cannot be used to label a ``. It can only be used to label [form labelable elements](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#form_labelable). — Sean, Feb 03 '22 at 18:34

score 1 · Answer 1 · answered Feb 03 '22 at 09:24

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>

Than you for the answer! It is working to some extent. The issue with this solution is that the span with aria-hidden makes the span "not clickable". This can be an issue for people who have vision but are dependent on accessibility tools. I can position the span with the sr-title on top of the "original" span, but this seems to be a lot of work for a workaround. Is there any roles that are usable for issues like this? The role="note" seems appropriate, but it reads the title, then the arialabel + title + landmark — , Feb 03 '22 at 13:49
Why are you trying to make the span clickable? Is this meant to be interactive as if that is the case it should probably be a ` — GrahamTheDev, Feb 03 '22 at 16:19

Aria-label and voice over

1 Answers1

The fix