ウェブアクセシビリティ導入ガイドブックを読み進める #HTML

ウェブアクセシビリティに関する知見を深めるため、
デジタル庁によるウェブアクセシビリティ導入ガイドブックを読んでいきます。

その中の項目3、ウェブアクセシビリティで達成すべきことにある、達成しないと利用者に重大な悪影響を及ぼすもの（重大） について理解を深めていきます。

達成しないと利用者に重大な悪影響を及ぼすもの（重大）

これらが実現できていないと、ユーザーの離脱はもちろん、コンテンツを理解いただけなかったり、ユーザーに対して発作の危険性に晒してしまう可能性もあるようです。

自動再生はさせない

音声を自動再生することや強制的に再生させることは避けましょう。また、自動再生する音声は 3秒以内に収めましょう。その再生が 3秒より長く続く場合は利用者が止められるようにする必要があります。

確かに不快です。
私はアプリでコミックを読みますが、自動再生される広告が音声有りの動画がほぼ100%です。（音声OFFボタンはある）
ゲームやアニメの特設サイトなどでも、自動的に動画が流れる印象を持ちます。主にYouTubeなのもあり、停止再生ボタンはあるのでこのあたりは大丈夫そう。
そう考えると音声が自動再生されるシーンはとても多いと感じます。
(昔は、訪問した瞬間に音楽が流れる個人サイトが多々ありましたねw)

袋小路に陥らせない

キーボード操作だけで利用しているときに、一度フォーカスしたら抜け出せないコンテンツを作らないようにしましょう。たとえばモーダルダイアログのようなフォーカスを制限するコンテンツで起きやすいです。

divやspanで作ったボタンはtabキーでfocusすることができなのでダメ。
tabindex=0であればfocusできるが、Enterを押しても反応しないのでjsの実装は必要。
"押せる"のであれば、最初からbuttonで作ってしまうのが正解。

// divの場合、これくらいの実装が必要。
// 下記であれば、クリックでもKey操作も可能。
const CustomButton = ({ onClick }) => {
  const handleKeyDown = (event) => {
    if (event.key === 'Enter' || event.key === ' ') { //"Enter"or"Space"キー
      onClick();
      event.preventDefault();  // スペースキーによるページスクロールを防ぐ
    }
  }
  return (
    <div
      tabIndex="0" // タブでフォーカス可能にする
      role="button" // スクリーンリーダーにボタンとして認識させる
      onKeyDown={handleKeyDown} // キーボードイベントのハンドリング
      onClick={onClick} // クリックイベントのハンドリング
      // style={{ cursor: 'pointer' }} // マウスカーソル出す
    >
      ボタン
    </div>
  );
}

// buttonならこれだけでOK
const CustomButton = ({ onClick }) => {
  return (
    <button
      onClick={onClick} // クリックイベントのハンドリング
      // style={{ cursor: 'pointer' }} // マウスカーソル出す
    >
      ボタン
    </button>
  );
}

光の点滅は危険

光の点滅を繰り返すと、光感受性発作等を誘発しやすくなります。1秒に 3回を超える点滅するコンテンツを作ってはいけません。（これは適合レベル AAA 達成基準 2.3.2の説明ですが、非干渉の達成基準 2.3.1は適合判断が難しいため、達成基準 2.3.2に適合させることを推奨します）

要素の表示、非表示による点滅は、cssの @keyframesとopacity、発光に関してはbox-shadowを白くして工夫すれば作れてしまいます。(サンプルコードは載せません)
かなり目立つので、LP上などでやりたくなるかもしれませんが、これは避けるべきです。
ポケモンショックという問題が起こりましたね。
wikiによると4秒間で106回点滅(めちゃ早い)、651人が病院に搬送され、そのうち130人以上が入院したようです。
「1秒に2回ならいいじゃん！」という意見も出そうですが...そもそも回数の問題ではないと思います。そこまでして点滅にこだわる必要ないですよね？別の見せ方にしてください。

自動でコンテンツを切り替えない

スライドショーや自動で切り替わるコンテンツなどがある場合は、一時停止、非表示、停止の機能を設置する必要があります。画面上に動き続けるコンテンツがあると、他の箇所の操作や閲覧を妨げられる利用者がいるためです。

画面上に動き続けるコンテンツがあると、他の箇所の操作や閲覧を妨げられる利用者がいる とはどのような方々でしょうか。ここでは4つの例を集めてみました。
下記のような方々のためにも、WCAG 2.0の達成基準として一時停止、停止、非表示 がありますので、必ず組み込みましょう。

注意力の障害を持つ利用者

注意力障害を持つ人々にとって集中を妨げる可能性があります。画面上の動きに簡単に気を取られ、本来の目的からそれてしまうかもしれません。

視覚障害者

スクリーンリーダーを使用している視覚障害者は、自動で更新されるコンテンツによって読み取りが中断されたりすることが予想できます。リアルタイムニュースなど、情報が常に更新されるようなコンテンツは、追跡が困難になる可能性もありますね。

学習障害や認知障害を持つ利用者

新しい情報を処理するのに時間がかかってしまう、情報を一度に少量ずつ理解していく方にとって、自動的にコンテンツが更新されることは理解を妨げる可能性があります。

ご年配のユーザー

ご年配のユーザーは急速な情報の変化の対応に時間がかかる場合があります。
自動で変化するコンテンツがこれに当てはまります。

上記以外のユーザー

上記に当てはまらないユーザーでも、煩わしさを感じたりもするでしょう。
スワイプ操作で通り過ぎたスライドを再度見たいと考える方もいるはずです。

今回は達成しないと利用者に重大な悪影響を及ぼすもの（重大） を見ていきました。
「かっこいいから」「上司に言われたから」といった理由でウェブアクセシビリティを達成できていない実装をしてしまうこともあるかもしれません。
HTML,CSSでレイアウトを組めるようになったぞ！という方は、ぜひwebアクセシビリティの理解も深めておいてください！(私も勉強中)

ウェブアクセシビリティ 導入ガイドブックを読み進める