Idiot Banter

No Frills Accessible Flyer

Posted By:

Matt

Posted On:

July 18th, 2008

Posted In:

CSS & XHTML

Comments:

One Response, Join The Conversation.

The other day I came across this “accessible flyer” on the No Frills website. Upon first glance it seems pretty good, it’s basically just plain text which is way more accessible than the usual scanned images they use for their regular online flyer. If you look behind the scenes it doesn’t look so accessible to me.

Tables? iFrames?

Here are a few reasons this accessible flyer is not as accessible as it could be:

1. The links to get to the store nearest you don’t have title attributes. This isn’t a huge deal since the words you need are there as the linked text anyway but the title attribute is still an accessibility recommendation.
2. The entire flyer is in an iFrame. There’s no real reason I can see to do this except to prevent loading the header and footer each time or to make it impossible to permalink to expired deals. I wouldn’t have such a problem with the iFrame if it had a heading but as it is it just contains a table.
3. Tables! The entire accessible flyer is laid out in tables. There’s no reason for tables, it’s not tabular data, there’s no layout, it’s just headings and descriptions. It looks more like a definition list to me. The table doesn’t even have a summary.

I think including an accessible flyer is a great idea but this is not the way to do it. For the extreme cases a screen reader (or search engine) is going to have a really hard time figuring out how to interpret that table if it can even get to it in the first place. Not to mention how much extra code was used to mark up that definition list as a table.

Accessible flyer - great idea, poor implementation.

Similar Posts:

• A Beginners Guide To XHTML
• Web Standards
• When To Code For IE6

• background: #fff url(/images/backgrounds/NoFrillsFlyer.jpg)