In 1996 there were over 40 sets of web accessibility guidelines that we attempted to coalesce into a single document
. One of the sets focused on increasing the size of active elements to make easier targets for people with dexterity issues. 10 years later, iPhone users want larger targets – finally a use case that sells. I hope all those folks looking for larger targets will learn how to apply iphone styles to their web experience.
Now, look at your web page. How many pixels are between the items on your navbar? If you answer less than 40, then you’re effectively asking your visitor to play Russian roulette: their 40-80 pixel finger isn’t going to hit your 20 pixel link effectively.
When you use iPhone specific styles, it improves accessibility for someone working on a high-density mobile device. My rule of thumb is to double important elements: bumping a font-size from 18px to 36px, for example. You’ll want to focus both on interactive elements (such as
<input>) and navigational indicators (such as section titles and bread crumb trails).
The iPhone makes prominent a little-discussed web development concept: the viewport. To deal with the problem of fitting a relatively large web page onto a small phone display, the iPhone’s developers use a viewport to select the part of the page you are viewing.
Are you concerned about search engine optimization? If you make excellent use of CSS but your HTML lacks good structure, consider this quote from a 21 March 2007 PC Magazine article, “Remember that search engines read the HTML source code, so optimize your code so that it’s easy for bots to find keywords in the text.”
If you add structural elements, such as headings and paragraphs, search engine bots as well as people who use screen readers will be able to make better sense of the structure of your page. Understanding the structure means understanding the relationships between elements. For a search engine, this will highlight the important terms on your page. For a person using a screen reader, it will allow them to quickly navigate through the content of the page.