在輪播的第 1001 次實作中，我想“正確”處理焦點。青色箭頭按鈕很好。他們有角色=“按鈕”。
一些與此組件的 UI/UX 相關的快速問題：
- 如果使用 TAB 鍵，箭頭和頁面導航可以接受焦點。單擊事件后，我應該將焦點放在箭頭按鈕上嗎？是否可以通過呼叫
element.focus()方法來實作——比如純 HTML/CSS 解決方案？ - 頁面導航區域應該處理箭頭鍵輸入 - 同樣的問題：一旦按下頁面導航按鈕（微小的灰色矩形），我應該保持焦點嗎？它可行
element.focus()嗎？這個組件的 ARIA 角色應該是什么？ - 該設計需要 4px 高度的導航按鈕 - 在移動設備上真的很難點擊。為了使它們可用，添加了一個 div 作為導航按鈕（粉紅色區域）的子項。有沒有更好的方法來擴展“熱區”？
- 我如何排除紅色 div 以便焦點矩形如圖所示（一個骯臟的解決方案是將輪廓：無添加到父組件并使用
:focus選擇器）
uj5u.com熱心網友回復：
關于焦點，你問是否可以將焦點保持在按鈕上而不使用focus(). 絕對地。事實上，當你點擊一個按鈕時，焦點不會移動，除非你特意移動它或者你點擊的元素被隱藏了。因此，如果您希望將焦點放在按鈕上，那么您無需執行任何操作。
這是首選行為 - 將焦點放在按鈕上。如果我正在瀏覽輪播幻燈片并且我是鍵盤用戶，我將導航/標簽到“下一步”按鈕并按enter。我將查看幻燈片，如果它不是我想要的，我將enter再次按下（假設我的注意力仍停留在“下一個”按鈕上）以查看下一張幻燈片。如果您強制焦點從按鈕移到輪播內容，那么我必須導航回“下一個”按鈕才能查看下一張幻燈片。不得不繼續導航回我剛剛選擇的元素可能會很煩人。
我不明白你的第三或第四個問題。
您是否看過有關輪播的兩個 W3.org 參考資料？
- https://www.w3.org/TR/wai-aria-practices/#carousel
- https://www.w3.org/WAI/tutorials/carousels/
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/333494.html
標籤：javascript html 反应 用户体验 怀阿利亚