Category Archives: Mobile

Usable landmarks across desktop and mobile

A lot has been written about how to technically implement WAI ARIA Landmarks but from a human perspective just how usable are they for screen reader users?

Landmarks are a way of providing semantic markup to areas of a page that otherwise are not signposted for screen reader users. By carving up your page into areas marked up as application, banner, complementary, contentinfo, form, main, navigation and search you provide an outline that screen reader users can navigate using a keyboard shortcut. Done well this means users can navigate between content areas such as the main content, navigation and footer, in a similar way that sighted user rely on layout to inform the eye.

While the use of Landmarks becomes the norm I’m not convinced that we are really thinking about the user when we add them. Here are few thoughts based on some of the implementations I’ve seen on the web recently.

Continue Reading Usable landmarks across desktop and mobile

Accessible Firefox and Chrome on Android and iOS

Good news for mobile voice output users as this week the guys over at Mozilla released further accessibility enhancements for Firefox in a nightly build. In addition to this Chrome was released into the Apple App store and also comes with accessibility baked in complementing it’s counterpart on Android which also recently became more accessible.Continue Reading Accessible Firefox and Chrome on Android and iOS

Mobile Monday – Inclusive and Accessible Design

I was honoured to be invited to keynote at Mobile Monday London on inclusive and accessible design. It’s a topic that needs more air time within the mobile community so it was great to share a few thoughts and pieces of research.

I was sad not to be there in person and have to give a huge thanks Kath Moonan and Nisha Valand who moved heaven and earth so I could Skype in last minute as my daughter was poorly. Thanks also to Mobile Monday, Vodafone, Jo Rabin and everyone who attended and put up with a small interruption from my daughter…

Below is a copy of my slides, and if you’re looking for something more meaty check out my Mobile Accessibility slides presented from CSUN 2012. Any questions please get in touch (henny at iheni dot com).

 

Links

Mobile accessibility tip: don’t suppress pinch zoom

Update: this is not an issue as of iOS6.

A key feature of mobile browsing is being able to zoom in to read content and out to locate content within a page. It’s an invaluable tool however I keep stumbling across sites that suppress zoom and with it one of the main things that make mobile browsing viable for everybody.

Zoom can be repressed by doing the following:

<meta content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;” name=”viewport”>

and

<meta name=”viewport” content=”user-scalable=no” />

It’s the initial-scale=1.0 and maximum-scale=1.0 which effectively disables zoom in the first example and content=”user-scalable=no” in the second. On mobile you want to give the user as much control over screen size as you can so instead do something like this:

<meta content=”width=device-width; initial-scale=1.0; maximum-scale=2.0; user-scalable=1;” name=”viewport”>

and

<meta name=”viewport” content=”user-scalable=YES” />

Done this way everyone gets to read your content.

iOS Bug (updated 30 July, 2012)

As you will see from the comments below there is an iOS bug that prevents elegant scaling when in landscape mode. Details can be found in an iOS bug report and test page. Here are also a couple of articles that go into more detail about it:

Skip links on mobile and tablets

Skips links are mainly useful for sighted keyboard only users on desktop and some screen reader users. While they’re a recommendation rather than a requirement of WCAG 2.0 it’s a feature that many websites built with accessibility choose to include.

BBC has three skip links that become visible onFocus

The value of skip links is debatable for screen reader users who have the ability to navigate content using headings, WAI ARIA Landmarks, forms, lists and links with relative ease. However they are used by some screen reader users and helpful if not familiar with the keyboard shortcuts on offer in screen reader software.

So while I’m not a huge fan of skip links there is a place for them on desktop, but is there a place for them on mobile?

Continue Reading Skip links on mobile and tablets

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.

Continue Reading Content order on touch screens