- This topic is empty.
January 24, 2013 at 3:22 pm #42220
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?January 24, 2013 at 4:18 pm #122185rosspenmanParticipant
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.January 24, 2013 at 4:26 pm #122188
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.January 24, 2013 at 4:34 pm #122193rosspenmanParticipant
Perhaps you could do something with the `:focus` event?January 24, 2013 at 4:37 pm #122194
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.
- The forum ‘CSS’ is closed to new topics and replies.