DEV Community

Discussion on: Building a tooltip with only CSS

inhuofficial profile image
InHuOfficial • Edited on

Sadly these are not accessible, although I am glad you did at least consider people with disabilities so you get a big ❤ from me!

Firstly you have a big error with your aria usage I am afraid.

If you set the aria-label on something then that is what is read out, it effectively cancels out the content inside.

So <span data-tooltip="right 100" aria-label="Brown fox">Right</span> will actually read out "Brown Fox" not "Right, Brown Fox" as intended.

Also keyboard users (people with mobility impairments being a prime example) have no way of accessing your tooltip content as it is not focusable.

Finally anyone who use a screen magnifier will struggle using your tooltip as you have to have the mouse positioned over the original text for it to work and they may need to move their cursor over the tooltip itself if they have a particularly high zoom level, at which point it becomes invisible again.

You may find this answer I gave on stack overflow helpful, but sadly we have to use JS in my implementation. With a slight adjustment the concept could be used for a tooltip.

Things to Consider

There are a few things to consider here:

  1. Is a question mark sufficiently clear that it is help for the field? I would say no but I will still use it in this example, I would encourage you to use actual words for people with cognitive disorders…