Area Flash Checker


Area Flash Checker_timeline



画像 : https://newscast.jp/attachments/xiCzXsYZQBelXsZ0b0cy.png
Area Flash Checker



[リベロジック株式会社]( https://www.liberogic.jp/ )（本社：東京都港区、以下リベロジック）は、Google Chrome拡張機能ウェブアクセシビリティツール第4弾として、Webコンテンツの閃光を表示中のページ上でそのまま計測する[「Area Flash Checker（エリア・フラッシュ・チェッカー）」]( https://chromewebstore.google.com/detail/plpikclbekblfmmjeompaggpmghninnj )をリリースしました。

本ツールはW3Cが策定するWebアクセシビリティの国際的なガイドラインWCAG（Web Content Accessibility Guidelines）の達成基準 2.3.1「3回の閃光、又は閾値以下」（レベルA）と 2.3.2「3回の閃光」（レベルAAA）に基づき、ページ上で実際に描画されたピクセルをフレームごとに解析します。

画面収録や動画ファイルのアップロードは不要で、CSSアニメーション / 動画 / Canvas / カルーセル / 広告枠などページ上で動いているものをその場でチェックできます。

## **開発の背景：見落とされやすく確かめにくい「閃光」**

激しい明滅や赤色の点滅は、光過敏性発作を引き起こすおそれがあります。

日本でも1997年にテレビアニメ放送をきっかけに多くの視聴者が体調不良を訴えた事例が広く知られています。

WCAGでは閃光に関する達成基準をレベルAという最も基本的な要件として定めています。

Webサイトでこの基準に抵触するほどの閃光が生じることはそれほど多くありませんが、ひとたび起きれば利用者の健康に直接関わります。

また閃光は動画に限らず、CSSアニメーション・Canvasによる演出・広告枠などでも起こりえます。

「これは大丈夫だろうか」

と気になる動きに出会ったときにその場で確実に確かめられることが重要です。

これまで閃光のチェックには、PEATに代表される動画ファイル解析型のツールが使われてきました。こうしたツールは、主に動画素材を制作段階でチェックするためのものです。Webサイトに組み込んだ後の状態を検証するには、ページを画面収録し、動画ファイルを変換してツールに読み込ませ、修正のたびにその手順を繰り返す必要がありました。

CSSアニメーションや広告枠のように素材としての動画ファイルが存在しない動きはこの方法でしか確かめられません。

**「気になる動きを見つけたらその場ですぐに確かめたい。」**

そうした現場の声から本ツールの開発がスタートしました。

## 録画いらずでページ上で「動いているまま」を計測

[Area Flash Checker]( https://chromewebstore.google.com/detail/plpikclbekblfmmjeompaggpmghninnj )は、範囲をドラッグで選び（または表示全体を対象にし）、5〜60秒キャプチャするだけで閃光をチェックできます。描画フレームを直接解析するため、ユーザーが実際に目にしているままの一般閃光・赤色閃光を数えられます。

| 　| 動画ファイル解析型ツール | Area Flash Checker |

| :--- | :--- | :--- |

| **準備** | 画面収録・動画ファイルの保存・読み込み | 拡張機能を起動して範囲を選ぶだけ |

| **対象** | 動画ファイル | ページ上で動いているもの全般（CSSアニメーション、動画、Canvas、GIF、カルーセル、広告枠など） |

| **範囲** | 動画のフレーム全体 | 気になる要素だけに絞り込み可能 |

| **修正後の再確認** | 収録からやり直し | その場で再計測 |

**なお、完成した動画ファイルそのものを監査する場合は動画ファイル解析型のツールが適していますのでご注意ください。**

本ツールは制作・診断の過程で手早く確認するための選択肢として位置づけています。

## 主な機能

### 1. WCAG 達成基準 2.3.1 / 2.3.2 の判定

「3回の閃光、又は閾値以下」（レベルA）と「3回の閃光」（レベルAAA）について、一般閃光と赤色閃光それぞれを適合 / 不適合で表示します。

- **一般閃光**　相対輝度が0.1以上明るくなってから暗くなる（またはその逆の）一往復の変化。暗い側の相対輝度が0.80未満のものを1回と数えます

- **赤色閃光**　WCAG 2.1以降の定義に基づく、飽和赤（R/(R+G+B) ≥ 0.8）との間の遷移で、CIE 1976 UCS上の色度差が0.2を超えるもの

- **面積閾値**　WCAGが推奨する21,824 CSS px²（341×256pxの25%）

結果カードには1秒あたりの最大閃光数・違反面積と閾値の比較・基準を超えた時間帯（ピークの1秒間）もあわせて表示します。

### 2. タイムラインと閃光マップ

輝度変化率・閃光面積・違反面積の推移をタイムラインで表示します。

ホバーや矢印キーでタイムラインをなぞると、その時刻に選択範囲のどこが光っていたかをフレームプレビューに重ねて表示します。



画像 : https://newscast.jp/attachments/pErYZnfuoSYPA54AuB1p.png
Area Flash Checker_timeline



### 3. 実際のページで使うための配慮

- 60fpsでのキャプチャを要求し実効フレームレートを表示 / 高速な明滅を取りこぼすおそれがある場合は警告

- Retina / 高DPIディスプレイやブラウザのズームに自動で対応

- 細い線や文字の縁などの細い構造を面積計算から除外（既定40px、変更可）

- 計測中のオーバーレイがキャプチャに写り込まない設計

### 4. ツール自体のアクセシビリティ

スクリーンリーダーに対応し、計測の状態と結果を読み上げます。

キーボードでのタイムライン操作や、どの段階でもEscapeキーで戻れる操作性など、アクセシビリティツールとしての使いやすさにも配慮しています。

## 使い方

1. 拡張機能のアイコンをクリックして開始

2. チェックしたい範囲をドラッグで選択（Fキーで表示全体を選択）

3. 「計測開始」でキャプチャ（既定10秒、5〜60秒で変更可）：計測前にAlt（MacではOption）を押しながらページを操作し確認したい動きを再生可能

4. 結果カードにWCAGの判定・閃光の回数・タイムラインが表示

※データ収集や外部への送信は一切行わず、キャプチャしたフレームはブラウザのメモリ上で解析後すぐに破棄されるため、公開前のページや社内環境でも安心してご利用いただけます。

## ダウンロード

「[Area Flash Checker]( https://chromewebstore.google.com/detail/plpikclbekblfmmjeompaggpmghninnj )」は、Chrome ウェブストアから無料でダウンロードできます。

## **リベロジックのアクセシビリティツール・サービス**

リベロジックではアクセシビリティを「特別な対応」ではなく「当たり前の品質」にすることを目指しています。

[これまでのツール]( https://chromewebstore.google.com/publisher/%E3%83%AA%E3%83%99%E3%83%AD%E3%82%B8%E3%83%83%E3%82%AF%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE/ub756834b5c2ec5bab543c840e935d061 )はコントラスト・ページ構造・文章の伝わりやすさと、主に「止まっている画面」を対象としてきました。

第4弾となる今回はページ上の「動き」へと対象を広げ、見落とされやすい閃光のリスクを日常的に確かめられるようにしました。

| | ツール名 | 概要 |

| --- | --- | --- |

| 第1弾 | [Area Contrast Checker]( https://chromewebstore.google.com/detail/kjemflinmhiljcdnngbacdddbhappdkg ) | ドラッグした範囲のピクセルを解析し、テキストと背景のコントラスト比をその場で判定 |

| 第2弾 | [A11y Navigation Auditor]( https://chromewebstore.google.com/detail/kjemflinmhiljcdnngbacdddbhappdkg ) | 見出し、ランドマーク、リンクなどをサイドパネルで可視化し、ページ構造の問題を検出 |

| 第3弾 | [やさしい日本語 ＆ 読みやすさ診断]( https://chromewebstore.google.com/detail/kdhnoobomgjbhhokjnaoeolpahbeflaa ) | 難しい日本語をやさしい日本語へ変換し、文章の読みやすさをスコアで診断 |

| 第4弾 | [Area Flash Checker]( https://chromewebstore.google.com/detail/plpikclbekblfmmjeompaggpmghninnj )| 表示中のページの閃光をその場で計測し、WCAG 2.3.1 / 2.3.2を判定 |

また、Chrome拡張機能に加えリベロジックではWebアクセシビリティの診断を支えるサービスも展開しています。

| サービス | 概要 |

| --- | --- |

| [Lente Scan]( https://lente-scan.liberogic.jp/ ) | URLを入力するだけでWCAG 2.2 レベルA・AAを基準に自動診断できるWebサービスで、axe-coreと独自エンジン「Lente Detect」で問題を検出し人による確認が必要な領域も明示 |

| [Lente Audit]( https://lente-audit.liberogic.jp/ ) | 自動診断で見つかるのは全体の3〜4割です。確実なWCAG対応のために専門家による手動診断サービスも提供しています。Lente Auditでは診断結果の共有、修正に関するやり取りレポート発行までを専用ワークスペース上で完結します。 |

閃光はHTMLやCSSを解析する自動診断では判定しにくく、人による確認が必要となる領域の一つです。

Lente Scanで全体像を把握し、Area Flash Checkerをはじめとする拡張機能で個別の項目を確かめ、最終的な適合判断はLente Auditで専門家が行う。

自動診断、現場のツール、専門家の手動診断を組み合わせることで、継続的なアクセシビリティ改善を支援します。

**「止まっている画面」だけでなく「動いている画面」まで**

私たちが現場で感じてきた課題を、また一つ形にしたツールです。

リベロジックは今後もアクセシビリティをより身近に、よりスムーズにするためのツール開発を進めてまいります。

## 監修者プロフィール

**二俣 歩（ふたまた あゆむ）**

リベロジック株式会社 CAO（Chief Accessibility Officer） Webアクセシビリティスペシャリスト / フロントエンドエンジニア IAAP認定 WAS（Web Accessibility Specialist）保持者

DTP領域での制作経験を経てWeb制作に転身し、リベロジック創業期よりマークアップ、フロントエンド実装、ディレクションなど幅広い業務に従事。現在はWebアクセシビリティ対応を中心に、WCAGに基づく診断、改善提案、実装支援を担当している。

リベロジックが公開しているWebアクセシビリティ支援ツール・サービスでは、アクセシビリティ診断の現場視点から、機能設計および判定・評価内容を監修している。

## 本件に関するお問い合わせ先

お問い合わせフォーム：https://www.liberogic.jp/contact/accessibility/

## リベロジック株式会社

リベロジック株式会社は、Supabaseを活用した内部管理アプリケーション開発、セキュアで高速なヘッドレスCMS構築、Webアクセシビリティ支援を強みとする制作・開発会社です。既存インフラの見直しやモダン環境への移行支援など、幅広い領域のデジタル支援を行っています。

| 項目 | 内容 |

| --- | --- |

| 商号 | リベロジック株式会社 |

| 代表者 | 代表取締役 森本忠典 |

| 所在地 | 〒108-0073 東京都港区三田1-3-37板金会館2F |

| 設立 | 2007年2月 |

| 資本金 | 3,000万円 |

事業内容：

- Webアプリケーション開発

- ヘッドレスCMS開発（その他CMS実装/カスタマイズ）

- ウェブアクセシビリティ対応 / 試験 / コンサルティング

- Webサイト / アプリケーションの企画、制作、開発、運営、保守

- UIデザイン（その他デザイン全般）

- バックエンド開発等 Web制作・開発における全般業務

コーポレートサイト：https://www.liberogic.jp/

会社概要：https://www.liberogic.jp/about/





情報提供元： ＠Press