Safari voice over not reading aria-label for a span

Question

<span tabIndex='0' aria-label={ariaLabelText} className={classesContainer}>
    <span className={classesItem}>{cartItemCount}</span>
</span>

I am trying to read the cart item count

Answer 1

As you will discover from this excellent resource aria-label is not supported on <span> because WAI-ARIA specifies <span> as a 'generic' role, which in turn means that it cannot be named.

You can (of course) override the default role by adding a role attribute which supports naming. Choose wisely. If this is going to be keyboard focusable (which your tabindex value suggests) then you should choose an operable role, such as button or link. Better still, use the HTML5 equivalent : <button> or <a> respectively.

In this particular case, where you simply want to announce the number of items in a cart, I would assume that the 'cart' itself is some kind of button, or perhaps a hyperlink, and the number of items in the cart is a kind of description or annotation for that element.

Your 'cartItemCount' can be included as part of the name, or not as you prefer. In the example below, it is excluded from the name by aria-hidden.

Alternatively, an annotation such as this might call for aria-describedby, so you might do something like this:

<button class="cart" aria-describedby="cartItemCount">
   <span class="visibleLabel">{ShoppingCartText}</span>
   <span aria-hidden="true" id="cartItemCount" class="items">{cartItemCount}</span>
</button>

In this example, 'cartItemCount' span is excluded from the button's accessible name (using aria-hidden) yet still exposed to assistive technology via aria-describedby.

As a design consideration, the 'description' of aria-describedby is something which assistive tech users might prefer to disable, relying wholly on naming (at least sometimes), so your annotation might not be 'announced' if it is not part of the name.

Screen readers and other ATs will offer different ways of accessing or muting this 'description' value when an element is in focus.

Note: The ARIA annotations spec, not quite final at time of writing is slated for inclusion in WAI-ARIA 1.3. It offers the aria-description attribute (already supported on some browsers) which will allow such state annotations to be added without creating additional elements.

Answer 2

The VoiceOver screen reader on Mac is able to read each element in the page by using Control-Option + left/right/up/down.

Since you are using aria-label then you are simply overwriting any text which would be presented inside the span. So, your span would need to use `aria-label="{ariaLabelText} {cartItemCount}"

However, why not simply add everything as a bit of text inside the span and be done with it?

I suspect you want to display a number, be able to tab to that cart number and when you reach there via VoiceOver you want to be able to reflect some extra bit of text to the screen reader users.

For that you need to do something different:

<button>
   <span class="visually-hidden">{cartItemText}</span>
   <span class="items">{cartItemCount}</span>
</button>

And below is the CSS for the visually-hidden class:

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

This way you have interactivity, text displayed in numbers for visual users and also text read out aloud for screen reader users.