0

In the example below I have a aria-label inside my span, which has as content/text the exact same value as the aria-label: which, in this case, is whatever the variable $order->status gets to be.

<span aria-label="{{ $order->status }}" class="ui-badge">{{ $order->status }}</span>

As far as I know, one shoudln't use any aria property if the content makes the job; but in this case, using the propert would make my CSS much easier and descriptive, since I can style for each status without having to create new classes or using BEM's --flag. In this case, is the aria-label allowed or not?

&[aria-label="Pago"] {
  background-color: $green;
}
Bernardo Benini Fantin
  • 79
  • 5
  • 2
    Many screen readers only read aria-label only when the element is interactive / focusable. For a simple span, it won't work everywhere. I recommend using visually hidden text if you don't want it to be displayed on screen instead. – QuentinC Mar 28 '23 at 15:25

1 Answers1

3

aria-label works best on interactive elements (such as links, buttons, and form elements) and landmarks (such as <nav> and <main>). It does not work (or has very spotty support) when used on elements that don't have a role (such as a <div> or <span>).

See "2.10 Practical Support: aria-label, aria-labelledby and aria-describedby", in particular the third last bullet point:

Don't use aria-label or aria-labelledby on a span or div unless it's given a role.

If the only reason you're using it is to make your CSS code easier, I would recommend using a data- attribute and checking that attribute in your CSS.

<span data-myattribute="{{ $order->status }}" class="ui-badge">{{ $order->status }}</span>

[data-myattribute="Pago"] {
  background-color: $green;
}

See also:

slugolicious
  • 15,824
  • 2
  • 29
  • 43