Semantics of CSS text-swapping? Accessibility concerns?

[dougoftheabaci]

So there was a button I was working on where we’re changing the text on hover. I was looking at ways to do it and someone mentioned just putting in some spans and hiding/showing them based on actions like :hover and targeting specific classes.

I was a bit concerned about doing this because it seemed like it’s a dirty practice, but they pointed out Twitter does this and sure enough if you go to a profile and hover over the follow/unfollow button it changes state via this technique.

My concern was that this might be considered a bad practice but I wasn’t sure about the alternatives. Mostly I was concerned with screen readers and general accessibility. What are everyone’s thoughts on this? I did some research and it didn’t seem like people had a better practice.

I know one alternative would be JS but I wasn’t sure this was a better option. It would certainly be more heavy-handed.

Am I over-thinking this one?

[rosspenman]

I would say that there could be accessibility problems with any sort of button that changes it’s text on `:hover` – even on a mobile device, it probably wouldn’t work as well as you would like.

Since you would probably want a screen-reader to read out both texts (though perhaps you only want it to read out one), two ``s would be the way to go.

[dougoftheabaci]

We’re not too worried about mobile on our site for a number of reasons, but that is a good point to consider for future. In that context I’d likely default to the hovered state.

It is true I very much want it to read out both as to do otherwise would make it unclear as to why there’s a button in the first place. It’s too bad there’s not a way, that I know of, to reliably tell a screen-reader to ignore text via CSS and then update upon action, alerting the screen-reader to the change. I know there is some of that in ARIA for JS, but it strikes me that doing it in CSS would be just as useful.

[rosspenman]

Perhaps you could do something with the `:focus` event?

[dougoftheabaci]

That would still require the use to click or in some other way “activate” the focus. I think I’d be better with a “default” state. Though I could look into what Twitter does more for Mobile.

[Author]

Posts