One of the two things I needed to do in the past week was to post some information on an existing web site. Pretty straightforward information really, but how do you mark it up? Here is the copy, in disguised form of course:

Aardvark New Year Dinner Saturday, February 21 New Aardvarkia Banquet Hall Cost: $38 (VAT included) 6:30pm: reception 7:00pm to 9:30pm: dinner and speaker presentation Join us in celebrating the Year of the Aardvark! Noted author Tia Aardvarka will be present to talk about her recent work, Attack of the Zombie Blue Aardvarks and the Re-emergence of Totalitarianism.

The copy was to be posted in a Drupal-based system that deletes HTML5 semantic tags and aggressively strips away most attributes (including even language and ARIA attributes). The CSS stylesheet is locked down so you can’t create new styles. Most of the existing styles seem to be UI-related and not much is useful for styling content. So how do you mark this up, especially the top two blocks? The first line is easy: It’s an h2. The usual lazy way to mark the rest of the first block up would be to treat it as a list and style the bullets out, but you can’t, because you can’t change the stylesheet. You could treat it as a single paragraph with br tags but this will sound awful with a screen reader. Or maybe you could do multiple divs, which sort of makes sense but then you can’t create the space between the various blocks. The second block is obviously true tabular data, but if you styled it as a table there’d be an odd-looking space on the first row because the first cell on the second row contains so much text. So do you treat it as a table, or do you not? If you don’t, you get into the same situation as the first block. So even this seemingly straightforward copy is creating a lot of problems. How do you handle such situations in a locked-down environment? Perhaps, perhaps we should start by doing some experiments so that we can know how to rank our options?