mastodon - Link to source
In today's episode of web accessibility shit-fuckery: prices for an online shop that are aria-hidden, with "screen reader text" that is display: none, rendering the prices completely inaccessible to screen reader users.
<span class="price"><del aria-hidden="true"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>899.00</bdi></span></del> <span class="screen-reader-text">Original price was: $899.00.</span><ins aria-hidden="true"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>799.00</bdi></span></ins><span class="screen-reader-text">Current price is: $799.00.</span></span>
(.screen-reader-text is CSS display: none)

Zach Bennoui reshared this.

in reply to Jamie Teh

mastodon - Link to source

Thomas Kräftner

Somebody badly fucked up their #WordPress site, because that is an essential class in WP and should never be display:none as the documentation very clearly states: make.wordpress.org/accessibili…

The CSS class screen-reader-text

WordPress introduced the class .screen-reader-text in 2009 and extended the use in 2015. Joe Dolson wrote a good post about the extended use of the screen-reader-text class in WordPress 4.2. U…
Make WordPress Accessible
#wordpress
in reply to Jamie Teh

mastodon - Link to source

Jenni

looking at this can I ask a honest question? Because I think I get what the idea was before they derailed themselves and that got me thinking of a partial aspect of it: they are hiding the price reduction - I think partially to not audibly have three numbers in a row read - but that leaves context out. Which leads me to my question: would you actually prefer having all of them? (Most elegant obviously would be having the info as a short sentence in that div and have it be read
in reply to Jenni

mastodon - Link to source

Jamie Teh

@jenni So there are only two prices: the old price and the new price. They've just aria-hidden those and included screen reader versions instead, which are then hidden via display: none because someone screwed up their CSS.
What I'd personally prefer is that they left the <ins> and <del> alone, since those provide sufficient semantics, and not bothered with screen reader text at all. But in the absence of that (compatibility with screen readers that don't support <ins> and <del> or whatever), not screwing up the style sheet would I suppose be acceptable, although it'd still likely be inaccessible to low vision users using a mouse or any screen reader using explore by touch on a touch screen.
@Jenni
in reply to Jamie Teh

mastodon - Link to source

Jenni

yeah I got the technical snafu‘s they did here but what surprised me was the intent to not even alert a screen reading user to the fact that it was a sales price or lower price.
Which I could only explain to myself by then trying not to simply throw out multiple numbers with little context which then got me to wondering if that would be better than simplifying it down to the final price only.
But from your answer I understand that the del should also be read so that solves that
in reply to Mikołaj Hołysz

mastodon - Link to source

Jamie Teh

@miki It differs from case to case. In this case, someone felt that <ins> and <del> weren't sufficient for screen readers. It's possible some screen readers don't read "insertion" or "deletion" or similar; I'm actually not sure. Anyway, they decided to solve this by hiding those real prices using aria-hidden and then providing off-screen, "screen reader only" versions of those prices. The problem is that somehow, instead of just putting the screen reader only text off-screen, they ended up hiding it with display: none, probably thinking "screen readers don't care about that" or similar without actually testing it.
@Mikołaj Hołysz
⇧