iMatt :: The Blog of Matt Clare

The BlackBerry Playbook coming out on April 19^th has some familiar plays in it – if you grew-up in Ontario:

1. RIM is a Waterloo-based company
2. RIM is/was known for their trackball
3. The device is running the QNX operating system, developed by Waterloo/Ottawa-based QNX Software Systems (which RIM just bought)
4. The screen and input device is are an all-in-one deisgn
5. The whole enterprise seems like a string of poor decisions to create something that will be expensive and will not be successful

Where have we seen these plays before?

The Unisys ICON! Wikipedia Article: en.wikipedia.org/wiki/Unisys_ICON

The computer built specifically for use in Ontario schools commissioned by the Ontario Ministry of Education.

(Thanks for the image, Old-Computers.com)

Unisys ICON computers were kicking around my public school when I was a kid. They didn’t do much beyond very basic word-processing and had a lot of games on them, thanks to the local board of education, and a few of my friends. They were all networked, and relatively reliable, save for the poor teacher/”computer lead” who gave admin access to some of the Grade 8 students.

The ICONs had a trackball (the PlayBook won’t, but the BlackBerry Pearl and others do), it had an all-in-one hardware design, and sat in the corner of our classroom, mostly unused.

The most relevant commonality is that the old ICONs were running the QNX operating system!

The ICON was ultimately deemed too expensive to keep in use or develop for and was cast-off in favour of Apple and others’ more user friendly products.

So now you know Ontario: when you think BlackBerry Playbook, think Unisys ICON.

Update: Tuesday April 19, 2011

Apparently two more things they have in common is no E-Mail application and they both can’t connect to the internet on their own!

As the 2011 season is almost upon us I’m once again encouraging you to sign-up for Mitch & Brooke’s F1 Fantasy Racing League at www.fantasyautoracers.com/f1_01/

This will be Mitch & Brooke’s F1 Fantasy Racing League 14^th year in a row and my third participating. I encourage you to make your team to compete against ZERO Racing, my team. It makes the season that much more fun.

The deadline for the first race is 1 hour before race time on Sunday, March 27th. Go to www.fantasyautoracers.com and sign up now to make sure you get your team in before that deadline. The site looks like it could use a visual update… working on that. But I’m sure you can look past that.

To get you in the mood, here’s a great tribute to Ayrton Senna from Top Gear, featuring Lewis Hamilton. Can’t wait for the new season or to see the Senna movie!

I’m a big fan of famfamfam.com ‘s free icon set Silk. The Silk icon set contains over thousand simple icons that are free to use for any purpose. All those at famfamfam.com ask is that you include a link back to there web page in your credits famfamfam.com/lab/icons/silk/.

The icons are so simple as small that it makes a lot of sense to include them in your web site’s CSS file as Data URIs. Here’s my web page containing the Silk icon set as CSS/Data URIs.

Wikipedia has a good explanation of what Data URIs at en.wikipedia.org/wiki/Data_URI_scheme . The Data URI scheme is a URI scheme that provides a way to include data in-line in web pages as if they were external resources, as opposed to linking to a file.

The other advantage of using CSS is that the images here are loaded as background images through CSS. An advantage for accessibility and other functional reasons when loading an image for decoration only.

Data URIs are the binary file data represented in Base64 encoding. It’s worth noting that Base64-encoded data is about 4/3s of the original data size, or about a third larger than equivalent binary images. Data URIs also my not be as aggressively cached.

With that noted, there are advantages to using Data URIs. Data URIs reduce the number of HTTP requests. Negotiating a new HTTP request is often the biggest bottleneck on a broadband connection. With small files (like these) the overhead of establishing a HTTP request can actually represent more transferred data than the image itself. These types of decisions reduce the number of round-trips and delay.

Basically, if you can avoid requesting an extra file, not only does it save your server the work of looking up the file, but it also saves your user the download time. Google gives more tips for increasing web page speeds through these types of consolidations at code.google.com/speed/page-speed/docs/rtt.html

Web servers can also include the Data URI image in the content they deflate/gzip before they send it to the browser.

