

Label.css – an easy way to label DOM elements - hoseiin
http://usablica.github.io/label.css/

======
wittjeff
This is cool. If you add automatic support for the ARIA-label property (just
duplicate your text content in the ARIA-label), this could be an accessibility
tool. Otherwise you're basically hiding potentially needed info, which might
normally be in ToolTips, from users with disabilities.

See [https://developer.mozilla.org/en-
US/docs/Accessibility/ARIA/...](https://developer.mozilla.org/en-
US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) for
info and [http://freedomscientific.com/products/fs/JAWS-product-
page.a...](http://freedomscientific.com/products/fs/JAWS-product-page.asp) for
a demo of the most popular screen reader for blind users.

You might also want to think about tying your CSS colors to system colors, to
support users who use High Contrast mode.

------
aegiso
For the curious, the way this works is ::before/::after selectors with
content: attr() to bind the data attributes, which are position: absolute 'd
within the parent, possibly transitioned.

Zero JS.

If you haven't played with CSS3 lately you might be surprised what it can do.
I know I was a blown away when I discovered it could do data binding. Brings
to mind a great I/O talk that introduced me to a lot of this stuff:

<http://www.htmlfivecan.com/>

------
lancer383
While I like the simplicity of this, I would recommend to keep accessibility
in mind: information put into a data attribute will not be accessible to
screenreaders, and they would miss any information stored via this method.

It may make sense to append the label information to whatever is being used
for the image's ALT attribute.

~~~
hoseiin
I use data-label because i don't wanna limit labels just for images. but for
the images, it's a good idea to use ALT attribute. Thanks.

------
ww520
What's the difference between using the label CSS class and just setting the
title attribute to get the tooltip popup?

------
herge
Fun fact: Even if Mr. Emrani has put a copyright notice in the README.md, it
doesn't apply in the United States! I wonder if the warranty notice is also
also moot?

~~~
coderdude
Watch out for those localized Label.css knock-offs.

------
tehwebguy
This rules, it is exactly what I have been dreading having to create for a
project I am currently working on.

Not sure if you are the creator (edit: you probably are, I just saw your
username here matches the twitter account in the comments) but the Usablica &
Github links at the top link to #

~~~
hoseiin
I'm the creator :) I'm so glad if it was useful for you.

~~~
wheaties
I love this. Quick question, which browsers support this? It doesn't say on
the website.

------
avargas
usabli.ca has been kicking ass lately. I'm actually very happy to see this is
a team coming from a country like Iran.

~~~
afshinmeh
<3

------
non-sense
This is very neat and useful. Thanks for creating and sharing! Good to see new
works coming from Tehran. IIRC, it was itro.js. Keep it up!

------
eridius
Neat, but Fade didn't actually fade (in Safari).

~~~
hoseiin
I developed it in windows. Thank you for report this bug. I'll fix it soon.

------
quackerhacker
Nice, clean and simple! I love how your utilizing CSS3 and the very simple
html5! Mad props!

------
zee007
Dropping my props as well. Great work. Very clean and simple.

------
acron0
Very neat, very slick. What more could you want?

------
afshinmeh
Great! Keep up the good work.

------
shakiba
Boys, I'm prude of you!

------
senorprogrammer
Nicely done!

------
1admin
Nice job mate :)

------
MehdiEmrani
that's great for labeling every thins that you want

