HTML5 Boilerplate and WAI ARIA

[ Posted: ]

I’ve finished the first pass at building my new portfolio site using the html5 boiler plate. I even added a little bit of wai aria love to it.

It took a quite awhile, if I was just building this in good old xhtml 1.0 transitional it would have been easy.

Having to remember all these new things is pretty time consuming but I’m happy with it. I also ended up stripping out a lot of extra html tags that I would have normally put in for design elements and cross-browser support. I’ll have to trust that there will be something I can do with Modernizer and jQuery to make this all work.

New html5 tags used:

  • <section>
  • <nav>
  • <header>
  • <hgroup>
  • <aside>
  • <time>
  • various new input types such as email and search.

New wai aria landmark roles used:

  • banner
  • complementary
  • contentinfo
  • form
  • main
  • navigation
  • search

Resources

  • HTML5 for Designers – by Jeremy Keith
    A really good read, I recommend this book for anyone who’s starting out with HTML5, it’s a great primer.
  • Introducing HTML5 – by Bruce Lawson and Remy Sharp
    Another excellent book, I’m still working my way through this one. I’d recommend reading the book by Jeremy Keith first. Boolean attributes vs boolean values? Say what? HTML5 for Designers will explain that to you.