noDistractingElements
Biomeのlintルールから見るアクセシビリティ
目次
初日は最近自分がportしたnoDistractingElementsです。
distractingな要素とは #
前にZennで書いた記事の最初の2つの、<marquee>要素と<blink>要素が対象で、これを使うと警告が出るようなlintルールになっています。
読んでくださいといえばそれで終わりなのですが、せっかくなので解説します。
WCAG2.2の達成基準2.2.2に、「一時停止、停止、非表示（レベルA）」があります。
これは、自動で動き続けるようなコンテンツは利用者の注意を過剰に引いてしまうことがあり、特に認知障害及び注意欠陥障害のある人がWebサイト上のコンテンツに集中できなくなってしまうのでやめましょうというものです。 例えば株式相場表示機や電車の電光掲示板のように文字列が横に流れていくもの、その他動き続けるアニメーションなどが対象です。 よくあるものだと、カルーセルなどが代表的な例です。カルーセルが自動で動く場合、必ず後述の方法で一時停止できるボタンを用意しましょう。
それを踏まえて、今回の<marquee>要素及び<blink>要素はどちらも自動で動き続けるものなので、禁止されています。
<marquee>は電車の電光掲示板やニュースバナーのようにテキストを横に流すことができる要素（MDNの例を見ると、もっと柔軟に色んなアニメーションを実現できそう）、<blink>はテキストを点滅させることができる要素です。上記のZennの記事で、前者はMDN、後者はUDNへのリンクから例を見ることができます。
具体的に、点滅やちらつき、フラッシュなどに対する症状や てんかん について具体的に書かれているMDNのページがあります。僕はまだ読んでません。
ちなみに、フラッシュや てんかん については2.2.2ではなくて、達成基準 2.3.1 3 回の閃光、又は閾値以下やその上位の達成基準である達成基準 2.3.2 3 回の閃光に記載があるようです。
対処法 #
<marquee>や<blink>ではなくて独自実装でこういった自動で動き続けるようなコンテンツを配置したい場合は、主に以下の3つの方法のどれかを取ると、達成基準を満たすことができます。
これらの方法はWCAGのUnderstandingでテクニックとして紹介されているので、詳しく知りたい人はそちらを参照してください。
1. 5秒以内に止める #
5秒以内に止めれば達成基準的には問題ありません。持続的に動いていると、いつまで経ってもそのコンテンツに注意を取られてしまうので問題になります。
2. ボタンで一時停止できるようにする #
例えばニュースバナーでテキストを横に流し続けている場合、近くにそれを一時停止・再開できるボタンを配置していれば問題ありません。 Zennの記事でも載せていた駒瑠市のページの、問題がないバージョンを見てみると分かりやすいです。 「こんにちは！ 駒瑠市の地球温暖化防止課のこまるだよ！」という表示の横に一時停止ボタンがあり、クリックするとテキストの再生が止まります。カルーセルも同様です。
ただし、あまり遠くに配置しているとどのボタンで止められるのかが分かりづらいので、近くに配置しましょう。 Trusted Testerでは、ページの最初もしくは前後3要素以内にそのようなコントロールがあるかどうかを確認することになっています。
Determine if there is an evident mechanism for the user to pause, stop, or hide the content within the first three elements that the user would encounter OR within three elements before/after the moving/blinking/scrolling content.
3. prefers-reduced-motionを使う #
prefers-reduced-motionは、ユーザーが端末の設定でアニメーションを無効化している場合にCSSを条件分岐させることができるメディアクエリです。
これを用いて、アニメーションを無効化していないときのみ自動再生させる、といった分岐をしておけば、前述のような障害を持っているなどの理由で、自分でアニメーションを無効化しているユーザーには自動再生させずに表示することができます。ただし、必ずしもそういうユーザーが全員アニメーションを無効化するような設定を知っていて設定しているとは限らないので注意が必要です。
A way to make autoplay respect prefers-reduced-motion #
WHATWGで、<video>要素のautoplay属性がprefers-reduced-motionの設定を考慮するべきではないかという議論が進行中です。
現状はユーザーが端末でアニメーションを無効化するような設定をしていても、<video autoplay>は自動再生されてしまうが、その設定を考慮するような値をautoplayに追加したり、もしくは、デフォルトで考慮するようにして「無効化されていたとしても自動再生する」という値をautoplayに追加するような案も出ています。
これはView Transitionについても似たようなものが議論されていたようです。
ちなみに、このサイトでも使っているAstroでは、View Transitionの設定をするのに<ViewTransition>コンポーネントを置くのですが、これはprefers-reduced-motionを考慮して自動でアニメーションのオン・オフを切り替えてくれます。
まとめ #
自動で流れ続けるものは止められるようにしましょう。