Adobe Spry and obtrusive, inaccessible JavaScript

In these days of JavaScript framework mega-hype it is nice to see “Progressive enhancement” at least being mentioned (though pretty well hidden) in the documentation for Adobe’s Spry framework. However, just like Jeremy Keith notes in Spryjax, the example is not what I would call progressive enhancement.

Sadly, the demos and examples I have looked at reflect this - they do not use progressive enhancement at all, and they definitely do not degrade gracefully. In addition to that, many examples contain invalid HTML by the way of custom attributes.

Spry doesn’t stop at requiring custom attributes either - one of the demos I looked at recommends giving a div element a tabindex attribute to enable keyboard navigation. Well, had someone spent all of 10 seconds to look at the HTML 4.01 Specification they would have noticed that tabindex is not a valid attribute for a div element, which is likely why it does not work in Safari. Even worse is the very odd-looking src value for the image in the Photo Album demo:

src="galleries/{dsGalleries::@base} {dsGallery::thumbnail/@base}{@thumbpath}"

Ok. Now make that degrade gracefully.

Yes, they do state that some demos are just “proof of concept” and that they are neither accessible nor use progressive enhancement. But I am pretty sure that the number of people who will grab an example and use it as-is will be much larger than the number of those who figure out how to make it degrade gracefully. Remember that Spry is aimed at Web designers, and is HTML-centric, and easy to implement for users with basic knowledge of HTML, CSS and JavaScript (emphasis mine).

I also find the following quote from the Spry FAQ disturbing:

If you need to support the case where JavaScript is turned off in your own Spry pages, we recommend that you use a server-side redirect to a static page, or rely on noscript tags in your page to either perform the redirect or notify the user that they must enable JavaScript.

Hmm. I thought this was the 21st century.

Come on Adobe, you both can and should do better than this.

January 23, 2007
Comments closed
Posted in Accessibility JavaScript

Comments

1. January 23, 2007 by Mark Wubben

What's wrong with tabIndex (if, of course, properly used)? It makes your site/web app more usable by having better control over how the user tabs through the page. It may not be valid but seems a worthwhile exception to me.

2. January 23, 2007 by Roger Johansson

Nothing would be wrong with tabindex if they had used it properly ;-). From my limited testing, their invalid tabindex only seems to work in Gecko browsers (and probably IE).

3. January 23, 2007 by Ryan Brooks

Roger, I haven't heard too much about the Spry framework, though the demos are quite good. How do you feel it compares to something like the Yahoo UI?

-Ryan

4. January 24, 2007 by Mo

I'm curious (given it's something I've reached the conclusion as being a necessary evil in some instances): what's your opinion on using custom attributes in a properly-declared namespace in an XHTML document?

For example, adding additional attributes to form fields provide additional information beyond ‘type’ and ‘maxlength’ on input elements such that client-side validation scripts can be smarter about it?

