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.

Design Jr. – Design from a child’s perspective

For inspiration, I want to share with you my original proposal for the 2008 IA Summit: Design Jr. – Design from a child’s perspective.

Back story

Back in 2006, I had attended the 2006 IA Summit. At the time, it was my first exposure to professionals in the IA field. I must say that I was a bit out of my own comfort zone, but that’s how I like to learn new things. Plus, the people I had met really made me feel at home.

In the same year, I was also learning all about being a father. From my own observations of watching him develop, I had seen the connections between my son’s experiences and what he retained. From this, I believed you could extrapolate the very basics of how we, as human beings, can learn and are guided. The result being that you have a better understanding of effective design.

From the summit and father-like experiences, it inspired me to write up a proposal for a presentation I had in mind for the 2008 IA Summit: Design Jr. – Design from a child’s perspective. This is what I submitted:

Title
Design Jr. – Design from a child’s perspective
Authors
Marco Battilana
Objective
To show the recognition and understanding of canonic icons/symbols with children and how it influences today’s user-centered and interaction design practices.
Description

The purpose of this presentation is to highlight one’s ability to recognize canonic icons/symbols, making that instant connection to understand the meaning behind it, and taking the appropriate and expected action. Specifically, what I want to show is examples of the earliest stage of this recognition possible – starting with children.

  1. I’ll show examples of recognition from an early age. Probably using flash cards of common imagery that loosely relates to canonic work that exists today: a house, an arrow, a stop sign, etc. This is to highlight the mental connection and understanding of the canonic imagery.
  2. I’ll show examples of trends that are happening in preschool where interaction is encouraged and the most effective methods to do so are highlighted. This is to highlight the connection between how children interact in a preschool environment and how it carries over as an adult.

From there, I will take these examples and show how it’s resulted in much of the user-centered design and interaction design work that is performed today. Basically, taking what was cited from point 1 and 2 and meshing them with real world examples of web and web application design.

Examples
  1. User-centered design
    • Observe children’s books from different countries to see the communication of letters, numbers, etc.
    • Cite example of showing my son my finished icon work and having him recognize (at a high level) what each one represents
    • Ideas for icons: An arrow versus a realistic finger, A fork and knife versus a realistic plate of food, Showing examples at various sizes to see the difference in recognizability
  2. Interaction design
    1. look at kiosks targeted for children

Results

My submission was rejected. Flatly rejected. In fact, out of the 7 people on the judging panel who gave feedback, 6 of them completely (and bluntly) discounted my proposal. I’ll be completely honest when I say that I was quite devastated at the results.

However, looking on the bright side, I did have the satisfaction of knowing that I had at least enlightened and inspired one person on the panel.

And the lesson to be learned?

Don’t give up. If you believe in something enough, make it happen. But, keep an open mind as to the feedback you receive. It’s always beneficial to bounce ideas off of others and refine as necessary, without effecting the integrity of your original idea.

Looking back, I don’t think the IA Summit was the right venue for this type of proposal. However, I see that there’s a related submission on the 2011 SXSW Panels. I’m going to submit this for 2012 and see where it goes from there.

Footnote

I want to thank Lisa Colvin for helping me out back in 2006. Not only did she tell me about the benefits of Linked In (and being my very first connection), but she also gave some very good advice. She told me not to feel so out of place, take full advantage of the knowledge base available and network as much as possible. And so I did.

Future of Web Accessibility in Canada

Updated as of 29 November 2010

If you care anything about web and accessibility standards as much as I do, then you should be paying attention to a upcoming case that is challenging the federal government of Canada and it’s current state of web accessibility.

From September 21 to the 23 of 2010, Donna Jodhan, a legally blind Canadian, will have her day in court. Ms. Jodhan’s challenge is that the federal government’s current web sites are inaccessibile to those with visual impairments.

As per the press release from Bakerlaw Accessible Justice, this case was originally filed 2006 when Ms. Jodhan attempted to submit and application using a federal government job web site and was unsuccessful, despite asking the government for assistance.

It is truly is a shame that it has to come to this point. But, people should have access to information regardless of one’s ability. I’ll definitely be monitoring this case as it develops.

Reference

The John Slatin Fund Accessibility project

John Slatin, a pioneer in the field of web accessibility, has sadly passed away. In his memory, the John Slatin Fund Accessibility Project has been established.

Even thought I didn’t personally know John, his influence has had a great impact on the work that I have done and I continue to do today. For this, it’s a pleasure to offer my services as an accessibility expert towards this project.

For a minimum donation of $500 USD, you will receive a complete and thorough accessibility review. Trust me when I say that this is one of the best deals you will see for this caliber of review.

As well as the review, you will also have the satisfaction of helping out John’s family with the substantial medical bills that incurred due to John’s battle with Leukemia. A huge medical debt is the last thing the family needs to deal with during this time of mourning.

