業務システムのアクセシビリティ標準｜WCAG 2.2とキーボード操作

アクセシビリティ対応は「特別な利用者のための追加作業」と受け取られがちですが、業務システムでは事情が違います。キーボードだけで完結する画面は、全員にとって速い画面です。対応の主目的は生産性向上だと考えたほうが、社内の合意も取りやすくなります。

まず押さえるべき7項目

この7つを満たすだけで、実務上の指摘の大半は解消します。

キーボード操作の設計

基本のキー割り当て

フォーカスリングを消さない

outline: none は、業務システムにおける最も破壊的な1行です。デザイン上どうしても既定のリングが合わない場合は、代替のスタイルを必ず用意します。

/* NG */
:focus { outline: none; }

/* OK：マウス操作時は控えめに、キーボード操作時は明示 */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

スキップリンク

サイドメニューの項目が多い画面では、Tabキーで本文にたどり着くまでに数十回の操作が必要になります。画面先頭に「本文へスキップ」リンクを置いてください。

<a class="skip-link" href="#main">本文へスキップ</a>

フォームのマークアップ

• `label` の `for` と入力欄の `id` を必ず対応させる（ラベルクリックでフォーカスが入る）
• 必須は `required` 属性と視覚表現の両方で示す
• エラーは `aria-invalid="true"` と `aria-describedby` でメッセージと紐づける
• 関連する項目群は `fieldset` + `legend` でまとめる
• プレースホルダーをラベルの代用にしない

<label for="delivery-date">納品日<span class="req">必須</span></label>
<input id="delivery-date" name="deliveryDate" type="text"
       required aria-invalid="true" aria-describedby="delivery-date-error">
<p id="delivery-date-error" class="field-error">
  納品日は受注日（2026/05/18）以降を入力してください。
</p>

動的な変更を伝える

トーストや検索結果の更新は、画面を見ていない利用者には伝わりません。ライブリージョンを使います。

<!-- 検索結果件数など：操作を妨げず読み上げる -->
<div aria-live="polite" id="result-status">1,248件中 1〜50件を表示</div>

<!-- エラーなど緊急性が高いもの -->
<div aria-live="assertive" role="alert" id="global-error"></div>

ARIAは「使わない」が最初の選択肢

WCAG 2.2 で追加された注目の項目

• フォーカスの非遮蔽：固定ヘッダーやフッターでフォーカス中の要素が隠れないこと。スティッキー要素の多い業務システムでは要注意
• ドラッグ操作の代替：並べ替えなどのドラッグ操作に、クリックやキー操作の代替手段を用意すること
• ターゲットサイズ（最小）：クリック可能領域は24×24px以上（例外あり）
• 冗長な入力の回避：同じ情報を再入力させない。自動入力または選択で補う
• アクセシブルな認証：ログイン時に記憶やパズルを必須にしない

検証の進め方

チェックポイント

• マウスを使わずに一連の業務が完了できる
• フォーカスリングが消されていない
• ボタンが `button`、遷移が `a` で実装されている
• すべての入力欄に label が関連付けられている
• エラーが aria-describedby でメッセージと結びついている
• 固定ヘッダーでフォーカス中の要素が隠れない
• 200%拡大しても操作できる