Obviously (I recently discovered), the W3C's XHTML validator doesn't understand namespaces, but the resulting document would be well-formed, the content in the XHTML namespace would be valid, and user-agents should deal with it gracefully (effectively, it's no different from embedding MathML or SVG in XHTML).

Opinions more than welcome, as it's a facet of development I'm seriously considering.

5. January 24, 2007 by Tom

Using a tabindex seems to be a good intensions, however most browser only give keyboard access to things with tabindex in the spec by default. Adding tabindex at best will do nothing for non-Gecko browsers and at worst might confuse screen readers and IE trying to access the content via the MSAA (although that's just a gut feeling).

I think their use of custom attributes yet still trying to provide keyboard navigation support shows a desire to tick the boxes of 'progressive enhancement' and 'accessibility' without properly understanding them. There are some great people in Adobe who do understand this stuff, I would suggest the Spyre team actually talk to them (duh).

6. January 24, 2007 by Rick Curran

I haven't used much in the way of Javascript frameworks apart from a little use of scriptaculous. I'd be interested in your assessment of the accessibility friendliness of the various libraries out there. Roger, have you looked into other libraries in this regard?

~Rick

7. January 24, 2007 by Martin

Shame on Adobe Spry.

Time we educate the bastards!!

8. January 24, 2007 by Dr Who

Did I wake up in 1999 again? I really need to get that Tartus fixed.

9. January 24, 2007 by Calophi

Silly Dr. Who, you live in the TARDIS. :)

Seriously though, Mo brings up a good point - if they had used namespaces for their tags, would their library be any better in your eyes? Obviously the markup leaves a bit to be desired though...

10. January 24, 2007 by Jim

what's your opinion on using custom attributes in a properly-declared namespace in an XHTML document?

Go right ahead. But you can't call it text/html though.

11. January 24, 2007 by Daniel Gr

Everything that comes out of Adobe is a joke. For example, today, I installed Adobe Reader 8 on a PC and learned that it took 100+ MB just from scratch.

Adobe = a joke.

No worry though - jaspoid will put Adobe out of business within 3 years. And Microsoft. And Yahoo. Oh happy days..

12. January 24, 2007 by Rasmus Kaj

Everything from Adobe a joke? Come on, Daniel Gr. Adobe created both Postscript and PDF, the only serious alternatives there are for prepress / print formats.

I do admit that in the context of web, however, Adobe hasn't done much good ...

13. January 24, 2007 by Stephane Deschamps

Roger,

Although tabindex is not valid per se, I found that it's a good way to focus on the right part of the page when, for instance, it's been changed through Ajax - actually that's what Jeremy is doing, and I've tested it with JAWS and it seems fine.

Of course I'm not saying one should think it good to have tabindexes all over the place, but dynamically adding a tabindex to a DIV so that JAWS's focus points to the right place is indeed something that we have to look into.

14. January 25, 2007 by Roger Johansson

Ryan:

How do you feel it compares to something like the Yahoo UI?

I haven't tried either enough to have an opinion on that, really.

Mo:

what's your opinion on using custom attributes in a properly-declared namespace in an XHTML document?

Not worth the trouble. I use the class attribute instead.

Rick:

I'd be interested in your assessment of the accessibility friendliness of the various libraries out there.

It depends on how you use them. Unfortunately many demos and examples are both obtrusive and inaccessible.

Calophi:

if they had used namespaces for their tags, would their library be any better in your eyes?

Perhaps. But I still think they should use the class attribute.

Stephane:

dynamically adding a tabindex to a DIV so that JAWS's focus points to the right place is indeed something that we have to look into

Sure, but it only solves the problem in a few browsers. In the Accordion Widget demo I don't see why they don't just create real links on the fly instead of faking it. That would solve the problem for everybody in this case.

15. January 25, 2007 by JEREMY

I must say that Photo gallery does work very nicely though (in Firefox) http://labs.adobe.com/technologies/spry/demos/gallery/. Can anybody recommend an accessible alternative?

This one is cool but it requires Flash. http://www.airtightinteractive.com/simpleviewer/

16. January 25, 2007 by Rich Ziade

Are we still worrying about Netscape 4.7 and Javascript being turned off? Move on folks. You can buy a $400 computer these days that runs Google Maps beautifully.

Good, thoughtful planning for potentially dangerous scenarios is worthwhile, but when we stop moving ahead, i.e. when we let those scenarios dictate how we think and stop us from think in innovative ways - that's when you start to worry.

Truth is - Google Maps turned the tables. Google had the balls to say "this is good enough for you to upgrade. Our software makes it worthwhile, so go do it."

And people did.

-Rich

17. January 25, 2007 by Mark

I thought that usage of tabIndex came from Microsoft's Accessiblity Initiative, and the folks at Mozilla chose to support it. No, it doesn't validate, but it definitely improves keyboard access.

18. January 25, 2007 by Roger Johansson

Mark:

No, it doesn't validate, but it definitely improves keyboard access.

Yes, but only in the few browsers that support it, as opposed to in all browsers if they had done what I suggest in comment #14.

19. January 25, 2007 by AlastairC

I totally agree with the progressive enhancement: It's nothing to do with Netscape 4.x (at <1% usage), and more to do with the 5-10% of people without it enabled. (Plus search engines, other 'bots, and general good practice.)

However, from what I understand of the W3C's accessible RIA roadmap, the tabindex feature will become standard on non-link/form elements: http://www.w3.org/TR/aria-roadmap/#focus

20. January 25, 2007 by Daniel Gr

