アクセシビリティ — div にクリックを付けた日から、誰かが使えなくなる

What — HTML の要素には、見た目以外のものが付いている

要素を選ぶことは、見た目を選ぶことではありません。振る舞いと意味を選ぶことです。

<div class="btn" onclick="...">
送信する
</div>

付いてくるもの:
（なし）

セマンティクス

要素が持つ意味。見出し、ボタン、一覧など。支援技術はこれを読む。

フォーカス

いまキーボードの操作対象になっている要素。Tab キーで移動する。

スクリーンリーダー

画面の内容を音声で読み上げるソフト。見出しやボタンの構造を頼りに移動する。

WAI-ARIA

HTML だけでは表せない意味や状態を補う属性群。`role` や `aria-*`。

アクセシブルな名前

支援技術がその要素を何と読むか。テキスト、`aria-label` などから決まる。

ARIA は「HTML で足りないとき」に使うもの

role="button" を付ければ、読み上げは「ボタン」になります。しかしそれだけでは押せません。

<!-- 読み上げは直るが、まだ操作できない -->
<div role="button" onclick="...">送信する</div>

<!-- フォーカスも自分で足す -->
<div role="button" tabindex="0" onclick="..."
     onkeydown="Enter と Space を自分で処理">送信する</div>

button と書けば1行で済むものを、3つの属性と自前のキー処理で再現しています。 しかも再現しきれていない部分が残ります（disabled の挙動、フォーム送信との連携など）。

**ARIA の第一のルールは「ARIA を使わないこと」**です。ネイティブの要素で表せるなら、そちらを使います。

Why — 「使えない人が、連絡してこない」

影響を受ける人は、報告してこない

冒頭の事故は、2か月間誰も気づきませんでした。

キーボードだけで操作している人、読み上げを使っている人は、一定の割合で存在します。しかし彼らは「使えないサイト」に出会ったとき、たいてい黙って離れます。

• 問い合わせフォーム自体が使えないことがある
• 「自分の環境の問題かもしれない」と思う
• 使えないサイトに時間を使いたくない

苦情の数と、影響を受けた人数は比例しません。 data/soft-delete の退会者と同じで、困っている人ほど連絡してこない構造があります。

一時的にも、状況的にも、誰もが当事者になる

アクセシビリティは「障害のある人のための配慮」と捉えられがちですが、範囲はもっと広い。

キーボードで操作できることは、パワーユーザーにとっての利便性でもあります。フォームを Tab で進んで Enter で送る人は多い。

法令の要求が増えている

日本でも、事業者による合理的配慮の提供が義務化されています（2024年4月、改正障害者差別解消法）。Web サイトがその対象にどこまで含まれるか、どの水準が求められるかは個別の判断になり、私には確定的なことは言えません。

確かなのは、「やらなくてよいもの」から「説明を求められうるもの」に変わったということです。

演習 — まず自分で判断する