誰でも使えるようにする

div にクリックを付けている。button と a に替える。それだけで、大半は直る。キーボードで使える

<!-- NG -->
<div onclick="open()">開く</div>
<!-- OK -->
<button type="button">開く</button>

消さない。outline の色と太さのほうを変えて、暗い地でも見える形にする。キーボードで使える

<button type="button">操作</button>

:focus-visible {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 2px;
}

:focus ではなく :focus-visible を使う。キーボード操作のときだけ出る。キーボードで使える

<button type="button">操作</button>

:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 2px;
}

CSSで並び順を変えている。DOMの順を直すか、視覚順を戻す。tabindex に正の値は使わない。キーボードで使える

DOMの順を視覚順に合わせる。tabindex="1" 以上は使わない

見出しを大きさで選んでいる。h1からh6を意味の階層で付け直し、大きさはCSSで決める。構造で伝える

<h1>ページタイトル</h1>
<h2>第1章</h2>
<h3>小見出し</h3>

その画像が無かったら代わりに何と書くかを書く。装飾なら alt="" にする。省略はしない。構造で伝える

<img src="chart.png" alt="2024年の売上推移。第3四半期が最高">
<img src="line.svg" alt="" role="presentation">

aria-label で機能名を与える。見えているテキストがあるなら、それと違う名前にしない。ARIA

<button type="button" aria-label="メニューを開く">
  <svg aria-hidden="true">...</svg>
</button>

役割が要素と食い違っている。まず適切なHTML要素に替える。ARIAは足りないときだけ。ARIA

<!-- NG -->
<div role="button">送信</div>
<!-- OK -->
<button type="submit">送信</button>

空のライブリージョンを先に置き、中身だけ差し替える。要素ごと後から足すと検出されない。ARIA

<div id="live" aria-live="polite" aria-atomic="true"></div>
live.textContent = '3件追加しました';

高さを固定している。height をやめて min-height と padding にする。見やすさ

input, select { min-block-size: 2.75rem; padding-block: var(--space-2); }
/* height: 44px; と書くと、文字を大きくしたときに切れる。
   ボタンの基底も同じ組み方で「出発点のCSS」にある */

幅1280pxで400%にするか、幅320pxで開く。横スクロールが出なければよい。見やすさ

/* 幅1280pxで400%拡大、または幅320pxで開く */
document.documentElement.scrollWidth <= window.innerWidth

prefers-reduced-motion で大きな移動と視差を止める。色と不透明度の変化は残す。全部止めない。見やすさ

<div class="anim">…</div>

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

WCAG 2.2 の AA を目標にする。まずコントラスト・キーボード・見出し・代替テキストの4つ。WCAGの構造

目標: WCAG 2.2 AA。コントラスト・キーボード・見出し・alt

WCAGの構造で手順を見る

機械で判定できるのは一部の基準だけ。キーボードで一周し、読み上げで見出しを拾ってみる。検証と完了

キーボードでTab一周 + 読み上げで見出しを拾う

検証と完了で手順を見る