For your connivence, here is the Silk icon set as data URIs. (Warning: 2.1Mb file!) Copy and paste as needed.

My little hobby web site for tracking your luck with a large Canaidan coffee and donuts chain’s roll-up promotion is back!

My previous attempt was Drupal-based, and required an account. I was never very happy with the account requirement, and played with it being a facebook App but ultimately took the site down (described in this blog post). This time there’s no need for an account as it’s Twitter-based. This also helps with the promotional side of things.

I had hoped to partner with the www.rimrollerapp.com – but that Twitter based iPhone App needed a technical update, and for other reasons, it’s now removed from the App Store. It’s too bad, but you don’t need anything beyond a Twitter account to enjoy RimCount.com.

Simply tweet with the tag #RollUpTheRim to have your tweet listed on RimCount.com. The site tracks results posted to Twitter in the format of wins/rims (and unofficially, a few other formats).

You can visit the main page for the latest, the scoreboard for the best and worst ratios rimcount.com/scoreboard. There’s also a rapidly growing list of Twitter users who have tweeted with the hashtag #RollUpTheRim rimcount.com/list

The site is no longer Drupal-based, but some of the PHP from the Drupal module I wrote and the MySQL data structure were migrated to the new site which is otherwise built from scratch.

As many developers have indicated, working with Twitter.com‘s non-standard API is quite a joy. I was able to get things rolling (pun intended) quite quickly based on the simple twitter searches through Twitter’s search service’s RSS feed and looking-up someone’s Twitter details via an XML call is easy too.

The hardest part has been writing the PHP to search a tweet for a ratio. Challenges have gone beyond simply adapting for ratios like “x/x” or “x for x” or “x-x”, etc. My original work only work with ratios under ten, then when I adapted it I had to protect agains numbers that were near by but not part of the ratio. I’m only 90% I’ve stopped mathematically impossible ratios and ratios like “3-3 cups were losers!”. The struggle continues. What I have done, like Twitter.com, I’ve added an option from the admin side to disregard a tweet or twitter user.

If you have a Twitter account please tweet your results with the large Canaidan coffee and donuts chain’s roll-up promotion and check RimCount.com to see how your results compare to others’.

I’ve assembled my list of things to look for when preparing content for the web with an eye to accessibility. I would like to add to this advice that I’ve always found that accessible web pages are the easiest way to create content that is well indexed by a search engine – as both serve the goal of helping a machine interpret the content better.

This list is written assuming that most modern tools that help construct content directly for the web help individuals create accessible content by default, and that this is the primary way content makes its way to the web. Tools like WordPress for blogs, or Learning Management Systems (LMSs).

Multimedia content is particularly challenging, as it can require the use multiple senses, and unless accommodations such as transcription or description are added, some individuals may not be able to access multimedia content.

Evan more than with most posts; I’d love to read your comments and suggestions about this list and these practices.

My Checklist for Preparing Accessible Content

This list was created by Matt Clare with resources from World Wide Web Consortium. ^[1] The W3C has a simular checklist document: www.w3.org/TR/2006/WD-WCAG20-20060427/appendixB.html ^[2]

Simple Formatting

• Divide large blocks of information into smaller blocks when possible. This is both technical advice and advice for writing content that is likely to be skimmed by readers.
• Headings for documents, or sub-sections should use pre-defined heading options. They should not be regular text made larger, bolder, etc. The pre-defined headings help assistive software present content.
• When creating a table be sure to identify what cells are headers and what are actual data.
• Never use a table for layout purposes alone.
• Use the existing quotation mark-up for quotations if possible, Never use the blockquote option for layout purposes alone.
• When creating a list use the number of bulleted list options, DO NOT crete your own bullets. There are ways to insert your own bullets into a proper unordered list, or hide the bullets.
• Ensure that all information conveyed with colour is also available without color. For example by bolding coloured text as well.
• Make linked text meaningfull.
  • Example1: Option one would make much more sense when a screen reader were to read aloud all the links on a page rather than option two:
    1. Read the Creating Accessible Content Wiki Article.
    2. Creating Accessible Content Wiki Article Click here.
  • Example 2: Consider where in an alphabetical list of links these two links would appear:
    1. Important article [PDF]
    2. Important article PDF
