アクセシブルなファイル選択（input[type="file"]）の作り方

ローカルファイルの読み込みのためにもちいる<input type="file">をアクセシブルに実装する。

よくある良くない例

<label>
  ファイル選択
  <input type="file">
</label>

input[type="file"] {
  display: none;
}

<label>はクリッカブルな要素ではないためキーボード操作ができない
同様にtabによるカーソルの移動ができない
<input>をdisplay:noneするとアクセシビリティツリーから削除されるため<input type="file">があることを認識できない

<button type="button">
  ファイル選択
  <input type="file">
</button>

input[type="file"] {
  display: none;
}

button.addEventListener('click', () => input.click())

ボタンは<button>としてマークアップすることでブラウザ標準の挙動を踏襲できる
- <label role="button">だと作り込みが発生する
labelをbuttonに変えたのでinput[type="file"]はdisplay:noneにしても問題なくなった
inputの操作はbutton経由で行う