I’m sending out this challenge to all of the individuals, companies and corporations to do the right thing for yourselves, John’s legacy, his family and the Web Accessibility Initiative. It’ll make such a difference to everyone involved by signing up for an accessibility review.

For information about this great cause, please visit The John Slatin Accessibility Fund Project and sign up for a review.

Thank you. Marco.

Contacts

(Marco Battilana) (info@crazybat.ca)
www.crazybat.ca

References

Accessibility of the Vancouver 2010 Games site – Follow up, Part 2

Another look back on a question I posed to John Furlong (CEO of the 2010 Winter Olympic and Paralympic Games) as well as the current state of the official Vancouver 2010 Web site.

To review, I had a chance to ask John Furlong, CEO of the 2010 Winter Olympic and Paralympic Games, about the current state of the official Vancouver 2010 Web site back in May of 2004. My main points to him were:

  1. Do you feel that the web site, which will be the main focus of Olympic and Paralympic information for the world, should meet at least the basic guidelines of accessibility?
  2. If your site did meet these basic requirements, what value would you find in promoting an accessible friendly web site?

To paraphrase from the last article;

"…Mr. Furlong’s assured me that the web site will certainly lead an example to the rest of the world. [O]nce a team is in place to look after the related tasks, certain guidelines will be followed. The site that you see right now will definitely change as the Olympics draw near."

from Crazy Bat Designs – News item of 20 May 2004

With one year passing since my last review of the site, I figured that there would have been some improvements made, in terms of standards-based approach. Unfortunately, the news is not so good.

First, a comparison of the "Good" items from 27 February 2006 with today’s observations:

The Good

CSS validates
Same result as of today
Primary language is defined for both English and French versions of the site.
Same result as of today
One Accesskey is in use (It’s ’13’ though)
Same result as of today, so this is now being moved to the "bad" section
A text-only version of the site available
Same result as of today.
Alternate CSSs are available at the top and the bottom of the document. (Not on the home page, oddly enough)
Same result as of today.
RSS feed available (Doesn’t validate as of yet)
Same result as of today.
Alternate content for those with JavaScript disabled
Same result as of today.

Next, a comparison of the "Bad" items from 27 February 2006 with today’s observations:

The Bad

22 validation errors on the home page. (Including No DOCTYPE defined)
Same result as of today.
One CSS for all media, which results in content being cut off when printing
Same result as of today.
Heavy dependency on JavaScript (Although the user is given a message and a link to the text version of the site, it’s still not the most usable)
Same result as of today. (And to clarify, this dependency is with the site’s main navigation on the home page which would force a non-JavaScript user through an extra level of navigation)
A few form elements are missing their respective labels
Corrected. A label is now matched up with it’s appropriate input.
Some inline styling
Same result as of today.
Non-breaking space abuse
Same result as of today.
Semantics aren’t the greatest. (Example: Heading 2 is used for a title in the content area, but also for a ‘More Featured Stories’ link and a survey question within the heading 1 for ‘Upcoming Events’. No lists are used for main navigation.)
Results are worse than before.
Meta data for the English page indicates that it is the ‘Version Francais’
Same result as of today.
The home page itself is a little plump at over 100k
Results are worse than before. (Approximately 180k)
Some words that precede the "more" link don’t make sense. (Example: ‘announcemen’)
Corrected. (But, reading the lead-in text in context could still be confusing.)
Scripts could probably use some consolidation
Same result as of today.
CSS selectors could be a bit more semantic (Example: .leftContent, .small, .strong. What if .leftContent is moved to the right? What if .small is big? What if .strong is not so strong?
Same result as of today.
Most title elements on the site are the same.
Corrected.
Absolutely no title attributes
Somewhat the same results as of today. (There is only one title attribute and it’s for "Bell Canada")
One Accesskey is in use (It’s ’13’ though)
Moved from the "Good" category, as this accesskey assignment is useless.

Finally, some more disturbing items that weren’t picked up with the last review:

The Disturbing

  • Tables are used for some parts of the site’s layout
  • The site doesn’t pass WAI-A. (Failure on 2 automated and 3 manual checkpoints)

Last year, I had stated that there was improvement with this site, based on a snapshot of the site in February of 2006. Today, there has been virtually little improvements with the site, in terms of a standards-based design. In fact, aside from the points that were addressed, it seems to be in a worse state then before.

So, I’ll reiterate John Furlong’s comments:

"…never good enough."

John Furlong, CEO of the 2010 Winter Olympic Games – 19 May 2004, Morgan Creek Golf and Country Club. Surrey

With three years to go until the games, how much longer until this site will meet the basics of web and accessibility standards?

I wouldn’t want to wait too long, lest history will repeat itself.

References