よく使うARIAのレシピ
大きな部品ではなく、どのページにも1つは出てくる小物を4つ集めました。そのまま貼って動きます。
親ページ ARIA の道具「部品から作る」は、タブやダイアログのような組み立てが要る部品を扱います。ここに置いたのは、印を1つ2つ足すだけで済むほうの4件です。
1. 検索フォーム#
実表示 ラベルを持つ検索フォーム
入力欄にラベルが見えていないのは、置き場所がないからです。placeholder は名前になりません。消えるうえに、環境によっては読まれません。
このコードで動いている見本です
このコードで動いている見本です
role="search"はランドマークです。領域の単位で飛べるようになります- ラベルは隠しても、
forとidで結んでおきます - 虫めがねのアイコンだけのボタンにするなら、
aria-label="検索"を足します
2. 通知の領域#
実表示 ライブリージョンへの通知
保存した、3件見つかった、送信に失敗した。焦点を動かさずに伝えたい変化は、ライブリージョンに書きます。空の器を先に置くことが要点です。あとから要素ごと足すと、多くの環境で検出されません。
このコードで動いている見本です
このコードで動いている見本です
| 使う役割 | 割り込み | 何を入れるか |
|---|---|---|
role="status" | しない | 保存の完了、件数、進行の節目 |
role="alert" | する | 送信の失敗、時間切れ、取り消せない結果 |
role="alert" を並べると、読み上げがそのたび途切れます。迷ったら status に寄せます。
3. 展開するボタン#
実表示 状態を属性で持つ開閉
平日15時までのご注文は、当日に発送します。
開閉する要素は、開いているかどうかを属性で持たせます。矢印の向きを CSS で回すだけでは、状態は伝わりません。
このコードで動いている見本です
このコードで動いている見本です
aria-expandedはボタン側に付けます。開く先ではありません- 開く先を隠すのは
hiddenかdisplay: noneです。opacity: 0や画面外への移動では、焦点が見えない要素に入ります - 開閉が
detailsとsummaryで足りるなら、そちらを使います。属性もキー操作も要りません
4. 現在地のナビ#
実表示 現在地を属性で示すナビ
いま見ているページのリンクを、色や太字だけで示している状態です。読み上げには何も伝わりません。
このコードで動いている見本です
このコードで動いている見本です
aria-current="page"を付けた要素は「現在のページ」と読まれます。見た目の指定も、この属性を選択子にすれば一致が崩れません- 現在地のリンクを
<a>から<span>に変えるやり方もありますが、Tab の順序が変わります。押せる要素のまま印を付けるほうが素直です navを複数置くなら、aria-labelで区別します。「メイン」「フッター」「パンくず」
間違えやすいところ#
aria-labelを日本語以外で書く読み上げの言語と食い違い、意味の分からない音になる- 見えているラベルと
aria-labelを別の語にする音声入力で、見えている語では指示できなくなる role="status"の中身をinnerHTMLで丸ごと入れ替える変化として検出されないことがある。テキストだけ差し替えるaria-current="true"をリンクに使うページを指すならpageを書く。trueは種別が分からない