按鈕及連結 (Button and Link)

  • 新提案
  • →
  • 封閉測試
  • →
  • 公開測試
  • →
  • 已穩定
成熟度說明
  • 新提案：未完成開發、請勿使用。
  • 封閉測試：開發暫時性完成，可使用。可能仍有親和力或其他使用上問題待透過實測發現。
  • 公開測試：開發暫時性完成，歡迎使用。具有完整親和力報告。
  • 已穩定：開發完成、歡迎使用。應無任何親和力或使用上問題。

常見按鈕

HTML 
<div class="gap2 flex flex-wrap">
  <button type="button" class="button button-primary">送出</button>
  <button type="button" class="button button-danger">刪除</button>
  <button type="button" class="button">下一步</button>
</div>

CSS

  • .button：作為全部按鈕的基底。
  • .button-primary：作為主要或正面的動作視覺傳達。
  • .button-danger：作為有破壞性（如刪除資料）或負面的動作視覺傳達。

親和力

按鈕 CSS classes 不能使用在 <a> 上，因為 <button> 和 <a> 各有不同的使用、啟動方式，因此必須在視覺上做明顯的區分以便使用者分辨。

不可用的按鈕

HTML 
<div class="gap2 flex flex-wrap">
  <button type="button" disabled class="button button-primary">送出</button>
  <button type="button" disabled class="button">下一步</button>
</div>

CSS

  • [disabled], .button-disabled：作為不可用的按鈕視覺。

親和力

  • 可用於剛送出的表單按鈕，以用於避免二次送出。
  • 不可用於驗證錯誤的表單按鈕。
  • 不可用於尚未填寫完的表單按鈕。
參考

Usability Pitfalls of Disabled Buttons, and How To Avoid Them

按鈕尺寸

HTML 
<div class="gap2 flex flex-wrap items-end">
  <button type="button" class="button button-large">送出</button>
  <button type="button" class="button">送出</button>
  <button type="button" class="button button-small">送出</button>
  <button type="button" class="button button-mini">送出</button>
</div>

CSS

  • .button-large：大按鈕。
  • .button-small：小按鈕。
  • .button-mini：迷你按鈕。

連結

回首頁
HTML 
<a href="#">回首頁</a>

CSS

  • 無。

親和力

連結與文字必須用非顏色的方式做區分。一般網頁連結皆使用底線作為標注。見 Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision.