Webアクセシビリティを、実例で理解する

<img src="graph_2024_fix2.png">
← alt がない。ファイル名が読み上げられる

<img src="graph_2024_fix2.png"
     alt="四半期別の売上推移。第1四半期から第4四半期まで
          一貫して増加し、第4四半期が最も高い。">
装飾だけの画像は alt="" にして読み飛ばさせる。
長さの目安は80字程度。図に大量の文字があるなら
本文に書き起こすことを検討する

<div style="font-size:24px;font-weight:bold">
  サービスの特長
</div>
← 見た目は見出し。機械には「単なる文字」

<h2>サービスの特長</h2>
  <h3>1. 導入がはやい</h3>
大きさは CSS で調整する。レベルは飛ばさない

<!-- 凡例を色の四角だけで示す -->
<span class="legend" style="background:#1a7f37"></span> 東日本
<polyline stroke="#1a7f37" />

<!-- 線の形も変え、名前を線のそばに置く -->
<polyline stroke="#1a7f37" stroke-dasharray="9 6" />
<circle r="4.2" fill="#1a7f37" />
<text x="372" y="30">東日本</text>
色は補助。形と文字で見分けられるようにする

.note { color: #b9c0bc; }  /* 1.9:1 */

.note { color: #5b6661; }  /* 6.0:1 */
通常の文字は 4.5:1 以上。
18.66px 以上の太字か 24px 以上なら 3:1 以上

<div class="btn" onclick="submit()">申し込む</div>
← Tab で止まらない／Enter で押せない／
   読み上げでボタンだと分からない

<button type="button" onclick="submit()">申し込む</button>
div にするなら tabindex="0" role="button" と
キー操作の処理を自前で全部書くことになる。
最初から button を使うほうが速くて安全

<title>株式会社◯◯｜総合サイト</title>
← 全ページ共通のテンプレートのまま

<title>料金プラン｜株式会社◯◯</title>
固有の情報を先頭に。SPA ではページ遷移のたびに
document.title を更新する。
タイトルとページの大見出し(h1)を揃えると、
利用者は「目的のページに来た」と確信できる

料金プランについては <a href="/price">こちら</a>

<a href="/price">料金プランを見る</a>
デザイン上どうしても「こちら」にするなら
aria-label で補う。可能なら文言自体を直す。
リンク先がPDFや別ウィンドウなら、それも文言に含める

button:focus { outline: none; }
← 代わりを用意していない

:focus-visible {
  outline: 3px solid #009652;
  outline-offset: 3px;
}
:focus-visible ならマウスクリック時には出ず、
キーボード操作のときだけ表示される

<input type="text" placeholder="お名前">
← 入力すると消える。ラベルの代わりにならない

<label for="name">お名前</label>
<input type="text" id="name" placeholder="例：山田 太郎">

<label>メールアドレス<span class="req">*</span></label>

<label for="mail">メールアドレス
  <span class="badge">必須</span>
</label>
<input id="mail" type="email" required>

<input type="text" autocomplete="off">

<input type="email" autocomplete="email">
<input type="tel"   autocomplete="tel">
<input type="text"  autocomplete="postal-code">

<label>メールアドレス</label><input>
<label>メールアドレス（確認用）</label><input onpaste="return false">

<input type="checkbox" id="same" checked>
<label for="same">請求先住所は配送先と同じ</label>
確認用欄は廃止し、送信前に確認画面を出す。
貼り付けは禁止しない

<p class="error">入力内容に誤りがあります</p>
← 読み上げに通知されない／原因が書いていない

<div role="alert">
  1件の入力を確認してください
  <a href="#mail">メールアドレスの形式が正しくありません</a>
</div>
<input id="mail" aria-describedby="mail-err">
<p id="mail-err">@ が含まれていません。例：yamada@example.com</p>
送信後は summary.focus() でエラー箇所へ移動させる

<div class="acc-head" onclick="toggle()">質問</div>

<button class="acc-head" aria-expanded="false">質問</button>
いちばん簡単なのはネイティブ要素を使うこと
<details><summary>質問</summary>回答</details>

<span class="tab" onclick="show(0)">月額プラン</span>

<div role="tablist" aria-label="料金プラン">
  <button role="tab" aria-selected="true"
          aria-controls="p0" tabindex="0">月額プラン</button>
  <button role="tab" aria-selected="false" tabindex="-1">年額プラン</button>
</div>
<div role="tabpanel" id="p0"> … </div>
左右の矢印キーで選択を移す処理を書く

<div class="modal" style="display:block"> … </div>
← フォーカスが背後に抜ける／Esc が効かない／
   開いたことが読み上げに伝わらない

<dialog id="dlg" aria-labelledby="dlg-h"> … </dialog>
dlg.showModal();
dlg.addEventListener('close', () => opener.focus());
自前で作る場合は、開閉時のフォーカス移動・
Tab の閉じ込め・Esc・aria-modal をすべて実装する

setInterval(next, 2500);
← 止める手段がない

<button aria-pressed="false">再生する</button>
@media (prefers-reduced-motion: reduce) {
  アニメーションを止める
}

.icon-btn { width: 20px; height: 20px; }

.icon-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}