Accessibility: The Ultimate Programming Holy Grail

Write once, work anywhere: the dream utopia of interoperability. Often frought with implementation snaffus, this is the quest of Web standards. But these standards don’t yet take everything into account. In response to this interesting WATS article I’ve devised a quick and simple compromise to help solve the problem of inaccessible title attributes on various XHTML elements.

[title]:after { content: " (" attr(title) ")"; }

I also wrote a letter to Derek Featherstone, author of the article and co-founder of WATS. I’m hoping to get some feedback on the technique I’m planning on using. If you can offer some advice and feedback, then please let me know as well!

Dear Mr. Derek Featherstone,

I am a freelance web developer based in the New York City area. I have recently become aware of the depressingly dismal state of accessibility on the web at large today. I have thus started an intense self-education campaign in my free time to learn all that I can about accessibility and usability online in an effort to increase the quality of my work.

After reading your article on Hidden information (found at on the WATS web site), I took a quick glance at some of my existing designs and found what I believe to be a relatively painless solution. Unfortunately, it relies upon CSS level 2 selectors and the CSS level 3 pseudo-class :after (or, :before).

I was hoping to get some feedback as to how effective you think this technique may be overall. Here’s the CSS code:

[title]:after { content: " (" attr(title) ")"; }

As you know, this takes any element with a title attribute and writes that title attribute in parenthesis after the element. It can be easily controlled via the stylesheets, restricted to certain elements, and styled based on the element containing it. For instance, blockquotes with title attributes can be styled differently from links with title attributes due to the nature of the information contained in the different elements. For that matter, acronyms with title attributes can be styled differently, too.

Furthermore, placing this in an alternative stylesheet that is linked to only when users specify their preference for "display all hidden content" as suggested in your article is not a difficult task either. Furthermore, browsers with built-in stylesheet switchers will then see this and if named appropriately, for instance, "Green with Hidden Content Visible," this provides yet another control for users.

Naturally, Internet Explorer will be left behind because it doesn’t support this CSS, but that is IE’s deficiency.

The reasoning behind this approach is this: I love technology. I think its main drawback is that not everyone knows how to use it most effectively. Low-tech solutions are only necessary because high-tech ones don’t exist. That said, I want to use all the available tools at my disposal to create the most accessible, usable, and richest site I can. Thus, I am unwilling not to use the technology that I can (title attributes in this case) and I am similarly unwilling to duplicate my efforts in an attempt to cater to what I perceive as vendors’ limitations. In short, I want my title attributes but I also want my page to be as rich as possible and I want to do it all without changing the markup one bit.

The aforementioned CSS provides such a method without needing to touch the underlying XHTML document structure. The title attributes are still accessible to some current devices without visual CSS support, such as screen readers, because they are technically still in the code…right?

Here is where I need your more extensive experience to help me judge the true effectiveness of this technique.

Thanks in advance for any reply, and thanks also for continuing your work and writings on the topic of accessibility.

As an aside, does offer an RSS or Atom news feed? I’d be eager to subscribe if it did.

Thanks again!
—Meitar Moscovitz

So what do you think? Is this CSS example a workable solution?

One reply on “Accessibility: The Ultimate Programming Holy Grail”

Comments are closed.