Site Review – Temple Gate

With the current discussion around the recently announced Temple Gate, An Accessible HTML 5 WordPress Theme, I figured I’d give it a quick review to see how the site measures up in regards to accessibility, usability and overall design.

Strengths

  • The feature highlights that are listed.
  • Decent visual design.
  • Effective highlighting of the most ‘Popular Posts’ in the banner.
  • Semantics are okay. (The <div> elements can be streamlined a bit, but not the end of the world.)
  • Utilization of WAI-ARIA roles: banner, article, complimentary and contentinfo.
  • Information is still differentiated effectively when colour is ignored. (via Graybit)
  • Visual guide used for focus on search input. (In other words, the little magnifying glass disappears when you focus on the search field.)

Improvements

  • Not all links have a title attribute assigned.
  • As well as the current link from the logo, add a ‘Home’ link in the main navigation.
  • Add a ‘Skip to Search’ in the skip links.
  • The main logo that shifts on mouse over can be considered a bit distracting.
  • No text resize widgets or themes in use.
  • Further utilization of WAI-ARIA roles: navigation, main, search.
  • No alternative themes used. At least have one for high contrast.
  • By default, some text is a bit small for skip links and some secondary content.
  • With keyboard navigation (not with the mouse), focus and visited can be improved. Use more than colour to indicate this.
  • Colour contrast can be improved in some areas. Dark grey ‘Sep 2010’ against light grey, light red ‘xiwang’ against light grey and off-white, blog post separators, etc.
  • Consider having an accessibility statement built in, as well as the brief description in the complimentary content area.
  • Consider using GZIP to improve load time. W3 Total Cache has done a decent job for me.
  • Take advantage of a grid layout. (Vertically align the separator between the picture and the ‘Popular Posts’ with the line between the main and complimentary content.)

Things to still test

  • Screen reader testing
  • Multiple User Agent testing (Older browsers, IPad, BlackBerry)

Keep in mind that this is not meant to slam any of the work that been done. It’s simply to improve things for all involved.

Overall, a good first effort. It’s always good to see people automate things in the effort of applying the best practices in recommended web standards. If there’s any questions about the points above, I’ll be happy to clarify them for you.