Stuff and Nonsense

Malarkey is Andy Clarke, a UK based designer, author and speaker who has a passion for design, CSS and web accessibility.

Andy has been working on the web for almost ten years. He is a visual web designer and author and he founded Stuff and Nonsense in 1998. Andy regularly writes about creating beautiful, accessible web sites and he speaks at events worldwide. Andy is the author of Transcending CSS: The Fine Art of Web Design, published by New Riders in 2006.

Anatomy of a mouse (day 2)

When designing a site for any client, the demands of politics, commerce, current practices, creativity and accessibility must all be balanced. Accessibility matters on the Disney Store UK site.

Accessibility matters

First of all I should say the biggest thank-you to those kind souls who gave their time to review the accessibility decisions that we made during the design and build of Disney Store UK. These people (you know who you are) have earned my deepest respect and gratitude for participating. Without people like these, web accessibility would be stuck in a siding just outside Watford, under a sign that reads "Welcome to Text Only".

Wearing badges is not enough

This column (I hope) should raise some discussion about where you decide to draw the line when attempting to design an accessible site. I believe now that it is a pipe-dream to design a site that can be used by everyone. I am a fairly able-bodied geezer (save for the back trouble), but there are still plenty of sites that I find difficult or impossible to use. Even paragons of usability such as Amazon.com sometimes confuse the hell out of me. My brain screams "Too much content!". I dread to think how I might react if I was dyslexic or had other cognitive disabilities.

That is why, as I wrote in July, I have banned accessibility badges or Bobby icons from all Stuff and Nonsense sites and include instead, an accessibility aims statement like this one.

We have tried our very best to make this web site usable by as many people as possible. Some people with disabilities find using the web difficult and many sites do not accommodate those with visual or other disabilities. While we know that it is impossible to design a site that everyone can use, designing this site with accessibility in mind means that more people can access its content.

When designing a site for any client, the demands of politics, commerce, current practices, creativity and accessibility must all be balanced. I wish that we lived in a utopia where all accessibility decisions were simple (and some people do). But I don't live in such a world. And in a perverse way, these challenges and decisions make the job all the more interesting.

At this point I should also mention that our client was amazingly receptive to the aim of making the new store as accessible as possible. Where we did disagree, he would carefully explain the reasons for his point of view and he never said, "Because that's the way I want it!" I understand more now about his issues than ever before and I hope that I can take the experience with me to other projects.

On with the show

Rather than trawl through each and every point, I thought that it might be more interesting to talk about the 'process' of making the site as accessible as we could to this point.

