伊原: フォーカス移動中のアニメーションっていうのはどういうことでしょう?

村上: シュッと移動するみたいな感じですかね

伊原: あるものにフォーカスが当たり始めていく様子とか、外れていく様子っていうのは、たぶんできると思うんですけど、モノからモノに移動している様子っているのはちょっと僕はやり方知らないですね。それに、その方が便利なのかどうかちょっとわからないという感じですね。

村上: アクセシビリティの視点から見たら、これはあったほうがいいとか、ないほうがいいとかはありますか?

伊原: ないほうがいいと思っています。 最近追加されたアクセシビリティガイドラインの WCAG 2.1 では、アニメーションが激しいと酔ってしまう人がいるので OFF にできるようにしましょうという話があります。アニメーションがもちろん全部ダメなわけじゃなくて、意味のあるアニメーションはむしろユーザーの理解を助けるので必要だと思うんですけど、キーボードフォーカスにおいては要素間を移動していくアニメーションがなくても使えるはずで、むしろそうなっていないサイトの方が多くて、それが移動している様がわかるっていうよりは、順序としてちゃんと意味がわかるフォーカス順になっているのが重要です。そのフォーカス順を、例えば tabindex で制御するのではなくて、ページのコンテンツの情報の順番に沿ってフォーカスが移るように、HTMLもそういう書き方をすると自然にその順でフォーカスが当たるようになるので、それがより重要かなと考えています。

村上: ありがとうございます。


補足

フォーカスが移動していく様子も実装はできるようです。

https://twitter.com/_yuheiy/status/1120492597263384577