ひびのログ

日々ではないけどログを出力していくブログ

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

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

リポジトリ

github.com

  • src/App.vue : 親コンポーネント
  • src/components/MyDialog.vue : ダイアログ本体

サンプル

https://tee-talog.github.io/vue-dialog-focus/

背景

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

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

解説

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

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

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

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

終わりに

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

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

更新履歴

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