Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Label.css – an easy way to label DOM elements

usablica.github.io

Post reply on HN
Print view View original

11–20 of 28 posts

Re: Label.css – an easy way to label DOM elements

#11

Post by afshinmeh »

hoseiin wrote: post #6
tehwebguy wrote: post #5

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 #

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

I agree. the links of the header was set to the `#`.

Re: Label.css – an easy way to label DOM elements

#12

Post by 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/

Re: Label.css – an easy way to label DOM elements

#13

Post by 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.

Re: Label.css – an easy way to label DOM elements

#17

Post by hoseiin »

lancer383 wrote: post #13

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.

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.

Re: Label.css – an easy way to label DOM elements

#19

Post by 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/... for info and http://freedomscientific.com/products/fs/JAWS-product-page.a... 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.

Post reply on HN