First, the site is built using valid XHTML and CSS and this in itself can go a long way towards a more accessible site. That is not to say that web-standards in themselves guarantee accessibility (I don't agree with Jeffrey Veen all the way), but when you write code to standards, a certain amount of attention to accessibility should come naturally.

Second, the store is built on the Karova Store platform which takes the majority of headaches out of developing accessible e-commerce stores. Karova Store is just bloody brilliant, but then you'd expect me to say that ;) .

Advertisement over... we also ran automated checks through Bobby and Cynthia Says in order to see if there were any glaring omissions. Sometimes under a tight schedule, it is easy to miss a form label or two adjacent links, and these tools are ideal for such reference.

But Bobby does not give a site what I call 'usable accessibility'. It is only a machine and the real test is to give a site to a human being and see what they think. For this we tested with screen-readers and text-browsers and opened the work-in-progress to a handful of trusted testers (mentioned above) who provided some very valuable feedback. Of course, it's also possible to post a site critique on Accessify Forum.

An outside opinion really counts and can often highlight things that might otherwise have been missed. For example,

I examined the code and saw that the photos of the figurines had alt text which was the same as the link text after it...

Advice like that is worth it's weight in gold.

Stuff we did

Designing with accessibility in mind in often about alternatives. So we added <noscript> content to scripts which generate content (like the Disney toolbar at the top of each page). We also added static alternatives to the Flash banner and aimed to provide meaningful alt or title attributes to images and titles. It doesn't sound much, but a little can go a long way.

Brand agency Akiko were also keen to help by adding a 'Stop animation' feature into the Flash header image.

There were two main areas of contention, the 'assets' which take pride-of-place on the home page, and a request that links to other Disney sites open in new or pop-up windows.

Text embedded in images

We understand the issues around non-resizing text embedded in image files, but these were nonnegotiable. Our solution was to mark-up the assets as simple lists (as described yesterday) and add meaningful alternative content to the title attributes on links. This solution is by no means perfect, but sometimes we have to take a pragmatic view.

When time allows, we will run some tests using sIFR on both the assets and the image headers in the side navigation which currently use Mike Rundle's Accessible Image Replacement technique.

New or pop-up windows

Here another pragmatic approach was taken. Opening external links in new windows had to be an option, so we took the view that the best approach was not to impose a view about opening new windows on a user, but to inform them and give them the choice. You can see this in action on the specially created links page.

Likewise with the feedback forms inherited from the old site, the intention is to inform and offer alternatives.

Currently, our feedback forms open in a new (pop-up) window and may not be accessible to all. If you need an alternative way of providing your opinions, please email our customer services department at....

Wrapping it up

That's about it. Tomorrow I think that I'll look into What makes it tick? and on Friday, Wrapping it up.

Replies

1. #1 On October 6, 2004 08:52 AM Gazzer said:

   I'm glad you mention the pop-up/new window issue and I like the way you have approached it.

   However, this forces you to use a 'transitional' DTD which means one day the methodology you have used will be defunct and I wonder how you will tackle it when that time comes?

   Are pop-ups/windows going to disappear, are we going to compromise, will we just code around it or will W3C provide us with an alternative?

   The Disney site is excellent, by the way...

2. #2 On October 6, 2004 11:44 AM Phunky said:

   As far as popup's go i follow my good man Youngpup and his popup way i know ppl will shout "what if they dont have javaScript" well if they dont, then they dont get a popup but they still get a link...

3. #3 On October 6, 2004 01:01 PM Phil Baines said:

   Good write up!

   The only issue that I have is that the 'Stop Animation' feature needs to be clicked on every page. but this is not a fault in your department. Im sure that a little bit of remote scripting could be built in to tell the server that you dont want it animating on the next page load. :)

   As a side note, do you take notes while your working on the project to help with future blog entries, or do you spend a good amount of time afterwards thinking about the related blog entry?

4. #4 On October 6, 2004 01:42 PM Mike Stenhouse said:

   I really like your accessibility-statement-rather-than-a-badge approach. I went through an audit with the RNIB for a site I did last year and their set of guidelines seem fairly open-ended (frustrating at the time) but more aimed at actually making the site accessible than ticking boxes. It changed my approach to accessibility but I hadn't thought to put it into words.

   On your window opening... How about allowing people to set their preference and storing it? Having to listen to every link twice would wind me up after a while. I have absolutely no idea where you could put this kind of setting so that people would actually use it though and it might be overcomplicating things.

   Anyway, great job on the site - it looks lovely, and I'm very tempted by the Muppet mini bean bags. They're just what my life's been missing...

5. #5 On October 6, 2004 06:29 PM Mike said:

   Glad to see you used my image replacement technique — it's always exciting for me to see new sites popping up with the negative text-indent ;)

   Great job on the site as well man, bigtime sites converting to web standards do us all a favor.

6. #6 On October 7, 2004 04:20 PM Andy Budd said:

   I really like the 'Stop animation' button. It's something I've never seen on a site before.

   Just out of interest, why did opening up links in a new window have to be an option?

7. #7 On October 7, 2004 09:42 PM Malarkey said:

   @ Meester Budd: External links opening in a new window HAD to be an option, period, and we needed to find a solution that satisfied our accessibility needs. We thought that offering advice and giving users the choice of same/new window was the best option.