Global Accessibility Awareness Day

May 9 marks Global Accessibility Awareness Day.

To celebrate, I’d like to recap on an experiment in identifying external links, which stemmed from a discussion on the accessibility issues with links that open a new browser window. Originally posted 20 July 2011.

Testing external links up in here. Actually, it all started with a question from Glenda [External Link] about the accessibility of using CSS to announce a new window, based on an external link example [External Link]. Steve [External Link] was there to help. The rest is history.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id dolor sit amet quam consequat tempus. Duis ante arcu, cursus sit amet consectetur eget, accumsan sit amet nulla. Google [External Link] metus urna, egestas ut imperdiet sed, pretium in nibh. Phasellus felis dolor, ullamcorper eu dignissim in, lobortis ut libero. Donec interdum auctor suscipit. Aliquam erat volutpat. Proin libero ligula, pharetra a tincidunt sit amet, ultrices a eros. Curabitur condimentum, Google [External Link] sit amet cursus pellentesque, ligula dui pharetra arcu, non aliquet tellus libero et leo. Cras gravida congue dui, a mattis nisl congue nec. Donec in sapien neque. Maecenas Google [External Link] porttitor aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam ac turpis ut mi cursus pellentesque. Suspendisse potenti. Ut sit amet sem ante, in ultrices dui.

Thank you to Glenda [External Link] and Steve [External Link] for your help on this. Just when I thought I knew everything!

CSS


a[rel="external"] {
background: url(gfx/Icon_External_Link.png) 100% 50% no-repeat;
padding-right: 1.0em;
z-index: 48;
}

a[rel="external"]:hover,
a[rel="external"]:focus,
a[rel="external"]:active {
z-index: 49;
}

a[rel="external"] .ol,
a[rel="external"]:link .ol {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
z-index: 50;
text-decoration: none;
}

a[rel="external"]:focus .ol,
a[rel="external"]:hover .ol {
float: right;
background: pink;
width: auto;
height: auto;
border: solid 1px pink;
margin-left: 1.5em;
margin-top: 0.5em;
padding: 0.2em;
overflow: visible;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-radius: 0.5em;
box-shadow: 0.5em 0.5em 0.5em #000;
z-index:51;
}

a[rel="external"]:focus .ol:before,
a[rel="external"]:hover .ol:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-top: 1px solid transparent;
border-right: 20px solid pink;
border-bottom: 15px solid transparent;
margin: 0 0 0 -20px;
}

HTML


<ul>
<li><a href="http://google.com" rel="external">Google<span class="ol"> [External Link]</span></a></li>
</ul>

Is this the most accessible method for identifying external links and / or opening a new browser window? I’d love to hear your thoughts.

Happy Global Accessibility Awareness Day!

Nablopomo – Day 17 – Skip links

I’m a definite proponent of ‘skip links’ with any site I build. In addition to being an essential part of the Web Content Accessibility Guidelines – 2.4.1. – Bypass Blocks, I firmly believe that skip links are valuable for a more effective user experience. I just do mine a little differently.

My site only has 2 skip links:

Skip to Content
Takes you directly to the content of the current page that you’re on.
Skip to Search
Takes you directly to the search field.

You may have noticed that I do not have a ‘Skip to Navigation’ link.

Why? Quite simply, I feel that skipping to static information doesn’t make the best experience.

This is not to say that the navigation isn’t important. It’s the key to any site, obviously. But for me, this site’s navigation shouldn’t be changing on a regular basis.

It’s not about the importance of content. It’s about accessing dynamic content and the tools associated with it.

Of course, there can be exceptions based on the type of site you have. Perhaps if you have navigation elements that are dynamic in nature (like a product based site that filters down to a specific type of product), then you’d want to reconsider how it’s treated.

Regardless, the key is to assure that the user is having the best and most effective experience possible. For my site, I feel this works best.

Nablopomo – Day 16 – The Angry Birds experience

Angry Birds is the bane of my existence. Oh, how I love it so!

I’ll admit, I can’t stop playing this game. There’s something appealing about flinging birds at pigs, wood, ice and stone. But, like anything I use, I start to pick apart the methods behind the madness. Specifically in this case, I’m very curious as to why this game is successful from a user experience stance. Let’s analyze, shall we?

There’s birds with eggs. There’s pigs with an appetite for eggs. Pigs steal eggs. Birds are angry. Hilarity ensues. But, why is it so appealing?

After you’ve chuckled at the story and started the game play, do you still remember the story? Do you remember the struggle that the birds have against the pigs? Or, does it simply become a game of throwing things at objects?

A sign of a good story is having the user continuously engaged in the world you’ve created. I think the one thing that helps with this is using the different types of birds and pigs. How so? Well, you quickly realize that the pig with the helmets are a little harder to kill. As well, different birds have different strengths and weaknesses. Not only does this make up part of the game play, but it keeps you engaged with the story by making the user think about what bird to use with what pig and / or barrier. The story and the game continued to be connected.

This game is also one of the best examples of effective interaction design. Touch to play. Touch to start the level. Touch and drag to fling the bird. Simple. The instructions itself are also very simple. I really like that only pictures are used to convey what to do with the finger movements and touches.

I guess my only feedback is that the developers might want to add a ‘cheat’ option that allows you to tilt your device to make that big teetering rock fall off the corner of the cliff when it’s just hanging there. Honestly, I think this comes from my own personal frustration with trying to get 3 stars on every level, but that’s just me 🙂

Overall, I’m trying to illustrate simplicity in design. If you want something to be effective from the user’s perspective, keep it simple. I know we’ve all heard this before, but I think that this lesson sometimes gets lost during user experience development. Sometimes, it becomes more about what features and gadgets can we add instead of developing actual engaging game play.

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.