[a11y] カート UI のフォーカスを可視化する

リクルート × BASE × バイセル 【第1回フロントエンド勉強会】React & GraphQL での登壇資料です。
https://buysell-technologies.connpass.com/event/276135/

BASE のカート UI にフォーカスを当てていくお話です。

1. © 2012-2023 BASE, Inc. 1 [a11y] カート UI のフォーカスを可視化する リクルート | BASE | バイセル 【第1回フロントエンド勉強会】React & GraphQL rry（@chiba_rry）
2. © 2012-2023 BASE, Inc. 2 自己紹介 • 前回は「フロントエンドカンファレンス沖縄 2022」でオンライン登壇したりしてました ◦ 今回コロナ後初のオフライン勉強会登壇です 👏 • 直近 PJ ではほぼバックエンド（PHP）書いてま す 🐘 ◦ 設計とかテストとかスキーマ駆動とかが好き • BASE のフロントエンドでは Vue と React 書き ながら主にアクセシビリティまわりとか良い感じ にできないか考えてます rry（りりぃ） @chiba_rry @ryamakuchi
3. © 2012-2023 BASE, Inc. 3 今回話すのは BASE の web カート UI の アクセシビリティ改善について
4. © 2012-2023 BASE, Inc. 4 • カートの UI コンポーネントの「フォーカスの可視化」対応をし ていった話 ◦ アクセシビリティ改善をどのように進めていったのか ◦ 実際にどんなコードを書いたのか、フォーカスの可視化をする上 での Tips ◦ 改善しきれなかった部分について 今日の発表で話すこと 🙋
5. © 2012-2023 BASE, Inc. 5 • React に特化した話はしません • アクセシビリティについての詳しい説明 • 「フォーカスの可視化」以外のアクセシビリティ達成基準の話 今日の発表で話さないこと 🙅
6. © 2012-2023 BASE, Inc. 6 👀 BASE web カートの技術
7. © 2012-2023 BASE, Inc. 7 • web カートのフロントエンドは以下のような技術を使ってます ◦ モノレポ構成でパッケージ化 ◦ メインとなるコードのフレームワークは Next.js ◦ UI コンポーネントカタログは Storybook ◦ グローバルなスタイルは CSS Modules ◦ Scoped なスタイルは styled-jsx ◦ eslint-plugin-jsx-a11y を入れている BASE web カートの技術
8. © 2012-2023 BASE, Inc. 8 〇目次 • 現状のカート UI の課題 • 実際に改善してみた • まとめ
9. © 2012-2023 BASE, Inc. 9 現状のカート UI の課題： フォーカスが可視化されておらず タブ移動ができない
10. © 2012-2023 BASE, Inc. 10 フォーカスのスタイルが定義されていない web カートの開発時 点ではフォーカスが あたったときの UI の デザインが定義され ていなかった フォーカスを可視化 したい ref: https://waic.jp/translations/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html
11. © 2012-2023 BASE, Inc. 11 href なし a でボタンが作られている ref: https://developer.mozilla.org/ja/docs/Web/HTML/Element/a 元々ある UI コンポー ネントがアクセシビ リティ的に間違った 形でコーディングさ れてしまっていた href のない a タグは クリッカブルな要素 にならない
12. © 2012-2023 BASE, Inc. 12 フォーカスがあたらないと どんな問題が起きるか？
13. © 2012-2023 BASE, Inc. 13 a タグは画面の遷移の ためにのみ使うべき で、同じようなスタイ ルだからといってボタ ン代わりに使うべきで はありません。 a タグをボタン代わりに使うと起こる問題点
14. © 2012-2023 BASE, Inc. 14 checkbox や radio のよ うな label タグで囲まれ たタイプの UI コンポー ネントで何故か Safari でのみフォーカスが2重 にあたる問題が発生し た。 Safari でのみ outline のスタイルが2重にあたる （な... 何を言っているのかわから ねーと思うが）
15. © 2012-2023 BASE, Inc. 15 これらをどうにかしたい 🤔
16. © 2012-2023 BASE, Inc. 16 実際に改善してみた
17. © 2012-2023 BASE, Inc. 17 • まずそれぞれ基礎となるグローバルなスタイル（CSS Modules） を修正する • 次に各コンポーネント独自の Scoped なスタイル（styled-jsx）を 修正する ※ 修正 PR を出すときには Safari などブラウザの差異も要確認 👀 ※ 開発していくと使われてないコンポーネントや古い Story を発見 するので その都度お掃除もしていく 🧹 フォーカスのスタイル修正方針
18. © 2012-2023 BASE, Inc. 18 • Button と Form のスタイル改善 • Link のスタイル改善
19. © 2012-2023 BASE, Inc. 19 • UI コンポーネントにスタイルを追加する ◦ Button 系コンポーネント ▪ Icon, AppDownload, PayID, Share, etc . . . ◦ Form 系コンポーネント ▪ Checkbox, Radio, Dropdown, Textarea, FloatingLabeledText, InputWithButton, etc . . . Button と Form のスタイル改善
20. © 2012-2023 BASE, Inc. 20 • 外部リンク用コンポーネント OutboundLink の作成 ◦ 既存の a タグで書かれた箇所を OutboundLink に置き換える • a / button を出し分けるコンポーネント ForwardButton の作成 ◦ ボタンとして利用されている a タグを ForwardButton に置き換 える ◦ ForwardButton は href が渡されたら a タグに、そうでなけれ ば button になるようにする Link のスタイル改善
21. © 2012-2023 BASE, Inc. 21 1. Safari の outline スタイル 2. :focus vs :focus-visible 3. デザイナーとエンジニアのコミュニケーション それぞれがあらかじめ知っておいたほうが良かった内容だったので 一つずつご紹介していきます 🙋 開発で大変だった点 💦
22. © 2012-2023 BASE, Inc. 22 • Chrome や Firefox だと outline に border-radius が効いて 角が丸くなるが、Safari でみると border-radius が効かないので 角が丸くならない ◦ Chrome だと　　　　　　　　だが Safari だと • iOS Safari で outline の画崩れが起こる... ◦ こんな風になる → 1. Safari の outline スタイル
23. © 2012-2023 BASE, Inc. 23 • 現状では outline でのスタイリングをやめて box-shadow を使うやり方を採用した ◦ Tailwind の focus とかも box-shadow を使っている模様 ▪ 　　　　　　この手のよくみるタイプのフォーカススタイルは 　　　　　　　　　　　　　　　　　←このような実装に 1. Safari の outline スタイル対処法
24. © 2012-2023 BASE, Inc. 24 • box-shadow を使えば柔軟なスタイリングができる ◦ フォーカスがあたったときのスタイル ◦ エラーの時のスタイルも良い感じに ◦ Safari でみたときも border-radius が 効いて丸いデザインになる Safari でもいつか outline がまともに 使えるようになると思いますがそれまでは box-shadow でいきます 1. Safari の outline スタイル対処法
25. © 2012-2023 BASE, Inc. 25 • box-shadow で実現する場合の注意点 👀 ◦ 要素から少し離したようなデザインにする場合、outline-offcet にあたる部分の背景の透過はできないのでそこだけ注意すること ◦ 背景色が変わるようなところでも このようなデザインを使いたい場合 outline を使う以外に選択肢はなさそう 1. Safari の outline スタイル対処法
26. © 2012-2023 BASE, Inc. 26 • :focus のスタイルにすべきか、:focus-visible のスタイルにすべ きかはあらかじめデザイナーと話し合って決めておくべき ◦ :focus はボタンクリック時とかにもスタイルがつくが、 :focus-visible はキーボード操作のときのみスタイルがつく ◦ BASE の web カートでは既存のデザインも加味して :focus-visible でスタイルを組むことにしました ◦ :focus-visible が Safari でサポートされるのは 15.4 から なのでそこだけ注意 2. :focus vs :focus-visible
27. © 2012-2023 BASE, Inc. 27 • 「focus があたったときのスタイル Figma にないな〜」とか、 「focus があたったときのスタイル実装にほしいな〜」とか • 今回はエンジニアが主に PR や Slack 上でコミュニケーション して差分を埋めていきましたが、デザインと実装が乖離しない ことを目指していきたいですよね • アクセシブルなデザインシステムを作る上で エンジニアもデザイナーも両方知見が必要 3. デザイナーとエンジニアのコミュニケーション
28. © 2012-2023 BASE, Inc. 28 • BASE では最近 「Web アプリケーションアクセシビリティ」 の読書会を開催しています ◦ 参加者はデザイナーとエンジニア • 同じ本を読むことでお互い共通認識を持てると スムーズにアクセシビリティ改善を やっていけそうだなと思いました 3. デザイナーとエンジニアのコミュニケーション
29. © 2012-2023 BASE, Inc. 29 まとめ
30. © 2012-2023 BASE, Inc. 30 まとめ フォーカスを可視化するのは意外と大変 ブラウザごとのスタイル確認は意外と大事 少しずつはじめるアクセシビリティ改善 １ ２ ３
31. © 2012-2023 BASE, Inc. 31 ご静聴 ありがとうございました！