アクセシビリティに配慮したアニメーション

【teamLab Study Session ~frontend~ #3 】にてチームラボのフロントエンドエンジニアが登壇用に作成したスライドです。

teamLab Study Session ~frontend~ とは

チームラボのフロントエンド班がチームラボ内で定期的に実施している勉強会を、フロントエンドの技術に興味ある参加者を募集し、オンラインで配信する勉強会です。

https://teamlab.connpass.com/event/393589/

Transcript

1. © teamLab Inc. アクセシビリティに 配慮したアニメーション teamLab Study Session ~frontend~ #3 田畑 凌 チームラボ パッケージチーム 所属
2. © teamLab Inc. 所属｜ 2 自己紹介 2 パッケージチーム フロントエンド班 フロントエンドスペシャリスト ※ 田畑 凌 Tabata Ryo 入社｜2020年 04月 新卒（7年目） ※ スペシャリスト：チームラボのエンジニアとして一 定の開発経験を積み、技術面やマインド面において チームラボ内である一定の評価を得ると所属すること ができる、所属班や案件のチームとは異なるチーム
3. © teamLab Inc. アクセシビリティに配慮したアニメーションとは 3
4. © teamLab Inc. デモ 4 👍 or 👎
5. © teamLab Inc. デモ 5 👍 or 👎
6. © teamLab Inc. デモのWCAGに準拠していない箇所 • WCAG 2.2.1: タイミング調整可能を理解する • WCAG 2.2.2: 一時停止、停止、非表示を理解する 6
7. © teamLab Inc. WCAG 2.2.1: タイミング調整可能を理解する コンテンツに制限時間を設定する場合は、次に挙げる事項のうち、少なくとも一 つを満たしている • 解除 ◦ 制限時間があるコンテンツを利用する前に、利用者がその制限時間を解 除することができる • 調整 ◦ 制限時間があるコンテンツを利用する前に、利用者が少なくともデフォ ルト設定の 10 倍を超える、大幅な制限時間の調整をすることができる • 延長 ◦ 時間切れになる前に利用者に警告し、かつ少なくとも 20 秒間の猶予を もって、例えば「スペースキーを押す」などの簡単な操作により、利用 者が制限時間を少なくとも 10 倍以上延長することができる 7
8. © teamLab Inc. WCAG 2.2.1: タイミング調整可能を理解する コンテンツに制限時間を設定する場合は、次に挙げる事項のうち、少なくとも一 つを満たしている • リアルタイムの例外 ◦ リアルタイムのイベント (例えば、オークション) において制限時間が必 須の要素で、その制限時間に代わる手段が存在しない • 必要不可欠な例外 ◦ 制限時間が必要不可欠なもので、制限時間を延長することがコンテンツ の動作を無効にすることになる • 20 時間の例外 ◦ 制限時間が 20 時間よりも長い 8
9. © teamLab Inc. WCAG 2.2.2: 一時停止、停止、非表示を理解する 動きのある、点滅している、スクロールする、又は自動更新する情報は、次のす べての事項を満たしている 9 動きのある、点滅している、又はスクロールしている情報が、 1. 自動的に開始し、 2. 5 秒よりも長く継続し、 3. その他のコンテンツと並行して提示される場合、 利用者がそれらを一時停止、停止、又は非表示にすることのできるメカニズムがある ただし、その動き、点滅、又はスクロールが必要不可欠な動作の一部である場合は除く 例）カルーセル、動画背景など
10. © teamLab Inc. WCAG 2.2.2: 一時停止、停止、非表示を理解する 動きのある、点滅している、スクロールする、又は自動更新する情報は、次のす べての事項を満たしている 10 自動更新する情報が、 1. 自動的に開始し、 2. その他のコンテンツと並行して提示される場合、 利用者がそれを一時停止、停止、もしくは非表示にする、又はその更新頻度を調整するこ とのできるメカニズムがある ただし、その自動更新が必要不可欠な動作の一部である場合は除く（進捗バーなど）
11. © teamLab Inc. 自動再生を止めるデモ 11
12. © teamLab Inc. Swiper 有名なカルーセルライブラリの Swiperにはa11y用のオプションが 存在している 停止についてはボタン押下で、 autoplayのstop、start関数を実行 し再生と停止を切り替える必要が ある 12 const swiperRef = useRef(null); const handleToggle = () => { const swiper = swiperRef.current; if (!swiper) return; if (isPlaying) { swiper.autoplay.stop(); // ← 停止 } else { swiper.autoplay.start() // ← 再生 } }
13. © teamLab Inc. 他のアニメーションに関連するWCAGについて 2.3.1: 3 回の閃光、又は閾値以下を理解する 2.3.3 インタラクションによるアニメーションを理解する 13
14. © teamLab Inc. 2.3.1 3 回の閃光、又は閾値以下を理解する ウェブページには、どの 1 秒間においても 3 回を超える閃光を放つものがない、 又は閃光が一般閃光閾値及び赤色閃光閾値を下回っている 一般閃光とは、相対輝度の相反する変化が相対輝度の最大値 (1.0) の 10％以上と なる組合せであり、暗いほうの映像の相対輝度が 0.80 未満であるもの、として定 義される → 「暗→明→暗（または逆）」の変化が大きい点滅 赤色閃光は、彩度の高い赤色を含んだ相反する遷移として定義される → 赤は発作誘発リスクが高いため、一般閃光とは別枠となっている 14
15. © teamLab Inc. 2.3.3: インタラクションによるアニメーションを理解する アニメーションが、機能又は伝達されている情報に必要不可欠でない限り、イ ンタラクションによって引き起こされるモーションアニメーションを無効にで きる 一部の利用者は動きのあるコンテンツから、注意散漫又は吐き気を経験するこ とがある コンテンツ例 • ページのスクロールによって要素が動く • スクロールによるパララックス (視差効果) 15
16. © teamLab Inc. 視差効果を減らす 視差効果を減らすというオプションが存在している Windows 11: 設定 > アクセシビリティ > 視覚効果 > アニメーション効果 macOS: システム設定 > アクセシビリティ > 視覚効果を減らす iOS: 設定 > 一般 > アクセシビリティ > 視覚効果を減らす Android 9 以上: 設定 > ユーザー補助 > アニメーションの削除 16
17. © teamLab Inc. 2.3.3: インタラクションによるアニメーションを理解する @media (prefers-reduced-motion: reduce) ユーザーが余計な動きを最少化するよう要求したことを検出することができる 17 .animation { animation: pulse 1s linear infinite both; background-color: purple; } /* アニメーションを控えめにする */ @media (prefers-reduced-motion: reduce) { .animation { animation: dissolve 4s linear infinite both; background-color: green; text-decoration: overline; } } @keyframes pulse { 0% { transform: scale(1); } 25% { transform: scale(0.9); } 50% { transform: scale(1); } 75% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes dissolve { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }
18. © teamLab Inc. 視差効果を減らす設定をしている場合の初期設定 18 useEffect(() => { const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches swiperRef.current = new Swiper(containerRef.current, { modules: [Autoplay, A11y, Keyboard], loop: true, autoplay: reduced ? false : { delay: 3000, disableOnInteraction: false, pauseOnMouseEnter: true, }, } }) 視差効果を減らしている場合、そもそも初期設定で自動再生を止めることも必要
19. © teamLab Inc. 非干渉の達成基準 WCAG 2.0 に「適合している」とみなされるためには、満たさなければならない5 つの要件があり、そのうち1つに「非干渉」というものが存在している > 技術がアクセシビリティ サポーテッドではない方法で用いられている場合、又 は適合しない方法で用いられている場合、利用者がウェブページの他の部分へア クセスすることを妨げていない → アクセシビリティを満たしていないコンテンツ（技術）があっても、それが ページ全体の閲覧や操作の邪魔をしてはならない 19
20. © teamLab Inc. 非干渉の達成基準 適合するために依存していないコンテンツも含めて、ページ上のすべてのコンテ ンツには以下の達成基準が適用される • 1.4.2 - 音声制御 • 2.1.2 - キーボードトラップなし • 2.2.2 - 一時停止、停止、非表示 ◦ 画面の一部に動き続ける要素があると、注意力欠如障害のあるユーザーなどは、動く要素に 気を取られてしまい他の部分を読むことができなくなる • 2.3.1 - 3回の閃光、又は閾値以下 ◦ ページの一部が閃光を放つと、発作を起こしたユーザーは他の箇所にアクセスできなくなる → これらを満たしていないことにより、ページ全体の利用を妨げる可能性がある 20
21. © teamLab Inc. three.jsでのアクセシビリティ対応 react-three-fiberのエコシステムとしてa11y対応ができるライブラリ react-three-a11y デモ • タブインデックスとキーボードナビゲーション • スクリーンリーダーのサポート • 代替テキスト 21
22. © teamLab Inc. まとめ • アニメーションは魅力的な機能である一方、考慮が抜けると特定のユーザー を完全に排除・体調不良に陥らせるリスクがある • WCAGの基準（タイミング調整・停止手段の提供・閃光の制限・視差効果の 抑制など）を正しく理解し、OSの設定に応じた適切な制御を実装することが 不可欠 • 「知らないものは作れない」からこそ、フロントエンドエンジニアとして設 計・実装の初期段階からアクセシビリティへの配慮を念頭に置いておくこと が重要 22
23. © teamlab Inc. 田畑 凌 チームラボ パッケージチーム 所属 アクセシビリティに配慮したアニメーション teamLab Study Session ~frontend~ #3 ご清聴ありがとうございました！