跳到主要內容
  • 字級
:::|

TS3觸控目標尺寸

規則識別碼

TS3

規則名稱

觸控目標尺寸

規則類型

原子規則

規則說明

觸控目標尺寸至少 48dp*48dp(9mm*9mm)

無障礙要求對應

網站無障礙規範

  • 2.5.5目標尺寸(檢測等級AAA)
    • 必須符合 WCAG 2.0和WCAG 2.1 A級或更高級別
    • 結果對應:
      • 任何失敗結果:不符合
      • 所有成功結果:需進一步測試
      • 未適用結果:需進一步測試

適用性

適用於螢幕觸控、觸發內容。

期望

以下檢查正確:

  • 所有觸控目標可以順利以手指觸發動作/事件,不會誤觸。

假設條件

此規則目前無已知的假設條件。

無障礙支援

此規則沒有已知的主要無障礙功能支援問題。

測試案例:

作業系統

iOS

Android

HTML

範例說明

確保所有具動作的控件具有至少44 x 44pt或同等像素的觸控目標尺寸。此外,確保目標之間至少1像素。

確保所有具動作的控件具有至少48 x 48dp的觸控目標尺寸,且控件之間的間距至少8dp或以上。此外,確保目標之間至少1像素。

使用setPadding在文字周圍使用空格。

使用LayoutParams物件的layout_width和layout_height屬性提供適當的寬度和高度。

在鏈結周圍提供間距,以確保所有可操作的控件之間的距離至少為7mm。使用較大的控件,即9mm,或增加內容周圍的間距以確保較大的觸摸區域。

使用如清單元素提供頁面內容的結構如導覽,並使用CSS為每個觸控目標添加padding與margins距離。

成功範例原始碼

[myButton setFrame:CGRectMake(50, 50, 10, 10)];

<ImageView    android:layout_width="50dp"    android:layout_height="50dp"    android:layout_margin="1"    android:paddingLeft="10dp"    android:paddingRight="10dp"    android:paddingTop="10dp"    android:paddingBottom="10dp"

  </ImageView>

 

//setPadding方法

setPadding(10,10,10,10)

 

<style>

  button {

    box-sizing: border-box;

    min-width: 44pt;

    min-height: 44pt;

  }

 </style>

  …

  <button>Tap me!</button>

失敗範例原始碼

-

<ImageView android:id="@+id/addBookmark" android:layout_width="25dp" android:layout_height="25dp"/>

// or

Int dimensionInPixels=25 * context.getResources().getDisplayMetrics().density

LinearLayout.LayoutParams layoutParams=new LinearLayout.LayoutParams (dimensionInPixels, dimensionInPixels);

addBookmarkImageView.setLayoutParams(layoutParams);

<a href="/">Home</a> | <a href="/news">News</a> | <a href="/sport">Sport</a>

測試程序

  1. 使用觸控螢幕瀏覽該應用程式。
  2. 識別所有觸控目標。
  3. 驗證觸控目標尺寸是否至少 48dp*48dp(9mm*9mm),可以順利以手指觸發動作/事件,不會誤觸。

參考詞彙:無

變更記錄:20200817-第1次編撰。

參考資源:
Touch target size, 2019 BBC行動裝置無障礙指南(MOBILE ACCESSIBILITY GUIDELINES)。