The new Maritime Museum prints catalogue is now live. I’m quite proud of this – all of the HTML, CSS, SQL and backend coldfusion code was written by me. Except for the layout, where I used a modified version of Yahoo grids. I also built the SQL server 2000 database which lies behind the site, and is populated by legacy data from some rather large structured text files. The site uses a strict doctype, valid HTML, CSS for layout as well as looks and all of our prints records are now open to Google, via the magic of Google Sitemaps. I’ve also thrown in a little bit of unobtrusive JavaScript, courtesy of a free copy of Jeremy Keith’s DOM scripting book, which I blagged at Geek in the Park.
Oh and did I mention that the 20,000 images are served from our internal image server, again with a bit of coldfusion/Samba magic that I set up? I love getting a chance to do this sort of stuff.
The item level catalogue template uses a table to hold the actual catalogue record. “That’s funny”, I hear you say, “surely a record like that is actually a definition list?” Indeed, I thought that too, and you can see an early version of the catalogue record page in which I did use a definition list, styled with CSS to look like a table.
However, I sent that round a few friends for comment, and pretty much the first response I got was “Why on earth are you using a definition list?” Screenreaders, you see, don’t handle definition lists very well. Consequently, screenreader users find them very frustrating as they have to sit through the reader announcing the whole list, along with guff about whether it’s reading a term or definition. With a properly marked-up table, on the other hand, a screenreader user should be able to jump from one record heading to the next, without listening to the table data unless they want to. So the live site has a table.
Things I learnt from this:
- You can do some pretty powerful things with CSS.
- Just because you can do something, doesn’t mean you should.
- Semantic purity does not necessarily guarantee accessibility. In this case, accessibility wins and we use the solution that doesn’t raise barriers for assistive technologies.