Re: notes on 320 CSS Pixels to inches

> and 40 CSS pixels would be  10mm or 1 CM
>
​ ​
that would be a HUGE button on a phone

*Android:*
​"​
The average adult finger pad size is about 10mm wide (a bit less than half
an inch), and the Android UI guidelines recommend a minimum tap target size
of roughly
​ ​
*7mm*, or 48 CSS pixels on a site with a properly-set mobile viewport.
​"​

​(source:
https://developers.google.com/speed/docs/insights/SizeTapTargetsAppropriately
)


*iPhone:*

"Provide ample touch targets for interactive elements. Try to maintain a
minimum tappable area of 44pt x 44pt for all controls." (source:
https://developer.apple.com/ios/human-interface-guidelines/visual-design/adaptivity-and-layout/
)


*Windows Phone:*

"To build Windows 8’s touch-first experience, we’ve done a ton of research
to formulate some helpful guidelines <http://bit.ly/win8touchguidance> for
developers. The average width of a finger is 11mm. As targets for tapping
get larger, the percentage of accidental missed taps drops off quickly.

Ideally, a target is *at least* 11mm (about 40px) square with at least 2mm
(about 10px) of padding around it.​"
(source: ​ <goog_250446307>
https://blogs.msdn.microsoft.com/ie/2012/04/20/guidelines-for-building-touch-friendly-sites/
​)​


S
​
ee also:
http://rawgit.com/w3c/wcag21/master/understanding/21/target-size.html​


"A low-vision user who has difficulty reading small print might zoom in the
page, *perhaps as much as 400%*. Because the site is designed responsively,
the UI will rearrange itself for the "smaller viewport" (actually for the
larger page), which is great for desktop users who require screen
magnification and for mobile screen reader users as well. *It's a win-win.*
 "
(source:
https://developers.google.com/web/fundamentals/accessibility/accessible-styles#multi-device_responsive_design
)

​
JF​




On Thu, Jan 18, 2018 at 4:16 AM, Alastair Campbell <acampbell@nomensa.com>
wrote:

> Hi Gregg,
>
>
>
> I’m not sure what you’re expecting there, the size of the CSS pixel will
> vary depending on the device.
>
>
>
> See: https://alastairc.ac/2013/02/how-to-hold-your-ipad/
>
>
>
> I.e. they get larger the further away you’re intended to view them from.
>
>
>
> -Alastair
>
>
>
> *From:* Gregg Vanderheiden GPII [mailto:gregg@raisingthefloor.org]
> *Sent:* 18 January 2018 05:12
> *To:* w3c-waI-gl@w3. org <w3c-wai-gl@w3.org>
> *Subject:* notes on 320 CSS Pixels to inches
>
>
>
> *Can someone check the thinking - calculations here? *
>
> *thx*
>
> *Gregg*
>
>
>
>
>
> *RE 320 pixels*
>
> A CSS pixel is .26 mm
>
>  x 320 CSS pixels = 83.2 mm  = 8.32 CM = 3.275591 inch
>
>
>
>
>
>
>
> *RE 40 CSS Pixels *
>
>
>
> and 40 CSS pixels would be  10mm or 1 CM
>
>
>
> that would be a HUGE button on a phone
>
>
>
> and it would be hard to put many of those on a screen -  or much content
> on the screen with many links / buttons
>
>
>
>
>
>
>
>
>
>
>



-- 
John Foliot
Principal Accessibility Strategist
Deque Systems Inc.
john.foliot@deque.com

Advancing the mission of digital accessibility and inclusion