Grocerychoice — Accessibility disaster (to put it kindly)

The Australian Federal gov­ern­ment recently launched gro­cerychoice, a web­site whose goal is to

[help] con­sumers find the cheap­est super­mar­ket chain in their area with­out hav­ing to com­pare hun­dreds of prices.

A laud­able goal no doubt. But sadly, as our friends over at PropellerGlobal note, quot­ing news​.com​.au, it’s already attracted offi­cial com­plaints from peo­ple with dis­abil­i­ties for breach­ing the Disability Discrimination Act (made famous on the web after the action brought against SOCOG for the inac­ces­si­bil­ity of the Sydney Olympics web­site).

News​.com​.au reports

the web­site failed the most basic level of the accept­able International Standards for Website Accessibility, the W3Cs WCAG 1.0 guidelines

(is this the first ever main­stream direct ref­er­ence to of WCAG?)

Here’s what the web­site itself says about accessibility

fol­lowed the World Wide Web Consortium’s Web Accessibility Initiative guide­lines at http://​www​.w3​.org/​t​r​/​w​a​i​-​w​e​b​c​o​n​t​ent

fol­lowed The Guide to Minimum Web Site Standards — Accessibility from the Australian Government Information Office and

tested the site with var­i­ous diag­nos­tic and eval­u­a­tion tools.

Let’s see how much that has helped them.

Let’s apply just the level 1 and 2 WCAG 1.0 cri­te­ria, using Cynthia Says , and see how it fares.

1.1 — use of alt text — fails. This really is the most basic level of acces­si­bil­ity com­pli­ance — if you don’t even meet this, by using alt attrib­utes, then you haven’t even thought about acces­si­bil­ity, in my experience.

5.3 — Do not use tables for lay­out unless the table makes sense when linearized — fail

12.4 — Associate labels explic­itly with their controls — fails

All in all, in 2008, for a brand new Federal Government high pro­file site (appear­ing in many national news sto­ries on TV, radio and in print) this is frankly, pathetic. Particularly in the light of the claims made at the site about accessibility.

Beyond basic com­pli­ance issues, the site also uses highly prob­lem­atic tech­niques such as

  • Flyout” menus exten­sively (in truth almost uni­ver­sally) for nav­i­ga­tion. These are effec­tively ren­der nav­i­ga­tion inac­ces­si­ble for folks using screen mag­ni­fi­ca­tion, and any­one with less than ideal motor skills, or peo­ple using a site in less than ideal surroundings
  • Failing to use HTML head­ings (screen reader soft­ware uses HTML head­ings to help users nav­i­gate pages)
  • Using images for text (which zooms up in size very badly, if at all, pre­sent­ing seri­ous acces­si­bil­ity issues for many peo­ple with less than ideal eye­sight, or devices where screen mag­ni­fi­ca­tion is impor­tant (for exam­ple the iPhone))

But there’s more — zoom­ing up text even one or two sizes com­pletely breaks the page lay­out. This sug­gests the devel­op­ers didn’t even use this most basic test of the robust­ness of their design.

This really is unacceptable.

Ok, so, while we are at it, let’s take a look at the qual­ity of HTML and CSS (apply­ing the sort of cri­te­ria we use for the McFarlane Prize, and I first devel­oped back in 2005 for assess­ing adher­ence to best prac­tice in major Australian web sites.)

It too is an embar­rass­ment. We have div ele­ments con­tained within span ele­ments, the use of all kinds of invalid attribute val­ues, and just plain old man­gled HTML. As men­tioned above, tables are used for lay­out, and sim­ple things like HTML head­ings aren’t even attempted.

And this is just the front page.

How about the CSS? Well, mer­ci­fully now errors here (you’d be sur­prised how com­mon CSS syn­tax errors are) but on the whole it’s pretty sim­ple stuff — lots of classes (many with pre­sen­ta­tional rather than seman­tic or struc­tural names) and a small num­ber of descen­dent selec­tors. Very basic really.

There is just so much else wrong with the site — from the fail­ure to let peo­ple use RSS to sub­scribe to ongo­ing sur­vey price results (you can sub­scribe via email) to the search by post­code seem­ingly being bro­ken. But these pale by com­par­i­son with the qual­ity of the under­ly­ing code.

As I observed in my first “state of the web” sur­vey in 2005 — the sites that adhere to best prac­tices don’t do so by acci­dent, but because the teams who build them make best prac­tices in acces­si­bil­ity, usabil­ity, and cod­ing an impor­tant goal. It’s quite clear, that despite the protes­ta­tions of Grocerywatch regard­ing acces­si­bil­ity, this sim­ply wasn’t the case when this site was built.

Now the gov­ern­ment may well have a huge PR issue on their hands. Seems like in more than 8 years since SOCOG, we’ve still a lot to learn.

