# `<a>` 元件當 `<button>` 元件使用

某些情況下，`<a>` 元件被當成像 `<button>` 元件的控制按鈕，而非預設的連結功能。此時 `href` 屬性的存在與否會影響滑鼠與鍵盤事件的回應動作。

以下範例以簡單的 jQ .slideToggle() 測試不同情況的<a>對滑鼠與鍵盤事件的回應。

---
## 範例
[以 jQ 的 .slideToggle() 作為測試](https://codepen.io/yachiung/pen/wvOXQQP)

## 說明
範例中各元件互動回應說明，以 `<button>` 元件的 click function 作為參照標準
### `<button>` 元件：

使用`<button>` 作為控制元件，程式只需 click function ，`<button>` 元件可以用 **tab** 鍵取得焦點，按下 **Enter** 或 **space** 鍵，會執行 click function。

    【控制按鈕】.on("click", function() {
      【作用對象】.slideToggle();
    });

### `<a>`元件：
1. `href="javascript`:;" 或 `href="javascript:void(0)"`
1. 行為模式與 `<button>` 元件相似，取得焦點後按 **Enter** 鍵可執行 click function。
1. 但是按 **space** 鍵無效。
1. `href="#"`、`href=""`（空值）或 `href` 沒有值：
1. 此時 `<a>` 仍是連結，滑鼠click 或取得焦點時按 **Enter** 除了會執行 function 所指定的動作，還會執行預設的連結動作。因為沒有給連結的 url，會跳到頁面的最上方。
1. 於程式中加 `event.preventDefault();` 讓 `<a>`不執行預設的動作，則行為模式與 `href="javascript:;"` 相同。
1. `<a>` 沒有 `href`，或使用其他通用元件，例如 `<span>`：
1. 此時 `<a>` 不被當成連結元件，不會執行預設的連結動作。
1. 滑鼠點擊時可執行 click function ，但 **tab** 鍵選不到，無法取得焦點。
1. css 中設定的 `:focus` 也不會有效果。
1. 加上 `tabindex="0"` 可以讓 `<span>` 或沒有 `href` 的 `<a>` 可以取得焦點，但是按 **Enter** 鍵仍然不會執行 click function。
1. 要補鍵盤事件（例如 on keydown）function 才能讓 `<span>` 或沒有 `href` 的 `<a>` 按 **Enter** 鍵時執行 keydown function。

---

## 總結
1. 使用`<button>`元件 或有 `href` 的 `<a>` 元件，click function 就可以。
1. `<a>` 元件沒有 `href`，或不是 `<a>` 元件：① 加 `tabindex="0"` 以獲得鍵盤焦點；② 程式需要補 keydown function 。
1. 如果 click function 和 keydown function 都存在，`<button>` 和有 `href` 的 `<a>` 按 **Enter** 鍵會執行兩次 function。
1. 非 `<button>` 元件當成 `button` 用，應加上 `role="button"`。
1. 除非是舊案，無法更改 html，使用`<button>`元件是最省時省力，且最正確的語法。

---

## 補充一些[WCAG](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG)的規範

* 可點擊的的元件必須是可取得焦點，並且有互動語法
Clickable elements must be focusable and should have interactive semantics
* tabindex 的值應避免大於零
Avoid using tabindex attribute greater than zero
* 互動元件必須可以使用鍵盤觸發
Interactive elements must be able to be activated using a keyboard
* 互動元件必須是可取得焦點
Interactive elements must be focusable
* 可取得焦點的元件必須有取得焦點後的樣式
Focusable element must have focus styling

參考文件：[ WCAG ( W3C Web Content Accessibility Guidelines ) overview](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Keyboard)