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.
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 <span>s would be the way to go.
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.
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.
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?
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
<span>s would be the way to go.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.
Perhaps you could do something with the
:focusevent?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.