Vue.js でアクセシビリティを考慮したダイアログのフォーカス移動を考えてみた

UI フレームワーク等ではすでに対応しているかもしれませんが、自分でも作ってみました。

リポジトリ

Vue でダイアログ出すときのフォーカス管理ってどうやるのがベストなんだろう
— たろぐ (@tee_talog) April 26, 2019

仕事で Vue のダイアログを触っていたのですが、アクセシビリティを良くするためにフォーカスを移動させようとしたときにハマってしまいました。

そこで、どうしたらいい感じにフォーカス移動ができるか考えてみました。

ダイアログを表示するタイミング（ダイアログの mounted）で、今（ダイアログを開く前）フォーカスしている Element を取得し、キャッシュしておきます。

そしてダイアログにフォーカスを当てます。これは、tabindex="-1" を指定しているダイアログ要素全体に当てます。このようにするとダイアログの内容がスクリーンリーダーに読まれるので楽です。

ボタンや背景要素が押されたら、キャッシュしておいた、ダイアログを開く前にフォーカスしている Element」を引数に emit してあげます。 emit を受け取ったほう（App.vue）は、ダイアログを閉じつつ引数の Element に対してフォーカスを当ててあげます。

残りの処理は Ajax でも Vuex でもお好きにどうぞ。

最近アクセシビリティに興味があるので、たまたま引っかかったダイアログを実装してみました。

今後もアクセシビリティを考慮した実装を心がけていきたいと思います！

2019/05/12：改題、サンプルへの URL 追加