Touch Computing: Yet Another Case for Accessible Website Design
As I mentioned in last month's article about voice computing, I've been using a Windows tablet as my primary computer for the last six months. I've spent a lot of time recently browsing the web using a combination of touch, voice and handwriting. This month I'd like to focus on the accessibility issues surrounding touch interfaces.
When browsing the web using only the tablet's touch features, I'm frequently reminded of the importance of using good, accessible web design techniques. Although these usability recommendations have been in place for years, they've traditionally been most important for visitors with disabilities, who might be limited in how they can interact with websites.
Touch is positioned to become the primary method that most consumers will interact with your website within two or three years. This is not only based on the success of iOS and Android smartphones and tablets, but also the fact that next year's Windows 8 will be a "touch first" operating system. Windows accounts for 86% of web traffic, and the next version is prioritizing touch. Companies who ignored accessibility when it only affected disabled visitors, will find themselves with websites that aren't convenient for anyone if they're not careful.
Here are some of the major things that I've noticed, and how you can prepare your website for the coming "touch" revolution.
1. Don't use small links that require fine-grain accuracy to click.
This was always an accessibility recommendation to accommodate those with imprecise motor control. Now, we all understand what it's like, since tapping tiny links with our clumsy, meaty fingers can become very frustrating. Use big, easy to tap navigation and your users will thank you.
2. Consider both screen orientations: landscape and portrait.
One of the biggest changes that came with using my tablet for web browsing is that I frequently use it in "portrait" mode. While I wouldn't suggest actually targeting the portrait orientation for your primary website design, it's important to consider it when choosing column widths and content placement. You don't want users to have to keep zooming in and out, or scroll left and right to browse your content.
3. Don't require mouse rollovers for important content.
Rollovers are difficult, sometimes impossible, to trigger using touch alone. On my tablet, for instance, I have to use a stylus if I want to "hover" over something. If I didn't have that, I'd be unable to hover at all. This is a common theme in accessibility; you should always have backups for content or drop-down menus that appear when you hover your mouse.
4. Be careful with plugins and special interaction features.
It almost goes without saying at this point that plugins, like Flash, Java and Acrobat, should be used sparingly, and preferably not at all if you're targeting touch-based devices. However, even standard HTML, CSS and JavaScript features need to be used carefully. For instance, drag-and-drop is supported by HTML5, but can be challenging on a touch screen device if you aren't careful.
If you read last month's article about voice-based browsing, you'll recognize some of the items above. In many ways, the rules of accessibility haven't changed; it's just that there are more people affected by them because of these new interfaces. By designing your website so it meets the needs of the next generation of user interfaces, you'll also be improving the accessibility of your site for those with special needs today.
To get our latest articles when they are posted, please subscribe by e-mail or RSS.
