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