アクセシブルなファイル選択（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経由で行う

参考

• ウェブアプリケーションからのファイルの使用 - Web API | MDN