Tweet
Tweet

Slide 1

Slide 1 text

© 2012-2023 BASE, Inc. 1 [a11y] カート UI のフォーカスを可視化する リクルート | BASE | バイセル 【第1回フロントエンド勉強会】React & GraphQL rry（@chiba_rry）

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

© 2012-2023 BASE, Inc. 3 今回話すのは BASE の web カート UI の アクセシビリティ改善について

Slide 4

Slide 4 text

© 2012-2023 BASE, Inc. 4 ● カートの UI コンポーネントの「フォーカスの可視化」対応をし ていった話 ○ アクセシビリティ改善をどのように進めていったのか ○ 実際にどんなコードを書いたのか、フォーカスの可視化をする上 での Tips ○ 改善しきれなかった部分について 今日の発表で話すこと 🙋

Slide 5

Slide 5 text

© 2012-2023 BASE, Inc. 5 ● React に特化した話はしません ● アクセシビリティについての詳しい説明 ● 「フォーカスの可視化」以外のアクセシビリティ達成基準の話 今日の発表で話さないこと 🙅

Slide 6

Slide 6 text

© 2012-2023 BASE, Inc. 6 👀 BASE web カートの技術

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

© 2012-2023 BASE, Inc. 8 〇目次 ● 現状のカート UI の課題 ● 実際に改善してみた ● まとめ

Slide 9

Slide 9 text

© 2012-2023 BASE, Inc. 9 現状のカート UI の課題： フォーカスが可視化されておらず タブ移動ができない

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

© 2012-2023 BASE, Inc. 11 href なし a でボタンが作られている ref: https://developer.mozilla.org/ja/docs/Web/HTML/Element/a 元々ある UI コンポー ネントがアクセシビ リティ的に間違った 形でコーディングさ れてしまっていた href のない a タグは クリッカブルな要素 にならない

Slide 12

Slide 12 text

© 2012-2023 BASE, Inc. 12 フォーカスがあたらないと どんな問題が起きるか？

Slide 13

Slide 13 text

© 2012-2023 BASE, Inc. 13 a タグは画面の遷移の ためにのみ使うべき で、同じようなスタイ ルだからといってボタ ン代わりに使うべきで はありません。 a タグをボタン代わりに使うと起こる問題点

Slide 14

Slide 14 text

© 2012-2023 BASE, Inc. 14 checkbox や radio のよ うな label タグで囲まれ たタイプの UI コンポー ネントで何故か Safari でのみフォーカスが2重 にあたる問題が発生し た。 Safari でのみ outline のスタイルが2重にあたる （な... 何を言っているのかわから ねーと思うが）

Slide 15

Slide 15 text

© 2012-2023 BASE, Inc. 15 これらをどうにかしたい 🤔

Slide 16

Slide 16 text

© 2012-2023 BASE, Inc. 16 実際に改善してみた

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

© 2012-2023 BASE, Inc. 18 ● Button と Form のスタイル改善 ● Link のスタイル改善

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

© 2012-2023 BASE, Inc. 21 1. Safari の outline スタイル 2. :focus vs :focus-visible 3. デザイナーとエンジニアのコミュニケーション それぞれがあらかじめ知っておいたほうが良かった内容だったので 一つずつご紹介していきます 🙋 開発で大変だった点 💦

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-offcet にあたる部分の背景の透過はできないのでそこだけ注意すること ○ 背景色が変わるようなところでも このようなデザインを使いたい場合 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. デザイナーとエンジニアのコミュニケーション

Slide 28

Slide 28 text

© 2012-2023 BASE, Inc. 28 ● BASE では最近 「Web アプリケーションアクセシビリティ」 の読書会を開催しています ○ 参加者はデザイナーとエンジニア ● 同じ本を読むことでお互い共通認識を持てると スムーズにアクセシビリティ改善を やっていけそうだなと思いました 3. デザイナーとエンジニアのコミュニケーション

Slide 29

Slide 29 text

© 2012-2023 BASE, Inc. 29 まとめ

Slide 30

Slide 30 text

© 2012-2023 BASE, Inc. 30 まとめ フォーカスを可視化するのは意外と大変 ブラウザごとのスタイル確認は意外と大事 少しずつはじめるアクセシビリティ改善 １ ２ ３

Slide 31

Slide 31 text

© 2012-2023 BASE, Inc. 31 ご静聴 ありがとうございました！