• Maintain a high level of colour contrast, be mindful of background colours.
• Avoid, blinking, flickering or excessive motion.

Alternative Information/Formats

Programatic access to information is the only guarantee that the highest level of access can be achieved. This is best achieved through providing information in the simplest text-based format without extraneous items.

• Images should be given a meaningful text description if the image is relevant to the content. If the image is decorative or otherwise irrelevant the description information should be left blank.
• Avoid Images of text. If an image is presented containing text the text or a description should be provided in an alternative format. Text not in an image is far more transformable and scaleable than anything represented in an image.
• Audio and video content should have an alternative textual version provided.

Advanced/Technical Formatting Issues

Information for more advanced formatting or for situations where an individual is creating their own HTML and is not using a WYSIWYG editor.

• Make sure your mark-up is valid syntactically meaningful. Most creation tool ensure this, but validation can be tested for public on-line content at validator.w3.org
• Avoid the use of frames.
• Don’t use images as spacers or for other purely layout proposes.
• Content that you don’t want to be seen, but read by a reader, should be positioned as CSS absolute: ie style=”position: absolute;left:-2000;”- left and a whole bunch of negative — not style=”display:none” because screen readers are wise to this.
• Make sure content degrades gracefully:
  • Ensure that pages are usable when scripts etc. are off and provide equivalent information on an alternative accessible page if appropriate.
  • Organize documents so they may be read without style sheets.
  • Make your HTML syntactically meaningful and not dependent on any one browser.
• Ensure that equivalents for dynamic content are updated when the dynamic content changes. With AJAX/DHTML/JavaScript keep in mind how a screen reader may ready the content. Keep in mind the idea of links with title properties offering to skip to a later anchor, or better yet review WAI-ARIA roles, state and focus information in the W3C Candidate Recommendation Accessible Rich Internet Applications (WAI-ARIA) ^[3]
  • Example best practices: When you load a dynamic content element via jquery to make a screen reader see it do a $(“my_thing”).focus();
  • Do not append() to the end of the body and then reposition via CSS – just append it to the actual item/div

Checking the Accessibility of Content

While it is hard to replace the insights an individual that uses assistive tools to access the web can offer one can use assistive software ones self to gain insight. Some assistive software is very expensive, however what follows are a list of Firefox extensions that are very useful for assessing the accessibility of web content. Remember, an automated report can never replace a proper inspection of web content.

Firefox Extensions

• Evaluation Toolbar
• Fangs Screen Reader Emulator
• Web Developer

Notes and References

1. ↑ Chisholm, Wendy Trace R & D Center, University of Wisconsin — Madison, Vanderheiden, Gregg, Trace R & D Center, University of Wisconsin — Madison, Jacobs, Ian, W3C
   (1999) List of Checkpoints for Web Content Accessibility Guidelines 1.0. World Wide Web Consortium. Retrieved 19:44, February 18, 2011, from www.w3.org/TR/WCAG10/checkpoint-list.html. Copyright held by W3C, 1999
2. ↑ Caldwell, Ben, Trace Research & Development Center, University of Wisconsin-Madison — Chisholm, Wendy, W3C — Slatin, John, Accessibility Institute, University of Texas at Austin — Vanderheiden, Gregg, Trace Research & Development Center, University of Wisconsin-Madison (2006) Web Content Accessibility Guidelines 2.0, W3C Working Draft 27 April 2006. World Wide Web Consortium. Retrieved 19:41, February 21, 2011, from www.w3.org/TR/WCAG10/checkpoint-list.html. Copyright held by W3C, 2006
3. ↑ Craig, James, Apple Inc. — Cooper, Michael, W3C (2011) Accessible Rich Internet Applications (WAI-ARIA) 1.0, W3C Candidate Recommendation 18 January 2011. World Wide Web Consortium. Retrieved 19:48, February 21, 2011, from www.w3.org/TR/wai-aria/ . Copyright held by W3C, 2011