Eating accessibility humble pie

We all make mistakes. Right? Particularly when it comes to accessibility. Often in the rush to ready a site for launch, we forget to check the details that can make a world of difference. That’s what I did when I launched the latest For A Beautiful Web.

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.

Andy Clarke 26/11/09 | Tweet this | Short URL: http://stuffandnonsense.co.uk/s/1234

Designing for Mobile with CSS3 with Dan Rubin

Join world-renowned mobile designer and author Dan Rubin for a full day learning the key steps to transform your site for mobile users, from content strategy to CSS3 to device detection and optimisation.

Book your place only £325.00

Excludes VAT.

Photo credit: © John Morrison / Subism Studios

There have been 12 replies

  1. 1

    Antony Kennedy

    Considering someone using a screenreader and just skipping through the anchors - something like “Designing With CSS Disc” is still confusing. Is it a disc? Or do you mean an app called “CSS Disc”?

    Putting aside the CSS for the moment, what value is this of to an accessible user at all? The anchor text reads (in entirety):

    Designing With CSS Cover Designing With CSS Disc Designing with CSS

    That doesn’t sound like much fun to listen to. If it were me, I’d leave those alt attributes empty entirely. Those pictures and spinny things are all very pretty, but for someone who can’t see them - they don’t have any value as content when you already have an h3 with the same content.

    Using the alt text as a CSS selector just reeks of wrongness to me.

    (This comment was left on For A Beautiful Web)

    26th Nov 2009
  2. 2

    Craig C.

    The disc images could be considered decorative (non-informative) and should thus have empty alt attributes so screen readers will ignore them. Or, since this is HTML5, you could omit alt entirely if your conscience is okay with that. Either one breaks your selector, but you could instead use:

    div.promo-main img[src=“promo-disc.png”]

    to achieve the same effect with the same specificity. Mmm… attribute selectors.

    (This comment was left on For A Beautiful Web)

    26th Nov 2009
  3. 3

    Craig C.

    And Antony (#1) makes a fair point. The DVD cover images could arguably be considered decorative as well, especially given that the title immediately follows. In that case, you could rename the cover images to end with “-cover.png” and use the same clever selector trick on the src attribute:

    div.promo-main img[src*=“cover”]

    But I think the cover images are still meaningful content and deserve alt attributes, just perhaps a bit more descriptive. “Designing with CSS DVD cover art” or something similar.

    (This comment was left on For A Beautiful Web)

    26th Nov 2009
  4. 4

    Michael

    I agree with the first three comments about it not actually being better for screen readers. It also seems like your use of attribute selectors is purely to show off.

    I am 95% certain it is more efficient for the rendering engine to select an id or a class over an attribute, or partial attribute. It is certainly less efficient to have the ancestor selectors.

    I would put a class of “promo-disc” on the img and simply use .promo-disc as the selector.

    (This comment was left on For A Beautiful Web)

    26th Nov 2009
  5. 5

    Andy Clarke

    Antony Kennedy: Putting aside the CSS for the moment, what value is this of to an accessible user at all? The anchor text reads (in entirety): Designing With CSS Cover Designing With CSS Disc Designing with CSS. That doesn’t sound like much fun to listen to. If it were me, I’d leave those alt attributes empty entirely.

    — I can half agree with you about the alt text on the discs themselves (particularly as I used the same image for all the titles), but not about the cover artwork. I would definitely consider them to be content (not presentation) and therefore deserving of good alt text.

    Using the alt text as a CSS selector just reeks of wrongness to me.

    — I’m assuming you mean adding alt text for the sake of binding styles? This would be no better than extra classes or IDs. But using attribute selectors to bind styles using alt text is absolutely legitimate and one of the coolest uses for attribute selectors.

    Craig C: You could rename the cover images to end with “-cover.png” and use the same clever selector trick on the src attribute

    — You are a magician. Why did I not think of that? Fantastic.

    Michael: It also seems like your use of attribute selectors is purely to show off.

    — You got me on that. I’m all about showing off. And of course shameless self promotion.

    26th Nov 2009
  6. 6

    Bobby jack

    First off: I love the effect :) This post led me to check out the page using WebKit for what must have been the first time, and it was definitely worth it!

    I agree with the point about using the alt text as the selector; in my opinion it’s just ‘risky’ since the alt text could easily change and no longer match the selector. A class or ID, whilst ‘extra’ markup, would certainly protect against that. Even a filename, as suggested, would be more robust. I guess it comes done to exactly what you’re trying to represent - should the image be styled that way *because* of its alt text, because of its filename, or because of its ‘location’ (for want of a better term).

    My initial thought on the general issue was that alt text was not appropriate: these covers, particular such ‘pattern-heavy’ ones, really are just decoration rather than ‘content’. Having said that, though, screen readers should not be the only consideration. Users with images explicitly disabled should probably be given some kind of hint as to what those images actually are. That gives them the option of viewing individual images on request, although I’m not sure how well that functionality has been implemented in any browser. So, ideally, I think I’d go with something like “Book cover image for ‘Designing with Microformats’”, etc.

    Finally, in the strapline on that page, I see the word “most” on a line on its own, in between the first and last lines. That’s because of font sizing and the hard line break within that copy - is the line break really necessary?

    Cheers,

    - BObby

    (This comment was left on For A Beautiful Web)

    26th Nov 2009
  7. 7

    Michael

    “Finally, in the strapline on that page, I see the word “most” on a line on its own, in between the first and last lines. That’s because of font sizing and the hard line break within that copy - is the line break really necessary?”

    I’m guessing it’s there to avoid breaking on the hyphenated “up-to-date”. This could be avoided using non-breaking hyphens (like non breaking spaces)

    &#8209;

    http://www.fileformat.info/info/unicode/char/2011/index.htm

    PS we all seem like a bunch of wankers criticising to this level of detail!

    26th Nov 2009
  8. 8

    Inayaili de León

    Oh I love the level of detail of these comments :)

    And to add my 2 cents:

    I agree with the comments that say the alt description for the images could be seen as unnecessary, because the only thing that changes between them is the name on the cover really. The discs are certainly decorative though.

    About the selector itself, you could have just used the fact that the names of the files contain either “main” or “disc”?

    And… if you _really_ wanted to show off, why not use an nth-of-type pseudo-class? :)

    Something like:

    .promo-main div img:nth-of-type(1) { … }

    .promo-main div img:nth-of-type(2) { … }


    I could go on forever…

    (This comment was left on For A Beautiful Web)

    27th Nov 2009
  9. 9

    Michael

    “Oh I love the level of detail of these comments :)”

    Sure beats Smashing Magazine comments…
    “first”
    “me too!”
    “zomg dugg!!”
    “one-hundred-and-forty-first”

    (This comment was left on For A Beautiful Web)

    27th Nov 2009
  10. 10

    Andy Clarke

    Bobby jack I agree with the point about using the alt text as the selector; in my opinion it’s just ‘risky’ since the alt text could easily change and no longer match the selector.

    — You’re right, especially in situations (unlike mine) where the content is dynamic and maybe fed via a CMS. There are other ways of course of selecting the images without using the alt (as Craig Cook points out). Expect a follow up post.

    Finally, in the strapline on that page, I see the word “most” on a line on its own, in between the first and last lines. That’s because of font sizing and the hard line break within that copy - is the line break really necessary?

    — I’ve not seen that, but just in case yours is a common set up, I have removed the break.

    Michael I’m guessing it’s there to avoid breaking on the hyphenated “up-to-date”. This could be avoided using non-breaking hyphens (like non breaking spaces). We all seem like a bunch of wankers criticising to this level of detail!

    — Somehow I missed that in the rush to get the site live. Thanks for the tip. I really enjoy (and I learn a lot from discussions that are this detailed.)

    Inayaili de León Oh I love the level of detail of these comments.

    — Me too. That is one of the reasons why I enjoy writing for such a sophisticated group of readers.

    About the selector itself, you could have just used the fact that the names of the files contain either “main” or “disc”? If you _really_ wanted to show off, why not use an nth-of-type pseudo-class?

    — Again you’re right. Expect a follow up post on how many ways there are to skin this particular cat.

    27th Nov 2009
  11. 11

    Brad Czerniak

    I’m not in love with wrapping an h3 and two imgs in an anchor. Are you allowed to nest block-level elements inside inline elements in HTML5?

    I agree that the disc alt attribute should be empty. How you select it in CSS is your business.

    (This comment was left on For A Beautiful Web)

    27th Nov 2009
  12. 12

    Andy Clarke

    Brad Czerniak: Are you allowed to nest block-level elements inside inline elements in HTML5?

    — Yes. It is one of the best reasons to use HTML5 in non-web applications and the main reason why I do.

    27th Nov 2009
Commenting is not available in this weblog entry.

Tweet a reply using the hash tag #sn_1234

There are currently no tweet replies. Add one?

From the archives

An archive of blog entries since 2004 on subjects including CSS, web standards, accessibility, website design and development.