February 25, 2010

Thoughts on <details> versus @summary


I originally sent these out as a series of tweets on twitter. It was late at night on the west coast, so likely most were asleep when I pumped them out. I hope to expand on these further, but for now, my bullet points:

  • Elements are better than attributes; for semantics, javascript, css
  • If something needs to be referenced you should normally make it an element, with an id attribute. (aria-describedby?)
  • If something represents a separate entity, make it an element: you might want to add attributes later
  • Because <details> is an element, it can be easily styled and scripted; ditto for <button>
  • Complex tables need explaining to more than just blind: low vision users with screen magnifiers, dyslexics and other cognitive needs users, etc.
  • <details> could take <ul>’s – cognitive studies suggest lists are easier ways of collecting data than reading paragraphs
  • The <details><button></details> pattern can likely be reused for other accessibility related needs: I’m thinking as a replacement to longdesc as well: <img><details><button></details></img>
  • The reality: both summary & longdesc, while great ideas, didn’t gain widespread take-up & have been seriously abused
  • Both summary & longdesc will always be honored by user-agents that support HTML4 – they’re not going to disappear overnight.
  1. #1 by Denis Boudreau on February 25, 2010 - 3:28 pm

    Looks like you’re slowly winning me over… damn you! ;p

  2. #2 by Scotty Logan on February 25, 2010 - 7:08 pm

    While this is the first I’ve heard of this, I’d have to agree with you – I think it’ll be much easier for designers and developers to deal sensibly with a details element, rather than attributes.

  3. #3 by Thierry Koblentz on April 24, 2010 - 10:24 am

    “Because [details] is an element, it can be easily styled and scripted; ditto for [button]”

    I believe many authors avoid using [button] *because* they cannot be “easily styled”. Unlike [div] and [span], [button] comes with default UA styling.

You must be logged in to post a comment. Here's Why.