目がチカチカする縞模様の背景やヒーロー画像

ある生地のショップが夏のコレクションを公開します。デザイナーはトップページをグラフィカルで今風に見せたいと考え、ヒーローをオプアート風にしました。幅8ピクセルの黒と白の縦縞がページの幅いっぱいに並び、中央の白いカードに「夏のコレクション」の見出しと「コレクションを見る」ボタンがあります。動くものは何もありません。ところが数秒見ていると、縞がちらつき始めます。縁が曲がり、ないはずの色がにじみ、ヒーロー全体が流れていくように見えます。同じ問題は、ヒーローに使った輪や格子のオプアートの写真やイラスト、模様のギャラリーから写した市松模様や千鳥格子の背景、セクション一面に細かく並べた水玉、拡大表示やスクロールで不揃いな帯に変わる幅1ピクセルの縞でも起きます。

ここで満たさない達成基準はなく、このガイドはベストプラクティスです。達成基準2.3.1「3回の閃光、又は閾値以下」が数えるのは閃光、つまり明るさが上がってから下がる、または下がってから上がる変化の組です。動かない画像には閃光がないため、コントラストや大きさにかかわらず、このヒーローは満たします。2.3.1の解説書が模様に触れるのは、ホワイトノイズや交互に入れ替わる市松模様のような、細かく均一な模様の点滅を例外とする箇所だけです。WCAG 3の草案には、動いているように感じさせる静的な内容を「擬似的な動き」と定義して避けるよう求める要件がありますが、まだ検討の段階です。

これらの基準は、テレビ放送のために作られたものです。米国てんかん財団の専門家合意（Harding、Wilkinsら、2005年）は、どの向きであれ明暗の組が5組を超えるはっきりした縞を、発作を誘発しうる模様としています。縞が、想定される最も近い視聴距離から0.006ステラジアンを超える範囲を覆い、最も明るい縞が50 cd/m²を超え、0.5秒以上表示される場合、向きを変える、揺れる、点滅する、明暗が反転する模様は5組まで、変化しない模様は「8本まで」とします。ITU-R BT.1702-3は、縞は平行でも放射状でも、曲線でも直線でもよく、水玉のような同じ要素の列でもできると加えています。参考情報の付属書では、明暗の縞の明るさの差が、有害な閃光と同じだけある場合に限って有害な模様と数えます。動かない模様は、画面の40%を超える場合だけで、専門家合意の4分の1より緩やかです。日本でも、数値は示していませんが、NHKと民放連の「アニメーション等の映像手法に関するガイドライン」が、縞模様、渦巻き模様、同心円模様などの規則的なパターン模様が画面の大部分を占めることを避けるよう求めています。

WCAGの閃光の基準にも、同じ数字が使われています。0.006ステラジアンを視野10度の範囲の4分の1と定め、W3Cはその範囲を341 × 256 CSSピクセルと見積もっています。一般閃光は、白の相対輝度の10分の1以上の変化です。これを動かない模様に当てはめるのは、このガイド独自の解釈で、Web向けに定められた規則ではありません。この解釈に従うと、このヒーローはすべての点で基準を超えます。縞は黒（相対輝度はほぼ0）と白（1）で、幅1,280ピクセルでは明暗が80組あり、範囲の4分の1をはるかに超えて覆います。腕を伸ばした距離では1 CSSピクセルが約0.0213度なので、1組は約3分の1度です。1度あたり3周期に近く、Arnold Wilkinsらが、不快感、錯視、発作を最も起こしやすいと示した間隔です。

図形への過敏性は光過敏性てんかんのある人の多くに見られ、その約3割から5割で臨床的に問題になります。ある研究では、光過敏性の患者32人のうち11人が、動かない模様に反応しました。1度あたり約3周期の縞は、多くの人に色、形、動きの錯視を起こすことがあり、片頭痛のある人には頭痛を起こすこともあります。英国のEpilepsy Societyは、画面に映る、黒と白の縞や格子のような明暗の強い模様を、発作の引き金になりうるものに挙げています。W3Cで認知のアクセシビリティに取り組むタスクフォースも、WCAG 3が扱うべき擬似的な動きの例として、背景の斜線や錯視を挙げています。スマートフォンを顔に近づけて見れば、ヒーローが視界に占める割合はさらに大きくなります。

10グループ中2グループに影響

• 全盲 （影響なし）
• 弱視 （影響なし）
• 色覚 （影響なし）
• ろう （影響なし）
• 難聴 （影響なし）
• 発話 （影響なし）
• 手の操作 （影響なし）
• 筋力・可動域 （影響なし）
• 認知 （影響あり）
• 光過敏 （影響あり）

• 光過敏性発作 図形過敏性てんかんのある人にとって、この間隔の白黒の縞が広く並ぶ動かない画像は、検査でてんかん性の反応を誘発するのと同じ種類の画像です。しかもトップページを開いた瞬間から画面にあります。
• 言語・認知・学習の能力が限られる 縞がカードの周りでちらついて流れるように見え、見出しやボタンから目を引き離すため、気が散りやすい人は、ページの内容に集中しにくくなります。

この診断ツールは、ここでは何も見つけません。閃光のチェックは、アニメーションを少しずつ進めながら変化を数えるものですが、このヒーローは何も変化しないからです。axeにも、axeのルールで動くLighthouseにも模様のルールはなく、WCAGの達成基準にもないため、ページは合格します。WCAGに照らしてページを確認するよう頼まれたAIにも、この縞を指摘する理由がありません。一方で、Lea VerouのCSS3 Patterns Galleryのような模様のギャラリーは、縞、市松模様、千鳥格子、水玉を、大きさやコントラストに触れないまま、写して使える背景として載せています。EAが公開しているオープンソースのライブラリーIRISは、動画の閃光に加えて有害な模様も調べるため、ページを録画してかけることはできます。それでも、画像の中の模様を探して数えるのは人の目です。