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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

© 2012-2023 BASE, Inc. 2 自己紹介 ● 前回は「フロントエンドカンファレンス沖縄 2022」でオンライン登壇したりしてました ○ 今回コロナ後初のオフライン勉強会登壇です 👏 ● 直近 PJ ではほぼバックエンド（PHP）書いてます 🐘 ○ 設計とかテストとかスキーマ駆動とかが好き ● BASE のフロントエンドでは Vue と React 書きながら主にアクセシビリティまわりとか良い感じにできないか考えてます rry（りりぃ） @chiba_rry @ryamakuchi

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

© 2012-2023 BASE, Inc. 7 ● web カートのフロントエンドは以下のような技術を使ってます ○ モノレポ構成でパッケージ化 ○ メインとなるコードのフレームワークは Next.js ○ UI コンポーネントカタログは Storybook ○ グローバルなスタイルは CSS Modules ○ Scoped なスタイルは styled-jsx ○ eslint-plugin-jsx-a11y を入れている BASE web カートの技術

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

© 2012-2023 BASE, Inc. 10 フォーカスのスタイルが定義されていない web カートの開発時点ではフォーカスがあたったときの UI のデザインが定義されていなかったフォーカスを可視化したい ref: https://waic.jp/translations/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

© 2012-2023 BASE, Inc. 17 ● まずそれぞれ基礎となるグローバルなスタイル（CSS Modules）を修正する ● 次に各コンポーネント独自の Scoped なスタイル（styled-jsx）を修正する ※ 修正 PR を出すときには Safari などブラウザの差異も要確認 👀 ※ 開発していくと使われてないコンポーネントや古い Story を発見するのでその都度お掃除もしていく 🧹 フォーカスのスタイル修正方針

Slide 18

Slide 18 text

Slide 19

Slide 19 text

© 2012-2023 BASE, Inc. 19 ● UI コンポーネントにスタイルを追加する ○ Button 系コンポーネント ■ Icon, AppDownload, PayID, Share, etc . . . ○ Form 系コンポーネント ■ Checkbox, Radio, Dropdown, Textarea, FloatingLabeledText, InputWithButton, etc . . . Button と Form のスタイル改善

Slide 20

Slide 20 text

© 2012-2023 BASE, Inc. 20 ● 外部リンク用コンポーネント OutboundLink の作成 ○ 既存の a タグで書かれた箇所を OutboundLink に置き換える ● a / button を出し分けるコンポーネント ForwardButton の作成 ○ ボタンとして利用されている a タグを ForwardButton に置き換える ○ ForwardButton は href が渡されたら a タグに、そうでなければ button になるようにする Link のスタイル改善

Slide 21

Slide 21 text

Slide 22

Slide 22 text

© 2012-2023 BASE, Inc. 22 ● Chrome や Firefox だと outline に border-radius が効いて角が丸くなるが、Safari でみると border-radius が効かないので角が丸くならない ○ Chrome だと　　　　　　　　だが Safari だと ● iOS Safari で outline の画崩れが起こる... ○ こんな風になる → 1. Safari の outline スタイル

Slide 23

Slide 23 text

© 2012-2023 BASE, Inc. 23 ● 現状では outline でのスタイリングをやめて box-shadow を使うやり方を採用した ○ Tailwind の focus とかも box-shadow を使っている模様 ■ 　　　　　　この手のよくみるタイプのフォーカススタイルは　　　　　　　　　　　　　　　　　←このような実装に 1. Safari の outline スタイル対処法

Slide 24

Slide 24 text

© 2012-2023 BASE, Inc. 24 ● box-shadow を使えば柔軟なスタイリングができる ○ フォーカスがあたったときのスタイル ○ エラーの時のスタイルも良い感じに ○ Safari でみたときも border-radius が効いて丸いデザインになる Safari でもいつか outline がまともに使えるようになると思いますがそれまでは box-shadow でいきます 1. Safari の outline スタイル対処法

Slide 25

Slide 25 text

© 2012-2023 BASE, Inc. 25 ● box-shadow で実現する場合の注意点 👀 ○ 要素から少し離したようなデザインにする場合、outline-oﬀcet にあたる部分の背景の透過はできないのでそこだけ注意すること ○ 背景色が変わるようなところでもこのようなデザインを使いたい場合 outline を使う以外に選択肢はなさそう 1. Safari の outline スタイル対処法

Slide 26

Slide 26 text

© 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

Slide 27

Slide 27 text

© 2012-2023 BASE, Inc. 27 ● 「focus があたったときのスタイル Figma にないな〜」とか、「focus があたったときのスタイル実装にほしいな〜」とか ● 今回はエンジニアが主に PR や Slack 上でコミュニケーションして差分を埋めていきましたが、デザインと実装が乖離しないことを目指していきたいですよね ● アクセシブルなデザインシステムを作る上でエンジニアもデザイナーも両方知見が必要 3. デザイナーとエンジニアのコミュニケーション