HTML5 details and summary

February 25, 2010

Thoughts on <details> versus @summary

HTML5 details and 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.
  • CC BY-NC-SA 4.0
    This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Posted by John

I am a 15 year veteran of Web Accessibility, living and working in the Bay Area. I am also actively involved with the W3C - the international internet standards body - where I attempt to stir the pot, fight hard for accessibility on the web, and am currently co-chairing a subcommittee on the accessibility of media elements in HTML5.

View more posts from this author

Leave a Reply