Disabled? No Pizza For You!

This past weekend my wife and I decided to check out the new Boston Pizza that was recently built near our house. It’s one of only a few new popular restaurants in town so we were told the line has been crazy long with more than an hour wait at times. We decided that before we went, we would check out the on-line menu too see what they had. That way, if the line was too long we could just order takeout and go home to enjoy our meal. The domain name BostonPizza.com wasn’t hard to guess so I pulled up the site and we proceeded to peruse the menu (I decided on a small hawaiian and my wife chose the Ultimate Pepperoni pizza). While browsing the menu I also noticed that the main navigation used a ‘drop-down’ effect:

BostonPizza.com Dropdown Navigation

Being the curios web developer I am, I decided to investigate a little further to see how it was done and if it was a semantic list a la suckerfish (though I had to work quickly as my wife was getting hungry after looking at the photos of pizza).

Step 1. Disable Style Sheets

A quick shift-command-s with the web developer toolbar revealed the following obvious table based layout (yuck):

BostonPizza.com With Styles Disabled Revealing Table Layout

so I was further curious about how they managed to position the dropdowns (which were appended as more tables to the bottom of the CSS disabled page). But a quick look at the source code exposed another glaring problem, the site’s navigation wasn’t even there! In place of the navigation was:

<td colspan="2" id="globalnav" align="left" valign="top">
    <script language="javascript" type="text/javascript" src="themes/BostonPizza/dmenu/main.js"></script>
</td>

No! tell me it isn’t so! In this day and age of standards compliance and accessible web sites they’ve chosen to use JavaScript to create the navigation! So what happens with no JavaScript?

Step 2. Disable JavaScript

Just to see what would happen, I disabled the JavaScript in my browser and hit the site again. You can see the big problem yourself by comparing the with and without JavaScript in the following two screen shots:

With JavaScript:

BostonPizza.com With JavaScript

Without JavaScript:

BostonPizza.com Without JavaScript

As you can see, there’s no navigation in the JavaScript disabled version! If you don’t have JavaScript there’s no pizza for you.

A Last Ditch Effort

The only glimmer of hope was that they at least included a link to a site-map in the footer navigation so possibly, if you were savvy enough to locate the link and realize what a site-map was, you may be able to partially navigate the site. To test this, I fired up a lynx command line browser and tried to access the site to no avail:

BostonPizza.com using a lynx command line browser

The furthest I could get was the splash page. Selecting Enter Site simply redirected back to the splash page. I’m not sure why I couldn’t get past the splash page as I stopped my investigation at this point and tried to protest going to a restaurant with such disregard for web standards. But my wife and I were both hungry and she was looking forward to her Ultimate Pepperoni pizza so I relented and we were on our way.

Pizza Anyone?

I feel really sorry for any disabled person who tries to use the internet when it’s populated with sites like this. Mistakes like JavaScript required for the navigation aren’t just silly little ‘oops’ problems like forgetting an alt tag on an image, it’s a blatantly obvious misuse of technology and an ignorant disregard of any sort of accessibility standards. It’s just another example of the inaccessibility problems that have been reported by others.

If Boston Pizza can charge my wife and I $50.00 CAD for two small pizzas and non-alcoholic drinks, I can’t see how they can’t afford to build an accessible web site. I know I like pizza and I’m pretty sure most disabled people probably like pizza too!