食べログで取り組んでいるWebアクセシビリティについて Part2

この記事は食べログ Advent Calendar 2020 7日目の記事です。

こんにちは、食べログフロントエンドチームの荒川です。
前回の記事に続いて、アクセシビリティに配慮したReactの実装をした話を書いていこうと思います。
現在進めているフロントエンドのReact化では、食べログの店舗一覧画面にある検索ヘッダー部分を置き換えています。

この開発における、アクセシビリティの取り組みについてご紹介します。
なお、掲載しているコードは実際のものを少し改変して記載しているので、そのままでは動作しないものもあります。ご了承ください。

ラベルづけ

現在のオレンジ色の検索ボタンは<button>＋<i>（アイコン）で表現しているため、ボタン自体に明確なラベル付がありませんでした。​

そこで、<button>に対してaria-label属性を使い、検索ボタンであることを明示し、アイコンは::afterで表示しました。​

 Tabキーによるアクセス

コンテンツのアクセシビリティを考える場合、キーボードによるアクセスは重要な要素です。（参考URL WebAIM - Keyboard Accessibility）

現在のサジェスト表示では、候補を選択する際にclickイベントのみを受け付けていることと、キーボードからのフォーカスが無効なため、キーボード操作が不可能になっていました。

そこで、今回の改修ではtabindexとrefを組み合わせて、キーボードからの自然な操作を実装しました。

Reactで描画した画面とHTMLの例です↓

具体的なReactの実装については、次章以降で詳しく説明します。

サジェスト部分のフォーカス制御

サジェストでは、自然なキー操作を実現するために、通常のフォーカス順以外に、「サジェスト部分の最後の項目のフォーカスが外れたとき、次の<input>要素へ移動する」という動作をロジックで制御しました。

以下が実際のコードの例です。
外側の<div>要素では、内部の各項目のフォーカス遷移でblurイベントが発生するため、①の部分で「サジェスト全体からフォーカスが抜けようとしたか」を判定しています。
遷移時の動作は外部から渡せる様に、②の部分で引数のblur処理を実行しました。​

フォーカスによる表示切り替え

日付入力のカレンダーでは、<input>要素のclickイベントをハンドリングしてカレンダーを表示しています。

しかし、このままではキーボード操作のTabキーで入力しようとした場合に同じインタラクションになりません。なので、focusイベントを基準に表示制御を組み込むことにしました。

カレンダーの場合は単純な表示切り替えなので、focusのみの制御で実装できましたが、他の部分ではclick・focus・キー操作を複数組み合わせて表示制御を行ったケースもありました。

まとめ

Webページ全体のアクセシビリティは、細かな改善の積み重ねで成り立っていきます。特に、作ったWebページの動作を確認する時に、Tabキーによる動作確認は忘れない様に心がけたいです。

React公式ドキュメントのアクセシビリティの章が、一般的なWebページでも参考になると思うので、おすすめしておきます。

アクセシビリティ – React

ご紹介した実装は、2021/1中旬に食べログへリリース予定のため、動作が気になる方はぜひ触ってみてください🚀

と、ここまで記事を書いていて、新しく追加している機能が全然キーボードで制御できていないことに気づいてしまいました･･･。
近日中に改修します（◞‸◟）

最後に

食べログFEチームでは、一緒に楽しくリプレースに取り組んでくれる仲間を大募集中です！

・React/TypeScriptでバリバリ開発したい
・レガシーなシステムのリファクタリングがしたい
・アーキテクチャについて探求したい
・食べログというプロダクトに貢献したい

どれかに当てはまった方は以下のリンクを是非御覧ください！

明日は食べログ Advent Calendar 2020の8日目の記事が公開されるのでご期待ください！