18 responses to “Grocerychoice — Accessibility disaster (to put it kindly)”:

  1. But check­itout John, it’s got drop shad­ows. It always amazes me when sites imi­tate the design tropes of Web 2.0 while remain­ing bliss­fully unaware of the browser tech­nol­ogy dri­ving it.

    • By:john
    • August 8th, 2008

    How could I have failed to see that! :-)

    john

  2. wow, it always sur­prises me to see lay­out in tables nowa­days but I thought gov sites were sup­posed to be on the ball with this type of stuff.

  3. Thankyou for tak­ing up this issue John. It is of para­mount impor­tance and we would like to join you in con­grat­u­lat­ing and sup­port­ing his case.

  4. […] 18 check­points of the WCAG 1.0 pri­or­ity guide­lines that failed assess­ment. John Allsop of Web Directions South dis­cov­ered many other prob­lems with the site, includ­ing fail­ure to use ALT tex­tual equivalents, […]

  5. John to be fair on a Govt agency the use of RSS is often beyond them.
    1) RSS s often blocked at the cor­po­rate fire­wall
    2) If man­agers don’t use RSS they are not going to sup­port it are they.
    3) RSS tech­nol­ogy use. As you know the real com­mu­nity, not us “uber geeks”, doesn’t use RSS at all. It’s just too techie for them. It’s going to be years until RSS is excepted by the real world. Until then Govt being con­ser­v­a­tive will not implement.

    • By:john
    • August 11th, 2008

    Gary,

    I can see plenty of rea­sons why it isn’t used, but it is still frankly pathetic, IMO.

    j

  6. I’d actu­ally take your com­ment fur­ther, John. Not only should they offer RSS at ‘the edges’ (e.g., to sub­scribe to updates for your neigh­bour­hood), all of the data should be avail­able in RSS, Atom or other open formats.

    There’s a grow­ing body of research that gov­ern­ments shouldn’t be in the busi­ness of pre­sent­ing data to end users (except for per­haps the most bare-​​bones views); rather, it has a respon­si­bil­ity to do every­thing it can to assure that the data it has avail­able is as widely dis­sem­i­nated and easy to reuse — both tech­ni­cally and legally — as possible.

    If GC’s under­ly­ing data were avail­able, we’d likely have a huge bas­ket (pun intended) of desk­top wid­gets, iPhone apps, mashup sites, and inte­gra­tions into places like Yahoo7 and 9MSN. We’d be able to relate it to exist­ing and not-​​even-​​thought-​​of infor­ma­tion, and repur­pose it as we see fit.

    As it is, we have one crappy, nearly use­less site with silo’d data and a dis­ap­point­ing UI. I don’t even want to know how much it cost.

  7. Gary — 

    Can you give more details about fire­walls block­ing RSS? I haven’t seen this in the wild or heard of it much.

  8. Mark,

    very much so — I lost sight of the whole data/​api thing so irri­tated was I at the user experience/​accessibility aspects.

    I was going to write about crowd­sourc­ing the data — you know, rather than one anony­mous shop­per a month, build infra­struc­ture to let peo­ple email, sms, and oth­er­wise pro­vide pric­ing data based on their shop­ping experiences.

    If you’d like to hear more about that, I’ll be touch­ing on it here

    http://​lgweb​net​work​.org/​c​o​n​f​e​r​e​n​ce/

    in my keynote presentation

    john

    • By:tfforums
    • August 14th, 2008

    The alt tags are for 1x1 pixel images… Also the site is being updated to con­form to W3C /​ WAI stan­dards within the next week or so.

    • By:john
    • August 14th, 2008

    Tom,

    I have a sink­ing feel­ing the 1x1 pixel images are asso­ci­ated with the table based layout?

    john

    • By:tfforums
    • August 14th, 2008

    Spacer images — used for the menu and var­i­ous other things… Often put in via pho­to­shop export etc

  9. Interesting-​​looking conf, thanks!

  10. […] Graeme Innis said Making infor­ma­tion as socially impor­tant and highly pub­li­cised as the GROCERYchoice web­site and the green paper on car­bon emis­sions trad­ing inac­ces­si­ble to a sig­nif­i­cant sec­tor of the […]

    • By:tfforums
    • September 5th, 2008

    It looks like with the new release of pric­ing infor­ma­tion for this — some of the Website Accessibility issues have been fixed (text resizes now — it has meta tags — some images gone in favour of text )

    • By:Anna Tailor
    • September 15th, 2008

    wow, it always sur­prises me to see lay­out in tables nowa­days but I thought gov sites were sup­posed to be on the ball with this type of stuff.

    As a Government web devel­oper I did too, and I do believe agen­cies TRY to keep their web­sites acces­si­ble, but the trou­ble is there’s a cul­ture of every­thing being done at the very last minute and so of course usabil­ity and acces­si­bil­ity always suffer.

    As some­one who’s pas­sion­ate about both it’s incred­i­bly frus­trat­ing! We do the best we can do but at the end of the day it’s the man­agers who call the shots, not the web devel­op­ers. It will be a happy day when acces­si­bil­ity is policed as harshly here in Australia as it already is overseas.

  11. […] Government’s fabled GroceryWatch web­site has been scrapped. We wrote crit­i­cally about the dire acces­si­bil­ity of the site when it first launched. In the mean­time, con­sumer advo­cacy mag­a­zine Choice had taken over the project from the […]

Your opinion:

XHTML: You're allowed to use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>