Eating accessibility humble pie

On the home page of the new site are three DVD covers and discs, absolutely positioned and with a little CSS transforms and transitions trickery to spice up the experience for people running Webkit-based browsers. People running non-Webkit browsers will see the positioned images and not know that they are missing a little progressive enrichment.

For A Beautiful Web

For each of the cover/disc combos, my HTML5 markup includes only,

<a href="#">
<img src="promo-main-css.png" alt="Cover" />
<img src="promo-disc.png" alt="Disc" />
<h3>Designing with CSS</h3>
</a>

Then CSS positioning and z-index adjustment completes the design.

div.promo-main img[alt="Cover"] {
z-index : 2;
position: absolute;
top : 0;
left : 0; }

div.promo-main img[alt="Disc"] {
z-index : 1;
position: absolute;
top : 70px;
left : 85px; }

You'll notice that I used CSS attribute selectors to bind the styles to these elements. This was important because I didn’t want to add presentational classes into my markup. For example, class="cover" and class="disc".

Although the content appears to be accessible when turning off author styles using the Web Developer Toolbar extension to Firefox,

using the toolbar to remove images exposes my mistake. The alt text I chose (Cover and Disc) is under descriptive and repeated on all the DVD titles. This could be uninformative (at best) or confusing (worse) to people who use screen readers.

The obvious fix was to add the title of each DVD into the, now more descriptive, alt text.

<a href="#">
<img src="promo-main-css.png" alt="Designing With CSS Cover" />
<img src="promo-disc.png" alt="Designing With CSS Disc" />
<h3>Designing with CSS</h3>
</a>

With more content added to my alt text, simple attribute selectors are not sufficient to bind my styles to these elements. I needed something with a bit more bite. Attribute Substring Selectors are the right tool for this job as they allow you to select an element where (in this case) the words Cover and DVD appear somewhere in the alt text string.

div.promo-main img[alt*="Cover"] {
z-index : 2;
position: absolute;
top : 0;
left : 0; }

div.promo-main img[alt*="Disc"] {
z-index : 1;
position: absolute;
top : 70px;
left : 85px; }

Look closely and you’ll notice the asterisk before the attribute selector equals symbol.

Even with images turned off or unavailable, my content is more meaningful and more accessible.

Best of all, this took less than a minute to implement.

You might be interested in my Designing Web Accessibility DVD. Hmmm… pie.