Question

I’ve read that it’s bad practice to style content based on HTML5 data-* attributes.

Quote from html5doctor.com:

The presence/absence of a particular data attribute should not be used
as a CSS hook for any styling. Doing so would suggest that the data
you are storing is of immediate importance to the user and should be
marked up in a more semantic and accessible manner.

Could someone shed some more light on this statement or give some examples of why this might negatively impact a user’s experience?

As a really basic example, say I’m using data-attribute-error="404" on elements to give feedback to a script, instead of having to also add error-404, error-500, etc classes on each element for some supplementary styling, couldn’t I just style these like so:

.error { color: red; }
.error[data-attribute-error]:after { content: attr(data-attribute-error); }
.error[data-attribute-error=404] { color: grey; }
.error[data-attribute-error=404]:after { color: red; }
/* etc */

This probably isn’t the best example, and I’m not worried about browser support. I’m just trying to understand the overall concept better.

Seems there would be a lot of cool stuff we could do with CSS3 and custom attributes to style things based on content, keeping our ‘real’ classes more general to handle pure styling that isn’t based on content.

Is this just a general guideline that can be ignored in certain situations, or is it a horrible client-side sin?

Thanks!

Answer 1

Basically what they’re suggesting is that if the error message, status or number is important enough to present to users then it should be presented in an accessible way. WCAG Guideline 1.4.1 says:

Use of Color: Color is not used as the only visual means of conveying
information, indicating an action, prompting a response, or
distinguishing a visual element. (Level A)

The other thing to note is content created by CSS is not available to screen readers and other assistive technologies.