關於輸入表單的必填標記

Mon, 14 Jul 2025 13:47:51 +0900

我們整理了關於國外介面（表單）中「必填」標記的相關資訊，並附上 UI 設計指南。

📌 主要的必填標記與最佳實踐

使用星號 (*)
- 最常見且普及的方式，在必填欄位加上「*」。
- 然而， 在表單開頭必須加上「 為必填項目」等說明* (Nielsen Norman Group, California State University, Northridge)。
- 也有使用顏色來強調的例子（如紅字）。
在標籤中明確標示 “Required” 或 “(required)”
- 在標籤內加入文字「Required」，可以讓螢幕閱讀器明確識別，提升無障礙體驗 (Deque)。
結合使用 ARIA 屬性與 HTML5 的 required 屬性
- 除了視覺顯示外，使用 aria-required="true" 或 <input required>，也能在程式層面傳達必填的資訊 (Deque)。
使用 “(optional)” 來明示選填欄位
- 也有不標示必填，而是將選填欄位標示為「(optional)」的方法，這在兩者混合的情況下很有效。
- 不過，Nielsen‑Norman 指出「同時明示必填欄位會更容易判斷」 (TPGi)。

來源	內容
NN/g: Marking Required Fields in Forms	建議結合星號與說明文，僅標示選填欄位被認為是不夠友善的做法 (Nielsen Norman Group)。
Deque (Anatomy of Accessible Forms)	・在標籤內結合使用「Required」字串或圖片。・明確表示僅用顏色提示是不夠的。
W3C Techniques (H90)	有在標籤中包含星號或「(required)」，並在表單開頭定義其含義的範例。
TPGi (Doing what’s required)	考量到無障礙體驗，結合星號＋ARIA 屬性＋標籤文字插入被評為最佳做法。
Contensis 表單 UX 指南	簡潔地整理出：一致的標記（* 或 (optional)）非常重要。

在 表單開頭 加入說明文：

Fields marked with * are required. （或統一使用 “All fields are required”，若有選填則加上 “unless marked optional”）
附加標籤 ：
- 寫作 First Name * 或 Email (required)。

ARIA 屬性・HTML5 屬性 ：

1
2


<label for="email">Email <abbr title="required">*</abbr></label>
<input id="email" required aria-required="true">

NN/g: Marking Required Fields in Forms (California State University, Northridge, Nielsen Norman Group, Deque)
Deque: Anatomy of Accessible Forms (Deque)
W3C Techniques: H90 Indicating required form controls (W3C)
TPGi: Indicating mandatory fields accessibly (TPGi)
Contensis: UX Forms Guidelines (Contensis)

如果需要，我也可以提供具體的 HTML／CSS 程式碼範例，或是 Sketch・Figma 用的 UI 元件設計模板。歡迎隨時提出討論！