M002 - Providing adequate touch target size / Ensuring that touch targets are large enough to touch accurately without magnification

M2

Jump to: navigation, search

Providing adequate touch target size / Ensuring that touch targets are large enough to touch accurately without magnification

This is a template for writing mobile techniques. Be sure to login, select Edit tab, then copy the code on this page to a new page, using the Assignments list for the page name. Select the Edit tab on the new page and paste the code from this page. Delete any highlighted instructions (including this paragraph), and fill in any information in braces { } -- removing the braces themselves.

Contents

Technique Category

Category:Mobile Techniques

Technique Status Category

Category:Techniques Proposed

Status

Include links to discussions, previous drafts, surveys, meeting minutes, or production status as appropriate. Add status updates to the bullet list to help with an at-a-glance audit trail.
  • New advisory technique written by Alan Smith
  • @@ Link to survey when surveyed by group

Applicability

This technique is to be used when developing touchable targets on mobile devices for icons, links and buttons upon touch.

Text content such as but not limited to (dates, time, statuses, etc.) will receive focus when screen readers are turned on and do require a touch target but are not included in this technique.

WCAG references

Include a list of success criteria, conformance requirements or guidelines to which this technique relates. For each one, provide:
  • the anchor for that item. Copy the anchor from the success criterion URI address;
  • the number of the item;
  • the short name for the item;
  • whether the technique is sufficient, advisory, or a failure of the item.
It is not necessary to provide a live link to the guidelines, but if you do, double-check that the link points to the correct place. It is also not necessary to provide redundant links to the Understanding and How to Meet documents; those are done automatically by the generator later in the process. The suggested format for these references is in the sample item below.

User Agent and Assistive Technology Support Notes

The problem with sizes set by many of the vendor guidelines is that the guidelines are overlooked when it comes to text content that is read by touch with screen readers turned on. One such example is the information strip at the top of the iPhone where we see Signal strength, Carrier name, Time, Percent loaded, Battery left and other items has a very small vertical height. With VoiceOver on these are not buttons but text that gets focus when touched and read to the user. Another example is on an 8 inch Windows 8 tablet when the user goes to the historic Windows screen. All of the app status icons (battery, wireless network, signal strength, speaker status, etc.) on the left side in the Taskbar are well under the Windows recommended size and are very hard to touch correctly without a stylus or mouse.

Description

The objective of this advisory technique is to define an adequate touch target size for mobile device UI components - ensuring that touch targets are large enough to touch accurately without magnification.

This technique applies to icons, links and buttons used for navigation and activating functions.

The minimum recommend touch target size is 9mm high by 9 mm wide and is not dependent on the screen size, device or resolution and not requiring screen magnification to obtain that size.

Examples

Examples of this technique include but are not limited to:

  • Top navigation buttons as seen on iOS devices.
  • Icons along the bottom of the screen as seen on Windows 8 native app.
  • Command links as seed on the bottom of Android devices.


This technique is discussed in the design documents listed below from various vendors of mobile devices.

  • iOS Human Interface Guidelines: Adaptivity and Layout recommends minimum target sizes of 44 pixels wide 44 pixels tall.
  • Interactions and usability with Windows Phone: Touch Targets has recommendations for a touch target size of 34px with a minimum touch target size of 26px.
  • Android Developers: Metrics and Grids recommends targets be at least 48dp high and wide so that they will never be smaller than a minimum recommended target size of 7mm.

Resources

Provide a list of links to external resources, if any.

Related Techniques

Tests

Testing is done by measuring the touch target size on the device when focus borders are displayed.

Procedure

  1. step 1 - Turn on native device screen reader or a 3rd party screen reader if applicable.
  2. step 2 - Confirm focus borders are being displayed
  3. step 3 - Validate that the touchable target as shown by the focus border is a minimum of 9mm high and 9 mm wide.

Expected Results

  • #3 is true

Test Files

Provide test files here. Currently, techniques do not reference test files, but we may do something with them in the future. Note that working examples (including source code) do not go here, they should be referenced in the examples section.