Content order on touch screens

There seems to be an assumption that content order is not relevant for touch screens because you can tap and find what you’re looking for. In other words you’re not forced to browse in a linear way as you are with a keyboard on desktop or a keypad device with no directional controller. This is simply not true, the order in which content is coded is as important for touch devices as it is keypad devices and desktop.

Here’s why.

Imagine you’re browsing a webpage on an iOS device with Voiceover on. As a blind user, opening a new page, the first thing you’re likely to do is call up the Web Rotor, select how you wish to browse, for example by ‘Headings’, then navigate between headings by swiping up and down.

The Web Rotor allows you to choose what elements you want to navigate by such as headings

Once you’ve found the heading you want you naturally want to start reading what follows it. To do this you swipe to the right to read the next item, left to read the previous item. It’s highly unlikely that you’ll open a page and randomly tap around it until you find the specific thing you want unless you’re familiar with the page or are browsing with no particular task in mind.

This is exactly how it works with desktop screen readers: you navigate headings (or lists, landmarks, forms etc.) using the heading keyboard shortcut then arrow up or down to read the next or previous item. This is why the code order of content is just as important as the tab order of focusable elements. Two subtly different things.

Controlling code order in HTML is relatively straight forward. In iOS apps I believe you can do this through containers and views but I’ve not found much documentation about this. Android works out what the nearest focusable element is and sets the focus order from there. If this isn’t the desired order then you can code an explicit order using android:nextFocusDown, android:nextFocusLeft, android:nextFocusRight or android:nextFocusUp.
It’s relatively easy to test on both Android and iOS. If on iOS it’s always worth switching the screen off while you have Voiceover running (tripple tap to switch off then repeat to switch on again) so you’re eyes don’t distract you.

To get an idea of how a blind user might browse the web with an iPhone read Hugh Huddy’s blog post about his first impressions of iOS having used a Nokia for years. Kevin Chao also offers insight from his perspective as a seasoned iOS user.

5 thoughts on “Content order on touch screens

  1. Pingback: BDConf April 2012 | Martin

  2. Content reading order has been a pressing issue for iOS accessibility. I have tried using the UIAccessibilityContainer but haven’t achieved much success out here. But thanks for blogging about this issue as will get some brains thinking on this.

    Henny Reply:

    I’ve had the same experience Pooja. Usually content order naturally sorts itself out quite well on iOS but when things go wrong it’s tricky to know what really works to put it right.

    I’m head down on a web project at the moment but hope to shift back onto iOS apps soon. Will share any findings.

  3. Pingback: Bruce Lawson’s personal site  : Reading List

  4. Pingback: Mobile Monday – Inclusive and Accessible Design | » Henny Swan's blog

Comments are closed.