1

I am using the mac default screen reader.

I am expecting the screen reader to read the text and aria-label as is.

But instead it reads out group twice. It seems to read out group whenever aria-label is used.

But why? This is not a group and believe this is causing confusion for the person listening to it.

Anyway I can turn off the screen reader from saying group?

Tried adding role='text' which doesn't make a difference.

This is the html

<!DOCTYPE html>
<html>
    <body>
        <p>
            Some text <strike aria-label="This used to cost">$1000</strike> <span aria-label="now it costs">2000</span> some ending text
        </p>
    </body>
</html>

I am expecting it to read out:

Some text This used to cost $1000 now it costs 2000 some ending text.

But instead it reads out the following where it adds group twice.

Some text This used to cost, group $1000 now it costs group 2000 some ending text

kar
  • 4,791
  • 12
  • 49
  • 74
  • In my experience "group" is a bit if a Voiceover quirk. But more importantly here, you can't have an `aria-label` - or any other accessible name - on a "generic" element like a `div` or `span` with no `role`. These elements are semantically meaningless, so it doesn't make any sense to name them. – Robin Zigmond Mar 09 '23 at 22:08
  • @RobinZigmond Do you mean I should add a role=text for these. Felt with ot without it made no sense visually or to the screen reader. Wanted to reduce unneeded code unless it is needed after all. – kar Mar 09 '23 at 22:10
  • there's not an appropriate role to use for these though - which makes using aria-labels an inappropriate solution to your problem. `text` is not an officially-supported ARIA role - although from googling it seems it may work in some browsers/screenreaders. But personally I'd be very wary of it. – Robin Zigmond Mar 09 '23 at 22:43
  • Personally I would just rewrite your content so that the meaning isn't conveyed through strike-through text. If you can't avoid that, then mark the whole thing with `aria-hidden="true"` and put your alternative text for screenreaders in a [visually hidden](https://www.a11yproject.com/posts/how-to-hide-content/) element. – Robin Zigmond Mar 09 '23 at 22:46
  • @RobinZigmond The initial solution was to hidden it. Turns out is not a standard it seems . Where if something is visually seen it should be read out too. Particularly for someone that has partial visual impairment. – kar Mar 09 '23 at 23:43
  • 1
    `` isn't an HTML element. Is there a reason you aren't using [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del)? – Sean Mar 10 '23 at 00:23
  • 1
    (to the OP): I 100% agree with you, but I was merely suggesting an alternative means of achieving what you're already attempting - have screenreaders read out the "actual meaning" of what sighted users would see. Which I now see @slugolicious has put into an answer, albeit phrased in a slightly different - and hopefully more understandble to you - way. – Robin Zigmond Mar 10 '23 at 09:19

1 Answers1

1

See "Practical Support: aria-label, aria-labelledby and aria-describedby". The third last bullet point says:

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

In your case, there isn't an appropriate role. But you can still get what you want by having screen reader text. This is text that is not visible but is read by a screen reader. You should continue to use the <strike> element (see Update below regarding <strike>) because it's visually correct, but unfortunately the <strike> element doesn't convey any semantics to the screen reader so you have to code that yourself.

<p>
Some text <span class="sr-only">This used to cost</span> <strike>$1000</strike> <span class="sr-only">now it costs</span> 2000 some ending text
</p>

The "sr-only" class is not a specially named class but it's common to use that name for a class that visually hides text that is available for screen readers (sr). So "sr-only" means "screen reader only" text.

You can see an example of "sr-only" here, What is sr-only in Bootstrap 3?

Update: I neglected so point out that the <strike> element was deprecated in HTML5. The replacement is either <s> or <del>.

slugolicious
  • 15,824
  • 2
  • 29
  • 43