Live data from Hacker News

Show HN: Hint.css v2.0 – Pure CSS tooltip library

kushagragour.in

41–50 of 64 posts

Re: Show HN: Hint.css v2.0 – Pure CSS tooltip library

#41
post #8

How accessible is this approach to screen reader users and people who rely on keyboard interaction alone? Edit: A quick test reveals these tooltips are not accessible at all.

To address the screen-reader concerns: As a proof of concept I was able to swap out `data-hint` for `aria-label` without issue: https://github.com/jdan/hint.css/commit/e6541166ec055c525485...

`aria-label` is essentially used twice here - both to populate the tooltip's contents, and to provide an accessibility label to the element that can be read off by a screen-reader.

I proposed these changes to the maintainers under an existing a11y issue (yay to people thinking about it!), but pointed out that if folks are using this library to supplement the contents of an element with a tooltip instead of labeling it, then the a11y changes are not ideal because a screen-reader will omit the element's contents in favor of whatever is inside the tooltip. My gut tells me that this library is mainly used to annotate things like icons.

Re: Show HN: Hint.css v2.0 – Pure CSS tooltip library

#48
post #46

Don't we already have a title (or alt) attribute for , , and other HTML elements?

The title attribute does provide a mouseover tooltip, but for users who are not using a mouse (e.g. they are browsing the web on their phone), there is often no reasonable way to access the title text. For example, as far as I'm aware, iOS Safari will only show title text for images. I see this as primarily an issue with the browser, but until Apple and others implement such functionality into their browsers, it's up to the web developer to ensure those users are able to access the title text.

Re: Show HN: Hint.css v2.0 – Pure CSS tooltip library

#50

Tooltips that flicker as you move mouse on the page feel really cheap. If you look at native tooltips, there is delay that waits for your mouse to "settle" to show the tooltip so that it doesn't flicker.

Hint.css also has a delay before showing/hiding. It can be tweaked as per requirement.
Post reply on HN