search

chinchang / hint.css

A CSS only tooltip library for your lovely websites.
https://kushagra.dev/lab/hint/
MIT License
8.42k stars 701 forks source link

Populate tooltip content using the aria-label attribute #128

Closed jdan closed 8 years ago

jdan commented 8 years ago

Hi @chinchang!

Copying some notes from my original issue comment:

You'll see that using aria-label instead of data-hint has the same results:

screen shot 2016-02-01 at 10 24 25 am

But the tooltip's contents are now accessible to screen-readers:

screen shot 2016-02-01 at 10 25 06 am

These changes follow the assumption that the tooltip is labeling the element it is annotating. This means that screen-readers will not read off the actual content of the element itself, but only its tooltip.

Consider the following:

image

In the above scenario, "Checkout" will be omitted in favor of "You will be charged $5.00" by the screen-reader.

jdan commented 8 years ago

In your response you outlined the following strategy for generating the tooltip text:

  1. If only data-hint present, use data-hint
  2. If only aria-label present, use aria-label
  3. If both data-hint and aria-label present, use aria-label

Do you know if it's possible to do this with content/attr alone?

jasonblanchard commented 8 years ago

:+1:

danlopez commented 8 years ago

This would be really helpful to get merged in, any progress on this @chinchang?

chinchang commented 8 years ago

@jdan I have some theories in mind. Will try implementing them if they work out.

@danlopez Will spend time on this the coming weekend.

Merging this branch into the a11y WIP branch to take it forward.

jdan commented 8 years ago

Excellent, keep me posted! Happy to contribute in any capacity.

danlopez commented 8 years ago

Hey @chinchang - any updates on the timeline to get this work merged back into master?

chinchang commented 8 years ago

I went through the specs for css3-content property: https://www.w3.org/TR/css3-content/

Though they seem to have a provision for fallback syntax in attr like so:

figure[alt] { content: attr(href, url), attr(alt); }

it doesn't look like its implemented in browsers yet!

So that means handling aria-label and data-hint attributes probably won't be possible by a single file. That leaves us to having a separate version of hint.css with a11y features, say hint-a11y.css (just like we have hint-base.css now).

How does that sound? Comments, suggestions?

jdan commented 8 years ago

My suggestion is to use aria-label instead of data-hint completely as a breaking change :) I'm biased though.

Separating them into two files sounds fine, just hoping folks will use it!

danlopez commented 8 years ago

We'd definitely use hint-a11y.css if it were provided.

chinchang commented 8 years ago

@jdan @danlopez :) You guys are a11y supporters! Though I am also running a poll to get more inputs: https://twitter.com/hint_css/status/722155293518376961

BTW, good news is that I have been able to provide support for both aria-label and data-hint attributes just using CSS using @tfoxy code in the associated issue: https://github.com/chinchang/hint.css/issues/81#issuecomment-186471802 👍 Have opened a PR against dev with my changes.

Would be great if you guys can review #137