![見出し画像](https://assets.st-note.com/production/uploads/images/39851741/rectangle_large_type_2_ab072194bfd6b36f63a31b720ac62bad.png?width=1200)
食べログで取り組んでいる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ページでも参考になると思うので、おすすめしておきます。
ご紹介した実装は、2021/1中旬に食べログへリリース予定のため、動作が気になる方はぜひ触ってみてください🚀
と、ここまで記事を書いていて、新しく追加している機能が全然キーボードで制御できていないことに気づいてしまいました・・・。
近日中に改修します(◞‸◟)
最後に
食べログFEチームでは、一緒に楽しくリプレースに取り組んでくれる仲間を大募集中です!
・React/TypeScriptでバリバリ開発したい
・レガシーなシステムのリファクタリングがしたい
・アーキテクチャについて探求したい
・食べログというプロダクトに貢献したい
どれかに当てはまった方は以下のリンクを是非御覧ください!
明日は食べログ Advent Calendar 2020の8日目の記事が公開されるのでご期待ください!
この記事が気に入ったらサポートをしてみませんか?