4.1.2 名前 (name)・役割 (role)・値 (value) レベルA 原則4 堅牢
見た目だけのスイッチ
スマートフォンの設定画面でおなじみのオン・オフのスイッチ。Webでは、ただの箱（div）に色を付けて作ることもできます。見た目はちゃんと動きます。でも、画面を見ずに使う人には何が伝わっているでしょうか。
さわってみよう
スイッチをクリックしてみよう。次に、見本の「アカウント」をクリックしてから Tab キーを押し、スイッチで止まるか試そう（見本なのでページは移動しません）。
ためしてみる
読み上げのまね
見本の中で Tab キーを押すと、止まった部品の読み上げ文もここに出ます。
このスイッチは、クリックしたときに色と丸の位置を変えているだけです。何の部品なのか（役割）、何のスイッチなのか（名前）、いまオンかオフか（値）が、プログラムには分かりません。Tab キーでも止まらないので、キーボードだけでは切り替えられません。
直してみよう
足りないものを1つずつ足そう。4つそろったら、スイッチを切り替えて、読み上げが「オン」「オフ」と変わることを確かめよう。
いまのスイッチの HTML
読み上げのまね
見本の中で Tab キーを押したり、スイッチを切り替えたりすると、ここに読み上げ文が出ます。
分かったこと
- 画面の部品には、名前（何のための部品か）、役割（ボタン・スイッチなど何の部品か）、値（オン・オフなどの状態）が必要。これらをプログラムが読み取れるようにし、状態が変わったことも支援技術に伝わるようにする。これが 4.1.2 の求めていること。
- 見た目だけで作った部品は、読み上げソフトにとっては「ただの箱」。画面では動いて見えても、画面を見ずに使う人には何も伝わらない。
- いちばんよいのは、最初から役割や状態、キーボード操作がそなわっている本物の部品（
<button>や<input type="checkbox">）を使うこと。解説書にも、標準の HTML の部品を仕様どおりに使えば、この基準はすでに満たしていると書かれている。今回のように ARIA の属性を足すのは、本物の部品では作れないときの手段と考えよう。 - キーボードだけで操作できることは、別の基準 2.1.1 キーボードで求められている。自分で作った部品は、これも自分で用意しなければならない。
「状態、プロパティ、値」の意味や、ほかの部品の例は、WCAG 2.2 の日本語訳で確かめよう。