Grow your CSS skills. Land your dream job.

Semantics of CSS text-swapping? Accessibility concerns?

  • # January 24, 2013 at 3:22 pm

    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

    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

    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

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

    # January 24, 2013 at 4:37 pm

    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.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".