いいから黙ってマウス/トラックパッドを窓から投げ捨ててキーボードだけでWebサイトを操作してみろ
⚠注意：本当に窓から投げ捨てないでください
あぶないよ
https://gyazo.com/398440245219e68c0b2b9f7a8fbef129
キーボードでWebを操作する
Google からキーボードのみでゆめみのWebサイトを調べてみる
キーボードで操作できると誰が嬉しい？
1. 高速でPCを操作したい人
キーボードから手を離したくない人
Vimキーバインドとかタイル型WMとかを愛するような人（画像はイメージです）
https://gyazo.com/c621652acfd8a68eb069bc3d7f485b95
いらち
2. マウスカーソルやトラックパッドが使えない人
タイトルを見て捨てちゃった人
一時的にデバイスが壊れてしまった人
手を怪我したりして使えない人
3. スクリーンリーダーを使っている人
視覚障害者
ディスレクシア
4. 画面を拡大して使っている人
視覚障害者（弱視など）
キーボード操作できないあるある
あるある1: インタラクティブな要素を使っていない
code:tsx
<div onClick={() => alert("Hello")}>say hello!</div>
⚠role="button" をつけても挙動には影響しない
インタラクティブな要素
href のある <a>
type="hidden"ではない<input>
<select>
<textarea>
controls を持つ<video>
<details>
<dialog>
あるある2: インタラクティブな要素が隠れている
display: none や visibility: hidden な要素はフォーカスできない
例：独自のチェックボックス
code:tsx
<label>
<input type="checkbox">
<span className="checkbox--checked">☑</span>
<span className="checkbox--unchecked">□</span>
同意する
</label>
ホバーしたときしか表示されないボタン
あるある3: フォーカスインジケータが見えない
？「なんかタップとかしたときに出てくる線があるな 消しちゃえ！」
outline: none
:focus-visibleを使う
独自のアクセシブルなフォーカスリングを作る
例：X
アウトラインを消すリセットCSSに注意！
あるある4: 自前実装のコンポーネントでキーボード操作ができない
ツールチップ
ポップアップメニュー
展開されるタイプのナビゲーションバー
トースト
ドラッグアンドドロップ
いいから黙ってヘッドレスなUIライブラリを使っておけ
Radix UI
Ark UI
React Aria
react-beautiful-dnd
あるある5: フォーカスの順番があちこちに行く
tabindexで制御する
普段からテストでキーボード操作しておく
まとめ
いいから黙ってマウス/トラックパッドを窓から投げ捨ててキーボードだけでWebサイトを操作してみろ
このサイトいいな〜 と思ったらキーボードで操作してみると発見があったりするよ
参考