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.
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.