伊原: 基本的にはブラウザ標準をおすすめします。 何故かと言うと、他のサイトでも同じように出るから。フォーカスリングというのは、マウスカーソルがどこに行っても同じなのと一緒だと思うんです。それってレイヤーとしては OS のものというか、ブラウザのものだと思うんです。 どこに行っても同じように選択してるってことがわかってほしいと思うので、基本的には同じ方がいいと私は思っています。

ただ例外があって、そのフォーカスリング自体はやっぱりわかりにくくなるところにフォーカスされる要素がある場合があるんですよね。例えば青い枠がつくわけですけど、それと同じような色の背景がついてたりするとわからなくなってしまうことがあるんです。リングの形というのはブラウザによって違うので、他のブラウザでは大丈夫かもしれないんですが、そういうことを考えたときに、よりはっきりするようなフォーカスリングのスタイルをつけるのはアリかなと思います。要するに、わかりにくくなっちゃうかどうかです。 原則としては基本的には変えないで済むのなら変えないほうがいいけど、変えないと見にくい場合は変えてもいいのかなと思います。

村上: 今、視聴者のチャットから「aのサイズの関係で フォーカスリングが見えなくてoutline: noneにして要素:focus {solid 2px red}みたいな感じに対処したことがあります」とお寄せいただいております。 リンクのサイズが小さくて、フォーカスリングが見えなかったので、少し太めの赤い線をつけたということですかね。

伊原: そうですね。例えばそういうやり方ですね。ただこの例はもしかしたらリンクのサイズが小さいというのも、どんなデザインだったかにもよると思うんですけど、合わせて見直すというか、商流上難しい場合もあると思うんですけど、リンクがあまり小さくないほうがいいかなとも思うので、それも踏まえてかな。 ちなみにすごくフォーカスをはっきりさせたサイトの例で、gov.ukというところがあります。

Welcome to GOV.UK

伊原: めちゃはっきり出ています。こういうふうにやっているところもあります。Twitter も独自のフォーカスのスタイルだったと思います。Twitter のウェブとか。水色の下線が引かれるだけとか。ただこういうずっと使っていくようなものだと、慣れで学習が発生すると思うんですけど、ウェブサイトでたまたま見たようなサイトが独自のものになっていたりすると、ちょっと「おっ?」っていう感じになっちゃうかもしれないですね。

村上: 私はたまに「おっ」って思うのは、デザインされたフォーカスのスタイルか、例えばブログとかで目立たせたくてマーカーが引いてあるのか迷ったりすることがあります。

伊原: そうですね。インラインに蛍光線が引いてあるような強調のスタイルでやっているとかですかね。 それも切り替えていくことによって、そのスタイルでもわかると言えばわかるんですが、止まった状態で見てるわけじゃないのでわかるかなとは思うんですけど、なのでこういうのもありますという感じですかね。

村上: チャットからですが「フォーカスの可視化、では (私は)フォーカスが移動しない状態では見やすい/見にくいを判断しません。フォーカスを移動させて、フォーカスがあたった/はずれた、がわかるか否か、を見て見やすい/見にくいを判断します。」とのことです。

伊原: そうですね。ちなみにこの四方田さん(@yomochan)はウェブアクセシビリティ基盤委員会の方で、ガチ勢の方で、僕よりだいぶ先輩の方です。 そうだと思いますね。キーボードフォーカスというのはインタラクションなので、操作をしていっている様がわかるかどうか、それで今どこにあるのかがわかるのかどうかが重要だと私も思います。

村上: よくわかりました。ありがとうございます。