大型連結樣式

[muan]

GDS 有提供 button-like 連結樣式。實際審查時看來有此元件需求，但應在仍保留能夠和按鈕區別的視覺暗示。

參考 alphagov/govuk_elements#272 。

[JediLin]

提議用中性（？）一點的命名，例如 call-for-action link

[muan]

@JediLin 我和 ARIA 的朋友聊了一下，看了 GDS 的討論，我有點意外沒有人提議直接使用
<form action="url"><button class="button">Start here</button></form>（form default method is GET）。

我看不出來這和 <a href="url" class="button" role="button">Start here</a> 加上 JS space trigger 有什麼差別（而且還不需要 JS）。

我朋友提到或許這會把 AT 放到 "form mode"，我不太知道這可能造成什麼 side effects。你有什麼想法嗎？

荷蘭設計系統朋友也在考慮用 form get 的作法，而非把連結 style 成 buttons。

[JediLin]

form mode 會改變各種按鍵的作用，例如使用 NVDA 把鍵盤焦點移動到 <form> 裡面的時候，按下 Enter 可能「進入 form mode」而不會按下按鈕。

當處於 form mode 時：

• 按 Enter 的作用是 submit form
• 按 Spacebar 的作用是 check/uncheck checkboxs（我簡單測試 NVDA 2023.x 如果此時在 button 上面仍然會按下 button 才對）
• 按上下方向鍵的作用是選擇 radio button（如果沒有 radio button 就不會移動）
• 按 tab 鍵的作用是跳到下一個 form control（不會離開 <form>）

如果使用者對於 form mode 不熟悉，可能會覺得操作沒反應又被困住。我想妳朋友的意思是這樣 ^^;

[muan]

了解。那當然「想出大型連結卻不像 button 的視覺樣式」是最佳解法。

但如果無法，你認為這樣以下兩個處理方式是你的偏好？（可能會需要在元件頁面上解釋這個 necessary evil）

1. <a role=button> with JS space key trigger
2. <form> with GET request

[JediLin]

好難選～

我應該會選 <form>，畢竟按鈕就是按鈕比較舒服（？）

另外，不論是哪一種做法，畢竟都是在做按鈕了，實際身心障礙者使用者對於初次使用網頁的時候可能會以「快速列出本頁中所有連結」的方式操作，在心中建立對整個網頁可以通往哪些地方的概觀，而不會想到還需要「快速列出本頁中所有按鈕」才能涵蓋所有連結，這種操作反而會漏掉這些 call-for-action link，這個缺點也可以解釋在元件頁面上。（把同一個連結目的做成可取得鍵盤輸入焦點的連結跟按鈕，增加 tab 停留位置數量，也有著明顯缺點哪）

[muan]

這種操作反而會漏掉這些 call-for-action link，這個缺點也可以解釋在元件頁面上

但不是兩個做法都會有這個問題嗎？

（把同一個連結目的做成可取得鍵盤輸入焦點的連結跟按鈕，增加 tab 停留位置數量，也有著明顯缺點哪）

我不太懂這個意思？

[muan]

「快速列出本頁中所有連結」

這個我們有確定 <a role=button> 不會出現嗎？我可以測試看看 Safari + VO;

[JediLin]

這種操作反而會漏掉這些 call-for-action link，這個缺點也可以解釋在元件頁面上

但不是兩個做法都會有這個問題嗎？

對，就是妳提到的：

「想出大型連結卻不像 button 的視覺樣式」是最佳解法
但如果無法[...]可能會需要在元件頁面上解釋這個 necessary evil

（把同一個連結目的做成可取得鍵盤輸入焦點的連結跟按鈕，增加 tab 停留位置數量，也有著明顯缺點哪）

我不太懂這個意思？

例如 <form action="url"><button class="button">Start here</button></form>[...]<a href="url" class="sr-only">Start here</a>

[JediLin]

「快速列出本頁中所有連結」

這個我們有確定 <a role=button> 不會出現嗎？我可以測試看看 Safari + VO;

我用 Windows + Firefox + NVDA 測的時候，輔助科技（符合預期地）會根據 role 來判斷，所以 <a role=button> 是 button 而不是 link，「跳至下一個 link」的操作會略過它