´óÏó´«Ã½

Anyone can find it challenging to interact with small controls that are closely grouped together, in particular users with motor or vision impairment.

Actionable elements should not touch or overlap, and there should be an inactive space between actionable elements in order to reduce the risk of activating the wrong control. The minimum space possible to set on any device or screen resolution is 1 pixel, preferably the space would be larger.

---

iOS

When placing targets/actionable items ensure there is at least one (1) pixel between targets and that the edges of targets do not touch unless the space is non-actionable.

iOS Example (Objective-C)

[myFirstButton setFrame:CGRectMake(50, 50, 50, 50)];
[mySecondButton setFrame:CGRectMake(101,50,50,50)];

---

Android

Use the layout_margin attribute or set the margin programmatically using the setMargins method.

Android Pass Example

Android examples

<ImageButton android:id="@+id/addBookmarkBtn" android:layout_margin="1"
 android:layout_height="wrap_content"
 android:layout_width="wrap_content"
 android:src="@drawable/addBMK" />

or

LinearLayout layout = new LinearLayout(...);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(...);
params.setMargins(1, 1, 1, 1);
ImageButton addBookmarkBtn = new ImageButton(...);
layout.addView(addBookmarkBtn, params);

---

HTML

Use CSS to provide adequate padding around actionable controls. Make sure that the touch target size is at least 44 x 44pt for iOS, and 48 x 48dp for Android. You can convert points to pixels, and use those values if they are more appropriate, for example in CSS.

HTML Pass Example

Add borders or margins around touch targets to add at least 1px of inactive space.

<style>
    .main-nav {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .main-nav li {
        float: left;
    }
    .main-nav a {
        display: block;
        margin: 0 0.2em;
        padding: 0.5em 1em;
        border: 1px solid #333;
    }
</style>
 
<ul class="main-nav">
    <li><a href="/">Home</a></li>
    <li><a href="/news">News</a></li>
    <li><a href="/sport">Sport</a></li>
</ul>

OR

 <style>
   button {
    box-sizing: border-box;
    min-width: 44pt;
    min-height: 44pt;
   }
  </style>
  …
  <button>Tap me!</button>

---

Testing

Procedures

Because 1 pixel of space is very small it may be difficult to verify this item visually unless there is a visual separator between the two targets. In the case of no visual separation such as when a consistent background image is used around toolbar icons the code or .nib/.xib file may need to be inspected.

1. Activate the app.
2. Locate all touch targets/actionable items.
3. Verify that there appears to be inactive space between every touch target/actionable item.

Outcome

The following checks are all true:

• All touch targets/actionable items have inactive space between them.

---