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

FM5表單佈局

規則識別碼

FM5

規則名稱

表單佈局

規則類型

原子規則

規則說明

標籤必須放置在靠近相關表單控件的位置,並適當佈置。

無障礙要求對應

網站無障礙規範

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

適用性

適用於表單內容。

期望

以下檢查均正確:

  • 螢幕上的控件是具有意義名稱的可見標籤,當移除上下文內容時,可描述控件的目的。
  • 標籤必須靠近欄位。
  • 必須將標籤放置在螢幕佈局的有效位置:
    -在直向畫面中置於欄位的上方
    -在橫向畫面中置於欄位的左側

假設條件

當前沒有任何假設。

無障礙支援

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

測試案例:

作業系統

iOS

Android

HTML

範例說明

在適當地方使用textAlignment屬性,確保標籤視覺上靠近關聯的表單欄位,避免大量的空白。除了單選按鈕與核取方塊,確保標籤在直式螢幕放置於表單欄位上方,橫式螢幕放置於表單欄位上方或左側。在直式與橫式螢幕,都將核取方塊與單選按鈕的標籤放在欄位的右側。

在適當地方使用android:textAlignment 或android:gravity類別,確保標籤視覺上靠近關聯的表單欄位,避免大量的空白。除了單選按鈕與核取方塊,確保標籤在直式螢幕放置於表單欄位上方,橫式螢幕放置於表單欄位上方或左側。在直式與橫式螢幕,都將核取方塊與單選按鈕的標籤放在欄位的右側。

確保標籤視覺上靠近關聯的表單欄位,避免大量的空白。除了單選按鈕與核取方塊,確保標籤在直式螢幕放置於表單欄位上方,橫式螢幕放置於表單欄位上方或左側。在直式與橫式螢幕,都將核取方塊與單選按鈕的標籤放在欄位的右側。

使用CSS表單布局,不要使用HTML表格作為目局目的。使用CSS media queries基於裝置螢幕大小重新定位內容。

測試程序

  1. 啟動應用程式並啟用放大到兩倍的縮放比例。
  2. 關注每個表單欄位。
  3. 驗證控件是否有視覺標記。
  4. 驗證標籤是否與控件緊鄰。
  5. 驗證標籤放置於畫面佈局(直向或橫向)最有效位置。

參考詞彙:無

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

參考資源:

  1. Form layout, 2019/2017 BBC行動裝置無障礙指南(MOBILE ACCESSIBILITY GUIDELINES)。