{"action":"created","issue":{"url":"https://api.github.com/repos/w3c/wcag21/issues/60","repository_url":"https://api.github.com/repos/w3c/wcag21","labels_url":"https://api.github.com/repos/w3c/wcag21/issues/60/labels{/name}","comments_url":"https://api.github.com/repos/w3c/wcag21/issues/60/comments","events_url":"https://api.github.com/repos/w3c/wcag21/issues/60/events","html_url":"https://github.com/w3c/wcag21/issues/60","id":192183642,"number":60,"title":"Target Size","user":{"login":"kwahlbin","id":6561830,"avatar_url":"https://avatars.githubusercontent.com/u/6561830?v=3","gravatar_id":"","url":"https://api.github.com/users/kwahlbin","html_url":"https://github.com/kwahlbin","followers_url":"https://api.github.com/users/kwahlbin/followers","following_url":"https://api.github.com/users/kwahlbin/following{/other_user}","gists_url":"https://api.github.com/users/kwahlbin/gists{/gist_id}","starred_url":"https://api.github.com/users/kwahlbin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kwahlbin/subscriptions","organizations_url":"https://api.github.com/users/kwahlbin/orgs","repos_url":"https://api.github.com/users/kwahlbin/repos","events_url":"https://api.github.com/users/kwahlbin/events{/privacy}","received_events_url":"https://api.github.com/users/kwahlbin/received_events","type":"User","site_admin":false},"labels":[{"id":443163503,"url":"https://api.github.com/repos/w3c/wcag21/labels/MATF","name":"MATF","color":"bfd4f2","default":false},{"id":412540552,"url":"https://api.github.com/repos/w3c/wcag21/labels/Ready%20for%20WG%20Review","name":"Ready for WG Review","color":"128A0C","default":false}],"state":"open","locked":false,"assignee":{"login":"awkawk","id":4228257,"avatar_url":"https://avatars.githubusercontent.com/u/4228257?v=3","gravatar_id":"","url":"https://api.github.com/users/awkawk","html_url":"https://github.com/awkawk","followers_url":"https://api.github.com/users/awkawk/followers","following_url":"https://api.github.com/users/awkawk/following{/other_user}","gists_url":"https://api.github.com/users/awkawk/gists{/gist_id}","starred_url":"https://api.github.com/users/awkawk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/awkawk/subscriptions","organizations_url":"https://api.github.com/users/awkawk/orgs","repos_url":"https://api.github.com/users/awkawk/repos","events_url":"https://api.github.com/users/awkawk/events{/privacy}","received_events_url":"https://api.github.com/users/awkawk/received_events","type":"User","site_admin":false},"assignees":[{"login":"awkawk","id":4228257,"avatar_url":"https://avatars.githubusercontent.com/u/4228257?v=3","gravatar_id":"","url":"https://api.github.com/users/awkawk","html_url":"https://github.com/awkawk","followers_url":"https://api.github.com/users/awkawk/followers","following_url":"https://api.github.com/users/awkawk/following{/other_user}","gists_url":"https://api.github.com/users/awkawk/gists{/gist_id}","starred_url":"https://api.github.com/users/awkawk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/awkawk/subscriptions","organizations_url":"https://api.github.com/users/awkawk/orgs","repos_url":"https://api.github.com/users/awkawk/repos","events_url":"https://api.github.com/users/awkawk/events{/privacy}","received_events_url":"https://api.github.com/users/awkawk/received_events","type":"User","site_admin":false}],"milestone":null,"comments":3,"created_at":"2016-11-29T04:12:19Z","updated_at":"2016-12-26T13:29:19Z","closed_at":null,"body":"# SC Shortname\r\n\r\nTarget Size\r\n\r\n# SC Text\r\n\r\nThe size of the [target](https://w3c.github.io/Mobile-A11y-Extension/#def-target) in relation to the visible display at the default viewport size is at least:\r\n\r\n- 48px by 48px for pointer inputs with coarse pointing accuracy (such as a touchscreen)\r\n\r\n- 24px by 24px for pointer inputs with fine pointing accuracy (such as a mouse, trackpad or stylus)\r\n\r\nwhere px is a CSS pixel when the page is using the device ideal viewport.\r\n\r\nNote: In situations where multiple input mechanisms with both coarse and fine pointing accuracy are present, and where no mechanisms are present to determine the user's current input (either manual - e.g. providing the user with an explicit toggle to switch to a \"touch-optimized\" interface - or automatic - e.g. an application switching dynamically based on the type of input the user is currently using), targets must follow the larger minimum dimensions for coarse pointer inputs.\r\n\r\nEditor's Note: this criterion borrows the distinction of \"coarse\" and \"fine\" pointing devices from [Media Queries Level 4 - Pointing Device Quality: the pointer feature](https://www.w3.org/TR/mediaqueries-4/#descdef-media-pointer).\r\n\r\n# Suggestion for Priority Level (A/AA/AAA)\r\n\r\nLevel A\r\n\r\n# Related Glossary additions or changes\r\n\r\nTarget: Region of the display that will accept a touch action. If a portion of a touch target is overlapped by another touch target such that it cannot receive touch actions, then that portion is not considered a touch target for purposes of touch target measurements.\r\n\r\nCSS Pixel: https://www.w3.org/TR/CSS2/\r\n\r\n# What Principle and Guideline the SC falls within.\r\n\r\nNew Proposed Guideline \"Pointer Accessible\"\r\n\r\nMake it easier for users to operate pointer functionality.\r\n\r\nEditorial Note for WCAG group: Pointer includes \"Touch\" in its definition\r\n\r\n# Description\r\n\r\nThe intent of this success criterion is to help users who may have trouble activating a small target because of hand tremors, limited dexterity or other reasons. If the target is too small, it may be difficult to aim at the target. Mice and similar pointing devices can be hard to use for these users, and a larger target will help them greatly in having positive outcomes on the web page.\r\n\r\nTouch is particularly problematic as it is an input mechanism with coarse precision. Users lack the same level of fine control as on inputs such as a mouse or stylus. A finger is larger than a mouse pointer, and generally obstructs the user's view of the precise location on the screen that is being touched/activated.\r\n\r\nThe issue can be further complicated on for responsive/mobile which need to accommodate different types of fine and coarse inputs (e.g. a site that can be accessed both on a traditional desktop/laptop with a mouse, as well as on a tablet or mobile phone with a touch screen).\r\n\r\nWhile this criterion defines a minimum target size, it is recommended that larger sizes are used to reduce the possibility of unintentional actions. This is particularly relevant if any of the following are true:\r\n\r\n* the control is used frequently;\r\n* the result of the interaction cannot be easily undone;\r\n* the control is positioned where it will be difficult to reach, or is near the edge of the screen;\r\n* the control is part of a sequential task.\r\n\r\n## Examples of Success Criterion\r\n\r\n* Three buttons are on-screen and the visible portion of each button is 48px by 48px\r\n* Button on the screen is defined at 48px by 48px with the viewport width is set to device-width\r\n* Pointer clickable region is 24px by 24px\r\n\r\n## Working Group Notes\r\n\r\nTo be added to understanding/techniques documentation related to this SC.\r\n\r\n\"How can authors determine if they need to follow the guidance for fine or coarse pointer?\"\r\n\r\n* seeing that it's not possible to reliably detect a touchscreen, and - particularly in multi-input scenarios - it's not easy to know for sure even if a touchscreen can be detected whether or not a user will actually use that or some other input device instead: unless you are designing/developing for a closed system where you know for a fact which type of input(s) will be available (e.g. embedded system only to be used for touchscreen-enabled point of sales terminals, or a system for content only to be used on an ATM style device without touchscreen but with physical keyboard-like buttons on the side of the display), developers should assume that at some point or other their content/app will be used on a touchscreen; see also \"when any [...] machine could have a touch interface, [...] proceed as if they all do\" https://medium.com/let-me-repost-that-for-you-zeldman/jason-grigsby-on-design-beyond-touch-e862b699d426#.9go7knctr\r\n\r\n* offer the user a mechanism as part of the app/site UI to switch between \"mouse-friendly\" and \"touch-friendly\" interface. this is the approach that, for instance, Microsoft Office 2013 uses (See slide 137 https://patrickhlauke.github.io/getting-touchy-presentation/#137)\r\n\r\n* use CSS Media Queries Level 4's \"any-pointer\" feature to ascertain if a coarse pointer is present (indicating at least one of the inputs available to the user is coarse, e.g. a touchscreen) https://drafts.csswg.org/mediaqueries-4/ (note my article on using CSS MQ4 detection carefully https://dev.opera.com/articles/media-features/, as well as recent discussion on changing the spec to drop the idea of \"primary\" vs \"rare\" inputs https://github.com/w3c/csswg-drafts/issues/690)\r\n\r\n* use third-party libraries like https://github.com/ten1seven/what-input to detect as soon as a user switches between using a mouse/touchscreen - then it's up to the app/site to decide what to do (immediately switch out the interface to coarse or fine pointer optimized? present the user with a dialog asking if they now want to switch to the type of input that they just used? etc) \r\n\r\n# Benefits\r\n\r\n* Users who use a mobile device where touch screen is the primary mode of interaction\r\n* Users with mobility impairments, such as hand tremors\r\n* Users who find fine motor movements difficult\r\n* Users who access a device using one hand\r\n* Users with large fingers, or who are operating the device with only a part of their finger or knuckle\r\n* Users who have low vision may better see the target\r\n\r\n## Evidence\r\n\r\n* [Apple touch target size recommendations](https://developer.apple.com/ios/human-interface-guidelines/visual-design/layout/) (44 points X 44 points) (note that Apple's \"points\" is a density-independent unit of measure unique to Apple - not related to CSS pt nor real-world physical points as measured in traditional print; 1 point = 1 CSS px - see explanation http://ivomynttinen.com/blog/ios-design-guidelines)\r\n* [Android touch target size recommendations](https://developers.google.com/speed/docs/insights/SizeTapTargetsAppropriately) (48 CSS pixels X 48 CSS pixels) (note that Google generally use \"dp\" - density-independent pixels - as unit of measure https://material.google.com/layout/units-measurements.html#units-measurements-density-independent-pixels-dp - but as noted \"When writing CSS, use px wherever dp [...] is stated.\")\r\n* [Microsoft’s Windows Phone UI Design and Interaction Guide (PDF)](http://go.microsoft.com/?linkid=9713252) suggests a touch target size of 34px with a minimum touch target size of 26px\r\n* [Human Fingertips to Investigate the Mechanics of Tactile Sense (PDF)](http://touchlab.mit.edu/publications/2003_009.pdf) - found that the average width of the index finger is 1.6 to 2 cm (16 – 20 mm) for most adults. This converts to 45 – 57 pixels, which is wider than what most mobile guidelines suggest. A touch target that’s 45 – 57 pixels wide allows the user’s finger to fit snugly inside the target. The edges of the target are visible when the user taps it. This provides them with clear visual feedback that they’re hitting the target accurately. They’re also able to hit and move to their targets faster due to its larger size. This is consistent with [Fitt’s Law](http://en.wikipedia.org/wiki/Fitts_law), which says that the time to reach a target is longer if the target is smaller.\r\n* [One-Handed Thumb Use on Small Touchscreen Devices](http://hcil.cs.umd.edu/trs/2006-11/2006-11.htm) - target sizes should be at least 9.2 mm for single-target tasks and 9.6 mm for multi-target tasks in order to keep the dimensions of the targets as small as possible without decreasing performance and preference\r\n* [Microsoft Guidelines for Building Touch Friendly Sites](http://blogs.msdn.com/b/ie/archive/2012/04/20/guidelines-for-building-touch-friendly-sites.aspx) - a target is at least 11mm (about 40px) square with at least 2mm (about 10px) of padding around (note that if 11mm is roughly equivalent to 40px, then 2mm should actually be roughly equivalent to 7.5px, but rounding up to 10px seems appropriate for simplicity's sake)\r\n* [Microsoft Design Language (PDF)](https://developer.microsoft.com/en-us/windows/design/microsoft-design-language) - minimum touch target size of 44 EP × 44 EP (\"effective pixels\", Microsoft's own density-independent unit of measure - roughly equivalent to 1 CSS px when using ideal viewport)\r\n\r\nBoneyard: [Summary of Research on Touch Target Size](https://www.w3.org/WAI/GL/mobile-a11y-tf/wiki/Summary_of_Research_on_Touch/Pointer_Target_Size)\r\n\r\n# Testability\r\n\r\n1. Locate all touch targets/actionable items and identify if the inputs are defined for course or fine pointing accuracy\r\n2. Review the page is set to the device ideal viewport (e.g. the viewport is set to device-width)\r\n3. Identify what size in pixels the touch target is set to in the CSS\r\n4. Verify the visible target size is at least 48px by 48px for pointer inputs with coarse pointing accuracy or 24px by 24px for pointer inputs with fine pointing accuracy\r\n\r\n# Techniques\r\n\r\n[M030](http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M030) Multiple Elements: When multiple elements perform the same action or go to the same destination (e.g. link icon with link text), these should be contained within the same actionable element. This increases the touch target size for all users and benefits people with dexterity impairments. It also reduces the number of redundant focus targets, which benefits people using screen readers and keyboard/switch control.\r\n\r\n[M002](http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/M002) Touch Target: Ensuring that touch targets are at least 48px by 48px.\r\n\r\nPointer Target: Ensuring that pointer targets are at least 24px by 24px.\r\n\r\n[FM005](http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/FM005) Failure: touch target is less than 48px x 48px at the default viewport size\r\n\r\nPotential technique to ensure inline links provide sufficiently large activation target - http://codepen.io/patrickhlauke/pen/aBNREe (this will still prove problematic for paragraphs with high link density, which - depending on viewport size etc - can result in link activation targets overlapping; authors will need further techniques - some of which may be editorial - to ensure this does not happen)\r\n\r\nFailure: pointer target is less than 24px x 24px at the default viewport size\r\n"},"comment":{"url":"https://api.github.com/repos/w3c/wcag21/issues/comments/269211486","html_url":"https://github.com/w3c/wcag21/issues/60#issuecomment-269211486","issue_url":"https://api.github.com/repos/w3c/wcag21/issues/60","id":269211486,"user":{"login":"goetsu","id":293353,"avatar_url":"https://avatars.githubusercontent.com/u/293353?v=3","gravatar_id":"","url":"https://api.github.com/users/goetsu","html_url":"https://github.com/goetsu","followers_url":"https://api.github.com/users/goetsu/followers","following_url":"https://api.github.com/users/goetsu/following{/other_user}","gists_url":"https://api.github.com/users/goetsu/gists{/gist_id}","starred_url":"https://api.github.com/users/goetsu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/goetsu/subscriptions","organizations_url":"https://api.github.com/users/goetsu/orgs","repos_url":"https://api.github.com/users/goetsu/repos","events_url":"https://api.github.com/users/goetsu/events{/privacy}","received_events_url":"https://api.github.com/users/goetsu/received_events","type":"User","site_admin":false},"created_at":"2016-12-26T13:29:19Z","updated_at":"2016-12-26T13:29:19Z","body":"dots navigation for carousel"}}
{"actor":{"display_login":"goetsu"}}