CSS-Tricks.com, a blog by web designer / developer Chris Coyier is one I frequent on a regular basis. Chris is a pro when it comes to everything CSS, and is solid when it comes to just about anything else web design related. He recently wrote a blog post concerning the growing use of CSS animations.
The main point of the article is that empty divs when used for nothing but styling are and always have been a bad idea for CSS animations. He reminds us that the purpose of animations are to give mood, attitude, and affect how the user feels about the page, but that they only do that for sighted users. For non-sighted users these empty divs are completely useless. To clarify, non-sighted users refer to those using screen readers. In order to fix this issue it’s becomes as simple as placing descriptive text of the animation within the formerly empty div element and placing it off screen with a negative text-indent. Chris gives the example of a CSS animation of a moon rising and fading the background to black as it moves up from the ground. He places text into those div elements (see example).
<div class="moon"> I see a bad moon rising I see trouble on the way </div> <div class="ground"> I see earthquakes and lightnin’ I see bad times today </div>
I think Chris makes a point that is probably very often overlooked. The main part being that empty divs do not equate to nice, semantic code, but secondly that they also provide nothing for non-sighted users. I think that CSS animation is definitely here for good and so it would be a good idea for web designers to get into the habit of adding this description, alt-like text into animation elements that would otherwise be empty. What’s nice is that it’s such an easy thing to implement.
At the end of the blog entry Chris makes a good side point, which is that he doesn’t use screen readers, and so for that aspect he doesn’t know for sure if the text would in fact be a hindrance or a boon. It’s my opinion that Chris’s initial though bears food for though. Since we are trying to create an experience for people, adding this descriptive text adds an element of experience that isn’t generally used by most sites. But I do agree with his very last point, which is, “Like everything else in this world: it depends.”
Original Article
