Accessibility &Code &Mobile 27 Jun 2013 03:22 pm

CSS Overflow:auto and VoiceOver


I’ve been playing around a bit with Dojo Mobile. My goal is to relearn Dojo and to build an accessible Web app for iOS. Unfortunately not all of the Dojo Mobile components are fully accessible, yet (the team is working on it). The app I am building is fairly simple – an app to track a user’s step count from a pedometer. An app of this type is a bit moot since there are sophisticated devices that do this and communicate to an app via Bluetooth. However, this app uses some basic constructs so it seemed like a real-world but simple undertaking.

Dojo Mobile is a JavaScript toolkit to enable building Web apps to run on mobile devices with the look and feel of the native UI. It provides many widgets and UI elements to quickly build a full featured application. It is based on the Dojo toolkit which enables rapid development of Web applications by encapsulating many common features and capabilities in a browser agnostic api set.

For those who don’t know, VoiceOver is the screen reader from Apple that works with iOS devices. There is also a version for OS X. VoiceOver allows blind, low vision and mobility impaired people to use iOS devices either with or without a keyboard. There are many more accessibility features in iOS as well.

A Simple, Scrollable Region

In order for a user to examine her history of recorded steps I need to use a list within a scrolling view. The header and bottom toolbar are locked on the screen and the user can scroll through the data.

A simple screen with a fixed header and footer and step count data listed in between

The ScrollView provided as part of Dojo Mobile works great and was easy to implement. It works as expected for sighted users who can visually interact with the app. However, one of my goals is to make a fully accessible app and the ScrollView is not accessible to the VoiceOver screen reader. The team is working to make it accessible for the next Dojo release (1.9.1) but I decided to try and come up with some work arounds. Now that iOS and Mobile Safari support the overflow:auto CSS feature, this seems like the logical choice.

Using overflow:auto

I found this example on how to use overflow:auto to create a scrolling div within a fixed header and footer on the page: This uses a div of scrolling paragraphs rather than a list and does work well with VoiceOver on my iPhone 4S. I spent a little more time simulating my situation of a list and came up with an example using a list that mimics the iOS ListView.

Fixing the Header and Footer