Rasmus: Postscript and PDF are crappy, overcomlicated, bloated standards. XHTML+XML+XSL is the only decent standard for print off the web. If I was an internet overlord (which I don't really wanna be), PDF would be banned on the web.

Rich: A "$400 computer" is mighty expensive for most people on this planet. Just because you probably are a fat, greedy American, doesn't mean everyone can have it your way.

21. January 25, 2007 by John Hansen

Rich: Many users have javascript turned off for security/privacy reasons. If you don't believe me, check out the popularity of the NoScript Firefox extension: https://addons.mozilla.org/firefox/722/

It's configured to disable javascript in all sites, and provides the user with the capability to add sites to a whitelist.

As a developer, I would rather a user enable javascript in my site because it's useful (a la Google maps), not merely because it's necessary. Wouldn't you?

22. January 25, 2007 by MikeWSS

@ Jeremy (Comment #15)

Take a look at Bill Scott's Carousel Component which uses the Yahoo! UI library.

I am using it as a basis for a gallery on a site I'm developing. "The content can reference static HTML content or the list items can be created dynamically on-the-fly (with or without Ajax)." as Bill Scott puts it and it is relatively simple to emulate with server-side script when JavaScript is unavailable or its implementation is lacking.

23. January 28, 2007 by Montoya

I can't stand Adobe. So what if they invented Postscript and PDF? That was ages ago. Nothing good has come from them in a long time, and if it wasn't for the fact that their products (Photoshop, Flash, Acrobat, Fireworks) are industry standards, they wouldn't last.

24. January 30, 2007 by jun

acrobat reader 8 literally made my pc freeze and lock up totally every 5 minutes so i had to uninstall it. the old versions didn't do that. they obviously have new (and incompetent) people at adobe.

25. February 11, 2007 by William

That photo gallery example

http://labs.adobe.com/technologies/spry/demos/gallery/

doesn't work in firefox 2 and the source makes me want to throw up what is an dsGalleries::@file ?

please God NO ONE USE THIS

its just makes me sad all of the attempts by companies to try and get people to use proprietary technology to lock people into using their products.

26. February 15, 2007 by Glenn Gervais

I'm not sure if this addresses all of your concerns but the issue of degradation is being addressed:

"In the second iteration, recently released on Adobe Labs http://labs.adobe.com/technologies/spry/, we have expanded the data capabilities with new attributes for JavaScript degradability and enhancements to basic operations like non-destructive filtering and advanced sorting."

Full article here: http://www.fwzone.net/ShowDetail.asp?NewsId=12146

Let's try to remember this is still in Adobe Labs and, therefore, still in development. I've worked with Spry a little and I've liked what I've seen so far.

And no, I don't work for Adobe. But I do like their products, and I do appreciate the fact that they make technology-in-development available for early testing.

27. April 12, 2007 by Nick Savo

From what I understand, custom attributes (in their own namespace, as Spry uses) actually ARE allowed in valid XHTML. In fact I believe one of the purposes of XHTML is to allow custom attributes/tags (as long as they're in their own proper namespace, of course).

Correct me if I'm wrong.

28. April 12, 2007 by Roger Johansson

Glenn:

I'm not sure if this addresses all of your concerns but the issue of degradation is being addressed

Well, that's always something I guess.

Nick:

From what I understand, custom attributes (in their own namespace, as Spry uses) actually ARE allowed in valid XHTML.

I think you need to serve XHTML as XML in that case.

29. June 5, 2007 by Daniel

Did anyone figure out that very interesting piece of src?

src="galleries/{dsGalleries::@base}{dsGallery::thumbnail/@base}{@thumbpath}"

30. July 6, 2007 by Michael Arcement II

using Spry 1.5 the slide show part of the photo gallery can be whittled down to:

    <!--slideshow-->
    <div id="thumbnails" spry:region="dsSlides dsAlbums"></div>
    <div id="picture" align="center">

        <div id="mainImageOutline"><img id="mainImage" alt="main image"
   src="slide/slide3.png"  height="200" width="480" vspace="0" hspace="0" /></div>
        <div align="center" id="caption" spry:detailregion="dsSlides">
{@caption}</div>    
    </div>
    <!--slideshow-->

With JavaScript disabled that will render just a static image in place of the slide. Unfortunatly the {@caption} does not gracefully degrade.

31. July 18, 2007 by Matt Bourne

I think the real problem here is with so many mature accessible javascript libraries out there with great communities i.e. Jquery, Mootools, Scriptaculous, Yahoo YUI, Mochikit..

as a developer I cant see why you would jump for a vendor lock-in model - I cant see spry ever keeping up with these libraries and then suddenly your left with a load of sites full of strange esoteric code.

Sorry, comments are closed for this post.

Information, sponsorship, and externals

About the author

Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.

Looking for web hosting?

Use the promo code 456BEREASTREET3 to save USD 20 when you sign up!

Recommended books

456 Berea Street Bookstore

Recommended music

456 Berea Street Music Store

Latest articles

Validation statistics from Nikita the Spider Comments off: An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
Authentic Jobs API and Affiliates program Comments off: The Authentic Jobs job listing service now has a public API and an affiliate program.
What does Acid3 mean to you and me? Comments off: Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
Designing Web Navigation (Book review) Comments off: Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
DOMAssistant bundle for TextMate Comments off: To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
First impressions of Internet Explorer 8 Beta 1 Comments off: My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.

Adobe Spry and obtrusive, inaccessible JavaScript

Comments