<style>
.blue {
color: blue;
}
.red{
color: red;
}
</style>

> [name=講師｜Judy Shyu]

# 🚩鍵盤操作
指引2.1：鍵盤可操作成功準則2.1.1 鍵盤（A級）
## 🔰網頁各項功能、連結、控制元件等，皆可透過鍵盤操作
🔗 [CodePen Bootstrap 表單元件範例](https://codepen.io/judyshyu/pen/OJdNJbZ?editors=1010)

* 任何事件無論是鍵盤還是滑鼠的事件皆可由鍵盤來完成
* 網頁中可互動的元件需要可以用鍵盤 Tab 聚焦（原生無法聚焦的元件如 `<div>` 可加上 `tabindex="0"`）
* `<button>` 和具備 href 屬性的 `<a>` 瀏覽器預設就可以用鍵盤的 Tab 鍵聚焦（focusable），並用 Enter 或 Space 鍵可以觸發 click 事件，若有另外實作 javaScript 時要注意不要重複觸發
* 原生的表單元件（input、textarea、radio、checkbox…等）預設都可以被聚焦，若有使用其他美化套件，需要注意是否仍支援鍵盤操作

:::danger
__➤ 測試方式：__ 鍵盤測試（Tab、方向鍵、Enter、Space、Esc）
:::

> 稽核評量碼
> GN1210101E 確認所有功能都能透過鍵盤介面來操作