The header and footer need to be fixed at the top and bottom of the page so the contents can scroll between them. The following styles are used to fix the header and footer to the top and bottom of the page, respectively:
.fixedHeader {
  position: fixed;
  margin: 0;
  width: 100%;
  height: 48px;
  padding: 0;
  text-align: center;
  line-height: 44px;
  background-color: #6699cc;

There is some visual fluff here but the important pieces are the first 5 lines – fixing the position and top as well as specifying the height. The same is true for the footer (with bottom rather than top included):
.fixedFooter {
  position: fixed;
  margin: 0px;
  height: 48px;
  text-align: center;
  background-color: #6699cc;

Scrolling the Contents

The overflow:auto command provides the scrolling. Most mobile toolkits have provided the scrolling feature via JavaScript but letting the browser do the work is much more efficient. Here is the CSS for the scrolling div:
.scrollContainer {
  margin:0 auto;
  padding:48px 0;

Note that the top and bottom padding matches the height of the fixed header and footer. Now the contents of the block element assigned the scrollContainer class will scroll as expected between the header and footer when dragging your finger on the screen.

Adding Scrolling Data

I hard coded some simple data to represent logging of steps during the month of June. The date and the number of steps make up each list item. The list is implemented using ul and li elements with appropriate styling. I just made the step count increment by 1 each day so it corresponded with the date: June 1 has 1001 steps, June 2 has 1002 steps etc. For those of us not used to it, listening to VoiceOver can be very tedious. I want to make sure items are scrolling properly and listening to incremental data is helpful. Even if I don’t listen to the entire list item being spoken I have some idea where I am in the list. Although it would have been better if I had typed out the date, June 1 for instance, rather than 06/01 because VoiceOver speaks them both together. It is a bit confusing to hear, “zero six slash zero one one zero zero one button” for each entry.

Each list item is given a role of button. The idea is that you tap an item to open a new screen with additional details. There is no event handler for the button in this code so activating it does NOT work. The idea is to demonstrate the scrolling not the fully implemented app! When the list item is not marked as a button, the two pieces of information, the data and the step count, are focused and spoken separately by VoiceOver. By adding the role of button they are focused and spoken as one unit. Here is the code for the scrolling section:

<div id="container" class="scrollContainer">
  <ul class="stepData" style="padding:0px;">
    <li role="button">06/01<span class="rightData">1001</span></li>
    <li role="button">06/02<span class="rightData">1002</span></li>
     // rest of month data goes here …
    <li role="button">07/08<span class="rightData">1038</span></li>
    <li role="button">07/09<span class="rightData">1039</span></li>

Testing with VoiceOver

If you run this example on an iOS 6 iPhone running VoiceOver it works pretty well. Here is the url so you can cut and paste if necessary:

I am not a VoiceOver expert but here are the ways I found to move through the list items.

  • Swipe left and right to move from backwards and forwards from list item to list item.
  • Slide your finger down the screen to move down the list from item to item. However when you reach the last visible list item the footer will receive focus even though you are not at the end of the list.
  • Slide your finger up to move up the list. The same problem occurs at the top of the screen area – the focus will move to the header even if there are additional items that have scrolled up off of the screen.
  • Swipe three fingers to move a page at a time through the list. Once a new page is visible, swipe or slide one finger to traverse through the visible items.

Using these techniques you can get to all of the list items. However, I have noticed some quirks that I think are issues with VoiceOver and/or the interaction with the browser.

Losing Focus

Focus sometimes disappears off of the screen. An item that has scrolled “behind” the header or footer will sometimes receive focus and be spoken by VoiceOver. Swiping to the next or previous item usually causes the container to scroll and the next/previous item is now visible on the screen. However, sometimes (this is not always reproducible) after the item has been scrolled into the visible area of the screen, the focus indicator is missing. Moving to the next/previous item one more time restores the visible focus indicator. Since the non-visible item is spoken, losing sight of the item is not an issue for folks who are not looking at the screen. It is confusing for folks who are using VoiceOver for keyboard only support and have the voice turned off. When the focused item is not visible on the screen these users can not see the information! The work around is to move to the next/previous item a few times until the content scrolls and the focus is properly displayed.

The image belows shows the focus ring overlapping the footer:
A simple screen with a fixed header and footer and step count data listed in between

Size Matters

I also noticed that the height of the items affects the loss of focus and visibility. Items that are taller (the height is a larger value) do not scroll off the screen as often as items that are shorter. Notice the behavior difference with VoiceOver when accessing the following files:

In my testing on my iPhone 4S with iOS 6.1.3 the focus problems are more prevalent when the item height is smaller. I am anxious to test this with iOS 7 and see if things work better!


While it is not perfect, using css overflow:auto is a simple way to implement a scrolling region. While is is not perfect with respect to VoiceOver on iOS it is certainly usable and much easier than implementing the scrolling via JavaScript! Unfortunately this simple version does not include all of the features of the Dojo Mobile ScrollingView so I am anxiously awaiting the accessible version from Dojo!

Code &Dojo 30 Apr 2013 12:11 pm

Using the Orion Editor

I decided to take a look into Orion – an eclipse project that is touted as, “An open source platform for cloud based development”. I see that you can add it into your blog and thought it might be useful for showing some of the Dojo Mobile code I am developing. This post is a test to see if I added it right (the directions are here:

 * This is an Orion editor sample.
function() {
  // code goes here

Seems easy enough, now I just have to figure out what to do with it? Why do I want and editor in my blog post? Can’t I just embed with the <code> markup? I think the more interesting thing is to actually use the Orion IDE, I’m off to install that now.

Accessibility 29 Apr 2013 02:06 pm

Learning Dojo Mobile

It has certainly been awhile since I posted to this blog! I’m resurrecting it to post about a development topic that I hope will become accessibility related. Basically I need to learn Dojo Mobile and I thought I would describe my learning process here.

I worked on Dojo several years ago to make the core widget set, dijit, accessibile. Since then I have been working on another open source project, Apache Cordova. It provides a framework to allow you to build mobile apps using Web technologies and provides device feature access through JavaScript apis. Check it out at

Now I need to relearn Dojo for a possible mobile Web project. Ultimately I’d like to use Cordova to add some device features to that app and wrap it up as a native application. Then, I want to make sure it is fully accessible to people with disabilities on at least the iOS platform. Here is my first dive back into Dojo and Dojo Mobile.

Getting Started

I decided that I did not want to work from a CDN so that meant I needed to download the Dojo source code. Since I used to work with Dojo I still have an eclipse project set up with SVN access. Technically I think I can still commit to Dojo but I wouldn’t dare do that without a code review after being away from the code base for so long! Since there has been some accessibility work done on the dojo mobile widgets I opted to live on the edge and get the lastest source code drop. I can update this if changes that I need get added. The other advantage to working on a local copy of the code is being able to examine the source code itself.

Unless you have a need for a specific fix, download the latest shipped version of dojo here: You want the source version so that you get all of the tests. The tests can be very helpful when you don’t quite “grok” something from the documentation. I got it by SVN but I am happy to see a github option as well. I used git and github for Cordova work and have to admit that I really disliked git at first. Now it is a love / hate relationship – I hate that it is fairly complicated and my brain can’t remember all of the commands but I love that it is so powerful!

As the last part of the setup you will need to set up a web server to test your code. I use the apache server that is built into OS X on my MacBook Pro. I will start with just building a web only version of the app so it doesn’t really matter where the code lives. Once you have the Dojo build downloaded and the code accessible from the web server, check out the Dojo Mobile examples in the dojox/mobile/test directory.

I’m not going to walk through the server setup here. I’ve just provided a few notes about my setup below.

My httpd.conf file has the following alias:
Alias /iSteps /Users/bgibson/Documents/Projects/test/Steps/www

AllowOverride All
Options Indexes FollowSymLinks
Order allow,deny
Allow from all

In the www directory I have the following subdirectories:

These came from the dojo download.
To access the dojox/mobile tests I use the following URL: http://localhost/iSteps/dojox/mobile/tests/. You could also dump your dojo code into a subdirectory of the default web server host location.

The example app is just a simple one for recording steps from a pedometer. It’s hardly necessary in this day and age of Fitbit and other devices with their own apps, but it does utilize basic mobile web features: views, lists, tabbar, storage and more. More on the app in the next post.

Accessibility &conferences &Mobile &SXSW 17 Mar 2011 04:05 pm

Notes from Inclusive Mobility Talk

As promised, here are the notes I made in preparation for my Inclusive Mobility Core Conversation at SXSWi 2011. I didn’t need to rely on these too much as people actively participated and asked questions!

Talk is about making mobile applications accessible for ALL. Don’t want to just talk about people with disabilities because all people want to be able to use mobile devices in all environments. PWD are on the cutting edge and we should listen and learn from them.

Poll audience:
Who is aware of accessibility Api for iOS?
Who has used it?
Who has tried VoiceOver on iOS device (3GS and above)?
Any PWD here that use an mobile device?
Which one?
What do you like/dislike about it?
What advice do you want to give developers for making more usable apps?

Where are we with the different devices?


EyesFreeAndroid – Google solution
TalkBack(screen reader), SoundBack(auditory), KickBack (haptic)
Code Factory – just released new set of 10 apps and a screen reader
IDEAL Group – makes accessible open source apps for Android.
Speaking Pad – one of most popular applications. Type something in and press a button for phone to speak the text.
Does Android have an advantage with at least some “hard” navigation buttons? Or devices with “real” keyboards?
Edwin speech recognition app- how useful is this? Is there speech reco built into Android, now?

no built in screen reader? Can buy one but is expensive


Accessibility API
API helps to make apps accessible – what about mobile Web sites?
Voice control – do people use it?

Standards for Accessibility
What about ARIA? HTML 5 is incorporating ARIA so that should help make it more universal and force better support
Use standard HTML accessibility, avoid scripted controls (for now)

Google Voice
How many use it? Still relies on visual interpretation but does provide easier access then typing
Experience on iOS vs Android?

Dragon Nuance Mobile Development Kit
cloud based speech to text and text to speech service that can be accessed from iPhone and Android devices – developer kit that allows you to integrate into apps

What about captioning?
Google has beta auto-captioning on youTube – but that option is not available on iPad?
auto transcribing could allow you to follow a meeting in a noisy environment – subway, bus, conference, etc.

Self Voicing Apps? What is available how are they used?

What about using the cloud?
Access an assistive technology by sending data to via the network and have spoken text or perhaps a transcript come back?

Need for device independent interactions and events.

Lenovo has eye tracking laptop – do we see that going to mobile devices? Maybe for tablets???

conferences &SXSW 17 Mar 2011 03:42 pm

SXSW – Final Interactive Day

I supported my friends at two accessibility talks today. First was Accessibility for the Visually Impaired: Ground Breaking New Technologies. This featured Michael Cooper from the W3C who I worked with when I was on the Web Content Accessibility Guidelines working group. He was asked questions by the panel moderator, Genevieve Wilkins. Michael did a great job of reviewing technologies, pointing out resources and even being brave enough to demo ARIA with a screen reader!

Next was Accessibility the Musical! Moderated by Sharron Rush, the executive director of Knowbility. She had a great panel of accessibility experts and users of assistive technologies. There was live sign language interpreting and many demos and videos! Barbie Parker discussed the field of interpreting live performances and how much work is involved. I never realized how important it is to do research on the person or performance being interpretted. Imagine trying to sign a live musical performance without knowing the playlist? Or, who would have thought that knowing about someone’s behavior or background, or OCD would be important for interpreting? It is much more than just translating spoken word to sign “on the fly”. Celia Hughes of VSA Texas reminded us all of how important it is to enable ALL people no matter what their abilities and capabilities and shared some great success stories. Desiree is a blind “tech geek girl”, mother, and musician who demonstrated some of the accessible and non-accessible apps and web sites she encounters. Elise Whitworth is a deaf web designer. It was great to get her perspective. And, it is always fascinating to watch and appreciate the great work of the interpreters! There was a discussion of how planning for people with disabilities at conferences and events is important. You can’t wait until the last minute to get braille versions of programs, to arrange for interpreters, full access to the venue and stage, etc. Truly an enlightening presentation – I wish it could have attracted more attendees but it was recorded – I’ll try to post the recording here when it is available.

I had lunch with some of my accessibility friends. That was a nice break!

The final presentation of the day was Voices from the HTML5 Trenches: Browser Wars IV. Representatives from Google Chrome, Opera, IE 9 and Mozilla shared insights and opinions. This session was well moderated by Arun Ranganathan. There was lots of discussion about HTML5 video and codecs, standards, etc. Always a fun session to attend.

I also go to attend another movie, Buck, about a modern day Horse Whisperer. It was great and I encourage any one interested in horses or human nature to check it out. See buckthefilm for more details. It is a truly inspiring movie – even if you aren’t interested in horses!!! I’m sorry that Buck doesn’t have any clinics in the New England area this year – I would love to attend as a spectator just to watch this man perform his calm magic!

conferences &SXSW 17 Mar 2011 03:21 pm

SXSW – Day 4

Started out day 4 with a dynamic presentation by @DrG (Dr. M A Greenstein) call Neurons Speaking!: Design with the Brain in Mind! She was a very dynamic speaker and started by listing the 3 C’s to consider:

  1. Creativity
  2. Consciousness
  3. Collaboration

She said she would be talking about three different gaming models – Posit Science Brain Training Module (which I was disappointed to learn costs $395 per module), Call of Duty, and Civilization – none of which I was familiar with. However, a fair number of people in the room had participated/played in one of these. She then discussed the 6 aspects of the brain:

  1. brains are dynamically interconnected
  2. brains are predictive systems
  3. brains are good at predicting patterns
  4. brains are neuroplastic
  5. brain is a good soda jerk (delivers correct concoction of hormones when needed)
  6. brains love novelty

So, we should design with these in mind to keep the brain engaged. Dr. G cited studies that showed higher cognitive function after playing games. Hey, I can now justify that game playing break during the middle of my work day! The take away message was to design applications with selective attention, incorporate face and pattern recognition and increase visual / spatial fluency. A one hour talk (and these poor notes) do little justice to the session – I plan on doing a google search on DrG or to start following her on twitter to learn more!

I toughed out another workshop (2.5 hours) on Cross-Platform Multi-Screen Development. It started out pretty generic with the top 10 considerations for multi screen development. Multi-screen referring to different devices and screen sizes.
10. screen size and resolution – display resolution is no longer just 72 dpi
9. device sensors and capabilities
8. orientation
7. hardware buttons
6. device specific interactions models
5. processing power
4. OS – single task vs. multi-task
3. Network protocols and security
2. User interaction and experience
1. deployment

Then Adobe presented on how you can achieve multi-screen development on “most” platforms using the Adobe tools and flash. Yawn. And no real answer when I asked how to implement accessibility.

Then Brian LeRoux from Nitobi gave the PhoneGap pitch again (see day 2).

Always a glutton for punishment I went to another workshop: CSS3 Beyond the Basics. This was really great! It was one of the most technical workshops or sessions I attended at SXSW and started right in with the code. All of the presenters are REALLY knowledgeable. Not being a CSS guru this quickly got over my head so I left to attend another session. Although in hindsight I should have stayed in this one – even if I don’t use this level of detail in CSS very much. But, from all of the tweets about the session it was very well liked by those who use complicated CSS on a regular basis – I’m still at the “CSS for dummies level with respect to fluid layous and all of the cool things you can do with backgrounds, transistion, etc. etc, etc. The presenters also brought a bottle of tequila and there was a shot to the asker for each good question asked!

I left the CSS3 Workshop to attend LBS 101: The arrival of Ubiquitous Geolocation. I guess from the title I shouldn’t really have expected anything new or exiting. This was just a general introduction to geolocation. I did find a few interesting facts to jot down.

  • 53% of text messages in the US in 2010 where “where R U” type messages
  • of the 101 most popular apps (on iTunes, I think), 47 transmitted the phone’s location

Some of the listed uses for geolocation:

  • marketing
  • fraud protection – don’t authorize my card at an ATM if my cell phone isn’t at that same location
  • compliance
  • insurance /telematics, an ebay-like/ crowd sourcing type shipping model, was provided as a use case for geolocation. Hmm, maybe I can get someone else to transport my cats and listen to them howl all the way! No, worries, I’d never do that to my kitties :)

I really enjoyed the IBM and Austin Chamber of Commerce sponsored party at the Four Seasons Hotel. It included a live band (although a bit too loud for trying to chat), great food and drink. The highlight was the presentation by Dr. David Ferrucci of Watson fame. I think IBM would have appreciated a larger attendance but since this wasn’t an official SXSW party it didn’t get any space in the schedule. This prevented it from being overrun by the “free food and drinks” crowd which I appreciated. Not usually one at loss for words I had some trouble mingling with the folks at this party – until I connected with some IBM folks from Application Services in Vancouver, BC. That made the evening even more enjoyable!

conferences &SXSW 17 Mar 2011 10:19 am

SXSW – Day 3

Sorry, these posts are so long winded. I hope they provide at least some useful info!

Started the morning at Gueros for breakfast ( I had the Huevos Motuleños) with my accessibility friends – there are many of them based in Austin! Although, I’m not sure it was wise to schedule an 8:00am meet up on the first day of daylight savings time. However, we did have 12 brave souls attend!

Joe McCann did a great session called One Codebase, Endless Possibilities: Real HTML5 Hacking. You can find his slides at And check out his example web app: from your mobile or web enabled device. He started with a great overview of what is the “Web Stack” and why you should use it for mobile development and then went on to provide a real example. He listed tools and demo’ed PhoneGap, Appcelerator Titanium as well as Node.js. Definitely worth checking out the slides. I didn’t pay attention to whether or not this was recorded by SXSW but since it was in a large room it probably was.

Next I attended Designing iPad InterFaces – New Navigation Schemes. While Lynn Teo was a knowledgeable and good speaker, I really didn’t get all that much out of this presentation. Again, it seemed like another “common sense” type of presentation that, unfortunately seems to becoming more common at SXSW. Lynn started out with a few basics to consider when designing a tablet application:

  • size
  • shape
  • form
  • mechanics

Form must inform function and items must be relatable, discoverable, and learnable. She then went through many apps pointing out the different navigations schemes used and why they were successful. To be honest, it didn’t really hold my attention – maybe it was because of daylight savings time, maybe because I am not a designer. Thus, not too many notes or take aways. This was held in one of the Ballrooms in the Austin Convention center and thus, likely to have been recorded. Probably worth a look by designer types or anyone wanting to understand tablet design better.

I was really captivated by the Non-Visual Augmented Reality and The Evaporation of the Interface talk that was presented by folks from Check out the description and speaker bios at These folks tracked their own locations over time and wanted to look at location apps and issues. The current location apps often require

  • picking the location from a list that is displayed
  • selecting the friends to share location data with OR always sharing with all friends in the system
  • don’t deal with “temporal” friends – for example the client I am visiting at 2:00 may want to be able to see my location and know I am on the way
  • need to deal with “noise” and inaccuraties from cell tower triangulation

The presenters believe that sharing location data should eliminate stress by notifying someone about current individual’s location or the location of the bus I am waiting for. These kinds of messages can eliminate uncertainty – yes, the lunch will be delivered to the meeting on time as the delivery person is two blocks away. There is no traffic ahead, I will be on time for my Dr.’s appointment. They want to be able to combine location notifications with calendar info and perform automatic checkins.

They have taken this a step further and used it to automate their own home. When they are x blocks away from home the system is notified to turn on the lights. When they are x blocks away, the lights and other unnecessary appliances are turned off – no more worries about leaving the stove on when you leave for the day!

You can also set up location based notifications for the future – next time I’m in Walmart/Target/Big Box Store remind me via text message to buy AA batteries. Request directions from my hotel to the convention center automatically sent when you reach the hotel. Automatically text Mom that I have arrived safe and sound when I reach a particular airport. They talked about experimenting with a haptic belt that would vibrate when the wearer was pointing North. What if you downloaded directions to the belt? It could then vibrate when you reached an intersection with the location of the vibration (front, back, left, right) indicating the direction to turn. I immediately thought about this being a helpful device for blind / low vision folks navigating within a new locale. Heck, I’d like it too so I wouldn’t have to stand out on the corner reading my map on my tiny smartphone screen!

The presentation also talked about integrating with IRC – phone could text location to IRC and a channel bot passes on the command to a device. For example turning on the AC in the home when you leave the office. They have an iphone app – Geoloqi that I am going to check out and a set of api’s for accomplishing the location messages. There was a discussion for the need for locations within buildings – such as convention centers, malls, etc. There is no standard for this right now. Seems like a market opportunity for some company to standardize this. Obviously there are security considerations with location data so that needs more investigation and proposed solutions. My write up really doesn’t do this session much justice – it was one of the few that I really found exciting and I plan to look into the geoloqi api in more detail.

The Future of Collective Intelligence: Location, Location, Location! was disappointing. Maybe because it was late in the day in a packed room. It started out interesting with discussions of what data collectors such as foursquare, gowalla, etc can give back to the consumers? Perhaps the long term reward of “checking in” can be future recommendations for products/services/locations based on previous locations? Could we use traffic data to control traffic lights in real time? When the audience was asked who would be willing to give out location data for the opportunity to drive down a street and have the traffic lights be timed to turn green as traffic approached – 2/3 of the room raised their hands. It would also be helpful to have employers be able to track employees when traveling – useful for disasters, accidents, changing plane schedules, etc. Foursquare and American Express are currently working together for automatic discounts. Just by checking into a location and agreeing to pay with your AmEx card you automatically get a discount on the bill. This session also mentioned future checkins but didn’t really go into in much (certainly not in the detail that the geoloqi folks did in their presentation).

Today was the AustinJS party. I knew some folks who were going to be there so I made the 1.0 mile trek to the KungFu Saloon. I was hoping the distance might cut down on the crowds – no such luck! It was packed but I did get to see the #5kilts (check them out on twitter) and score some free beer and tacos. I worked off some of the free food walking back to the convention center and called it a day.

conferences &Mobile &SXSW 17 Mar 2011 10:01 am

SXSW – Day 2

I skipped the opening party but heard my fellow SXSW attendees stumbling into the hotel at 2:45am! Guess it was another great party by Frog Design!

I started Day 2 by attending iPad Design Headaches. Unfortunately the sound quality in the room was bad and it was hard to hear. Although 10 minutes in and the presenter really hasn’t said much: iPad is winning, has superior design, iPad users are mellow…..

Did warn developers to be aware of “greedy pixel syndrome”. The iPad and tablets have more space and designers and developers often strive to use it but should be aware of keeping designs clean and uncomplicated. Use space wisely to ask questions of user about what data is desired and provide that data. Tap quality trumps tap quantity.

Strive for Media quality and avoid overkill. Gave ABC news as a bad example with the globe paradigm. The Globe is a unique way to display article titles but users can’t get entire article title until they actually click on one of “globe pieces”. The goal should be to showcase the content and not make the user work to reach it. On a side note, another iPad design session showed off the ABC news site as a unique design paradigm.

Marvel comics was given as a good example of using space. User can see three “lines” of a comic on one screen or can drill down and see only one “line” at a time in a larger format. However, in the other iPad Design session I attended the Marvel comic app was shown as a bad example because it was not intuitive to get the single line version to display (you had to double tap). Just proves that beauty (and design) is in the eyes of the beholder! NYTimes was given as a good example to maintain brand familiarity. FlipBoard showcased as a reorganization of twitter and FaceBook feeds – plenty of room for new and old, focuses on content and let’s user explore at their own pace.

Suggested that page flip paradigm is a pathetic lack of imagination. Although familiarity and intimacy invite touch. When designing apps want to honor brand identity. Always ask if different is always better when designing an app. Used the term FrankenInterface and gave the Apple contacts on the iPad as a good example of this bad interface. If you open the contact on an iPad it is presented as a book and you would expect swipe to go from page to page – it does not, you must use the navigation icons at the bottom of the screen. The session was interesting but I really didn’t feel that it provided much new information. I also had to leave early to prepare for my session which was next.

I hosted a core conversation on Inclusive Mobility. It was well attended and had great participation. I was a bit nervous about hosting this conversation as, unfortunately there isn’t too much to say on Mobile Accessibility at the moment. I had some notes in case I needed to keep the conversation flowing – I will post those in another entry. I didn’t take any notes during the session as I was busy :-) I did, however, have several folks approach me during the rest of the week to let me know they enjoyed and appreciated the session!

Was very disappointed in the Inclusive Design Session. Had good information but was not presented well. The speakers were not very dynamic and they could have done a much better job at providing good and bad examples to make their points. They talked about developing a plan when designing to consider:

  • Brand custodianship
  • user experience
  • content stragety

Gave a list of important design elements:

  • user centered
  • beautiful
  • on brand
  • accessible
  • usable
  • interoperable
  • open
  • meaningful
  • universal

Basically just common sense, in my opinion. Also, went through 10 principles of design. But, I was starting to lose interest at that point. Too bad since this is an important topic – we really need to educate mainstream developers on inclusive design.

I attended a 2.5 hour workshop on Building Native Apps Across Platforms. It started with Jonathan Stark basically giving the same one hour talk he gave at SXSW last year – that is a fail in my opinion. He demo’ed CSS transistion, animations, and transforms. Then did his JQTouch demo. You can find the demos at

David Kaneda talked about Sencha Touch. This was a good overview and interesting pitch for Sencha Touch. 1.1 will be coming out soon and will support Blackberry 6 and Playbook. Other interesting tidbits: Sencha uses base64 encoded icons for icons and also makes use of SASS and Compass within the CSS. Version 1.1 is adding a charting package. It is SVG with fallback to canvas as necessary. Sencha definitely seems worth looking into. I know folks are also working on Dojo Mobile – hope we can see that demo’ed at SXSW next year. I was really disappointed to not hear Dojo mentioned much at all at SXSW this year.

Brian LeRoux gave the pitch for PhoneGap. Gave a brief demo using xCode. PhoneGap schedule is 0.9.6 in April and PhoneGap 1.0 in the May/June timeframe. Indicated that Samsung is going to be contributing Bada work. I work on the open source PhoneGap project. For those who don’t know what it is- PhoneGap is an open source project that bridges the gap between Web and mobile devices. Developers build apps using Web technologies such as HTML, CSS and JavaScript and PhoneGap provides a JavaScript api to access native device features. The developer packages up the Web app with the PhoneGap code to create a native application. The beauty is the developer builds the app with web technologies they know and that work across platforms, then uses the PhoneGap code with the native SDK to build the app for each platform. The developer using PhoneGap doesn’t need to know the native language for each device. IBM has several developers contributing to PhoneGap.

Brian also demonstrated, weinre, a remote debugger for mobile devices. One of my IBM colleagues created this! We also got a video demo of which allows you to submit the Web content for a PhoneGap app and have it built for different devices in the cloud. No magic bullet to work around device specific (ie apple and blackberry) licensing agreements – there are mechanisms for you to submit them into the build process. Brian also suggested search for “sounders bookmarklets” in google for some useful tools.

Enough for one day! I skipped the parties and went to the documentary, “The City Dark” about how light pollution is affecting our world. Definitely worth seeing! Happy that my badge gets me into both SXSW Interactive and Film AND that I made it to a film!

Accessibility &conferences &SXSW 12 Mar 2011 09:33 am

SXSW 2011 – Day One in review

Can’t even remember the last time I posted……. but this seemed like the easiest way to share my thoughts on SXSW this year.

I decided not to lug my laptop around the conference this year and just bring my iPad. I have penultimate for taking notes and can check email, my SXSW schedule and twitter as needed. Only issue with penultimate is I wish I could have a finer point on the stylus – and better handwriting!

Things got started at 2:00 and I attended the interview with Tim O’Reilly. Although he is an icon in the industry I didn’t really know much about him. He started by writing computer books when he couldn’t get a job out of college with a degree in Greek and Latin! I liked this quote that his success has been, “happy accidents that came from ignorance”. He also discussed how great brands have a core – they mean something.

When asked about getting into politics, Tim made it clear that he is working on government and not politics. He said a concept that got him interested in government was in a book that referred to government as a vending machine. Tim’s take on that (which differed from the author’s intent) was the government is a vending machine where you put $ in and get services out. And, it really isn’t working and he believes that government should really work more like a platform. When asked about his political views, Tim believes he is a fiscal republican and social democrat (I know a few people like that ;). He mentioned and how govt. needs help from savvy tech folks.

Tim said much more – he never seems to be at a loss for words! That’s what I took away.

I also attended Thin is In The Future of Digital Wallets. This talk reviewed what a “digital wallet” is and who are the players. The presenter, Christina Nguyen White of SapientNitro, indicated that the talk was not technical but more about dealing with the digital wallet from the eyes of the consumer. The four pieces of a digital wallet are

  • payment method
  • financial method
  • coupons
  • tickets/passes
  • comparison shopping

Examples of players who are “close” in the digital wallet market in the US are PayPal and Starbucks. The big question to ask with digital wallets is security. A poll of who users believe is responsible for security reveals 55% individual, 15% phone manufacturer, 30% carrier responsibility. Who are the players? Consumer, retailer, financial institution, and carrier. Who owns the digital wallet? – financial institution, retailer, carrier. I’m not sure I really want the carrier that involved in my digital wallet but it seems fairly inevitable. Christina spent time discussing the different responsibilities of each of the players. Most of it was all common sense, the retailer needs to build brand loyalty using special offers, coupons, push notifications, etc. without annoying the customer. I was hoping for a more technical talk on how digital wallets will be implemented. My take away is that there is still an opportunity to shape the market with a payment solution using smartphones. ISIS, the mobile payment service organized by the carriers, was offered up as the driving factor going forward in the US but no details were provided.

My last session of the day, How Farmers Get Serious Business Done with Mobile, was a panel of 5 people all involved in the Farming industry in the US midwest. Folks were from Loud Out Technologies, John Deere, Lava Row, Farmers use of smart phones is 33% Blackberry, 18% Android, 10% iOS. Why is iOS so low for farmers? One reason is lack of AT&T coverage another is emotional – farmers don’t seem to like Apple. It was also suggested that the iPhone isn’t “tough enough” for farm use.

What are the things farmers want in a smartphone? Calilng, advertisement related info, pictures, and 69% use SMS. They definitely use it for data on commodity markets as well as weather. Use for controlling equipment such as sprinklers. During the talk animal management came up as an area with little software – there are no good applications for animal management on the desktop nor for mobile. Looks like a possible market given more stringent livestock controls and tracking requirements.

Talked about needing apps to help with information management. John Deere representative showed a video on Farm Insight. The John Deere service rep appears at a farmers work shed with a new air filter. The tractor was being used out in the field and it communicated to John Deere that it needed a new filter. The farmer contacted the operator and sure enough, the tractor was displaying a signal code for a filter change.

Other resources that came up: – there was an article written about this at recently.

And got to see my accessibility family at the AIR Awards party! That was fun – it was a fully accessible party with close captioning as well as signing of all the events and music!

Accessibility 02 Jul 2009 01:27 pm

More Fun with the tabindex attribute

Back in November, 2007 I blogged my results of testing the tabindex attribute in several browsers. I recently retested with the latest versions of the browsers and included Safari 4. Luckily the recommended methods for working with the tabindex attribute do not change. Here is the updated version:

All you never wanted to know about tabindex

The tabIndex attribute can be used to allow nearly any element to be put into the tab order or receive focus programmatically. This has been implemented in Internet Explorer starting with version 5, Firefox starting with version 1.5, Opera 9.5 and Safari 4.
Being able to set focus to any element on the page is important for accessibility in order to implement full keyboard navigation. Elements that represent the intial interaction with a user interface component
can be but into the tab order. Other elements which are part of a particular user interface component can be interacted with via other key combinations. The keystroke interaction and identification of the user interface components to assistive technologies depends upon being able to set focus to these elements.

How Focus and tab key navigation work

  • Normally only input and anchor elements are put into the tab order of a page by default.
  • Setting a tabIndex attribute of 0 onto an element will put it into the tab order of the page and allow it to receive focus via the keyboard.
  • Setting a tabIndex of -1 on an element will allow the element to receive focus programmatically. For input and anchor elements, setting tabIndex of -1 will remove the element from the tab order and allow focus to only be set programmatically.
  • Setting a tabIndex of >0 onto an element will put that element sequentially into the tab order based on the tabIndex value. Elements with a positive tab index are put into
    the tab order before other elements with a tabIndex of 0 or which are in the tab order by default.

There are different behaviors for the tabIndex attribute and capitalization of the I makes a difference in how the attribute is interpretted in html and xhtml.
After testing different combinations of setting and querying the tabindex attribute, a set of best practices is outlined below followed by a table listing the results of each test.

Using tabIndex across browser and content type

  1. Always use tabindex with lowercase i in markup. See row 1 in table below.
  2. Use tabIndex with uppercase I when setting in script via element.tabIndex. See row 4 in table below.
  3. Check browser and/or content-type when setting in script via element.setAttribute()
    • if is IE or content-type is text/html – set via elem.setAttribute(tabIndex) uppercase. See row 6 in table below.
    • if is content-type application/xhtml+xml or not IE 6 or 7 – set via elem.setAttribute(tabindex) lowercase. See row 7 in table below
  4. Use lowercase when querying a value using getAttribute(tabindex) that was set in markup as lowercase. See row 9 in table below.
  5. Use lowercase when querying a value using getAttribute(tabindex) that was set directly on element using element.tabIndex uppercase. See row 15 in table below.
    Setting tabIndex directly on the element using element.tabIndex avoids having to check browser or content type when getting the value.
  6. If the rules above have been followed, use lowercase when querying a value using hasAttribute(tabindex) where available. See rows 25, 31 and 33 in table below.

Simplified Rules

  • use tabindex lowercase to set in markup
  • use element.tabIndex with uppercase I to set in script
  • query via getAttribute(tabindex) lowercase

TabIndex testing results

The following table shows the results of testing on Windows with Internet Explorer versions 6, 7, and 8, Firefox, Firefox 3.0.1, Firefox 3.5, Opera 9.64 and Safari 4.
IE 6, 7, 8 where tested using HTML 4.01 strict. Firefox 2, 3, 3.5 as well as Opera and Safari were tested with HTML 4.01 strict as well as with XHTML 1.0 strict
served with content-type of application/xhtml+xml. Unless otherwise noted, a div was used as the test element.

 IE 6/7 IE 8 HTML FF 2/3/3.5, Opera 9.64, Safari 4 HTML FF 2/3/3.5, Opera 9.64, Safari 4 XHTML
1 tabindex set in markup (lowercase) yes yes yes yes
2 tabIndex set in markup (uppercase) yes yes yes no
3 tabindex set via elem.tabindex (lowercase) no no no no
4 tabIndex set via elem.tabIndex (uppercase) yes yes yes yes
5 tabindex set via setAttribute(tabindex) (lowercase) no yes yes yes
6 tabIndex set via setAttribute(tabIndex) (uppercase) yes yes yes no
7 query elem.tabIndex uppercase when set as 0 in markup as lowercase 0 0 0 0
8 query elem.tabIndex uppercase when set as 0 in markup as uppercase 0 0 0 -1
9 query getAttribute(tabindex) lowercase when set as 0 in markup as lowercase 0 0 0 0
10 query getAttribute(tabIndex) uppercase when set as 0 in markup as lowercase 0 0 0 null
11 query getAttribute(tabindex) lowercase when set as 0 in markup as uppercase 0 0 0 null
12 query getAttribute(tabIndex) uppercase when set as 0 in markup as uppercase 0 0 0 0 1
13 query getAttribute(tabindex) lowercase when set via elem.tabindex lowercase 0 null null null
14 query getAttribute(tabIndex) uppercase when set via elem.tabindex lowercase 0 null null null
15 query getAttribute(tabindex) lowercase when set via elem.tabIndex uppercase 0 0 0 0
16 query getAttribute(tabIndex) uppercase when set via elem.tabIndex uppercase 0 0 0 null
17 query getAttribute(tabindex) lowercase when set via setAttribute as lowercase 0 2 0 0 0
18 query getAttribute(tabIndex) uppercase when set via setAttribute as lowercase 0 0 0 null
19 query getAttribute(tabindex) lowercase when set via setAttribute as uppercase 0 0 0 null
20 query getAttribute(tabIndex) uppercase when set via setAttribute as uppercase 0 0 0 0 3
21 query elem.tabIndex uppercase when it has not been set in markup 0 0 -1 -1
22 query getAttribute(tabIndex) upper or lowercase when it has not been set in markup 0 null null null
23 query elem.tabIndex from <a> with no explict value set 0 0 0 0
24 query getAttribute(tabIndex) upper or lowercase from <a> with no explict value set 0 null null null
25 query hasAttribute(tabindex) lowercase when set in markup as lowercase NA true true true
26 query hasAttribute(tabIndex) uppercase when set inmarkup as lowercase NA true true false
27 query hasAttribute(tabindex) lowercase when set in markup as uppercase NA true true false
28 query hasAttribute(tabIndex) uppercase when set in markup as uppercase NA true true true 1
29 query hasAttribute(tabindex) lowercase when set via elem.tabindex lowercase NA false false false
30 query hasAttribute(tabIndex) uppercase when set via elem.tabindex lowercase NA false false false
31 query hasAttribute(tabindex) lowercase when set via elem.tabIndex uppercase NA true true true
32 query hasAttribute(tabIndex) uppercase when set via elem.tabIndex uppercase NA true true false
33 query hasAttribute(tabindex) lowercase when set via setAttribute as lowercase NA true true true
34 query hasAttribute(tabIndex) uppercase when set via setAttribute as lowercase NA true true false
35 query hasAttribute(tabindex) lowercase when set via setAttribute as uppercase NA true true false
36 query hasAttribute(tabIndex) uppercase when set via setAttribute as uppercase NA true true true
37 query hasAttribute(tabIndex) upper or lowercase from <a> with no explict value set NA false false false

Table Notes:

  1. Setting in markup as uppercase tabIndex does not work in XHTML to allow focus to element.
  2. setAttribute(tabindex) lowercase does not work in IE to allow focus to element.
  3. setAttribute(tabIndex) uppercase does not work in XHTML to allow focus to element.

Next Page »