WAI-ARIAは、カスタムUIの意味、状態、値を支援技術へ伝えるための仕様です。
支援技術とは、スクリーンリーダーなど、Webコンテンツの利用を補助するソフトウェアや機器を指します。
ただし、要素にroleやaria-*属性を加えても、入力、フォーカス、キーボード操作は自動では実装されません。
実装時には、属性名を覚えるだけでなく、HTML標準の要素で足りる場面とカスタムUIが必要な場面を区別します。
ARIAロールとHTMLのinputタイプは別のもの
textbox、searchbox、combobox、spinbutton、sliderは、支援技術へ部品の種類を伝えるARIAロールです。
これらは<input type="text">や<input type="range">のようなHTMLのtype属性値ではありません。
HTMLに目的に合う要素がある場合は、まずinput、textarea、selectなどを使います。
標準要素には入力やフォーカスの基本動作が備わっているため、カスタム要素にARIAロールを付ける場合より、必要な実装を少なくできます。
placeholderとaria-placeholderの違い
プレースホルダーは、未入力の欄に表示する短い入力例や形式のヒントです。
入力欄の目的を示すラベルとは役割が異なり、どちらのプレースホルダー属性もラベルの代用にはなりません。
| 比較項目 | placeholder |
aria-placeholder |
|---|---|---|
| 分類 | HTML標準の属性 | WAI-ARIAの属性 |
| 主な対象 | placeholderを利用できるinputとtextarea |
textboxロールと、それを継承するsearchboxロール |
| 画面への表示 | ブラウザが未入力時に表示する | 属性を付けただけでは表示されない |
| 目的 | 入力例や形式を視覚的に示す | カスタム入力欄のヒントを支援技術へ伝える |
| ラベルの代用 | できない | できない |
標準の入力欄ではlabelとplaceholderを併用する
氏名欄なら「お名前」を常に確認できるラベルにし、プレースホルダーには入力例だけを置きます。
<label for="name">お名前</label>
<input id="name" name="name" type="text"
placeholder="例：山田 太郎">この構造なら、入力を始めてプレースホルダーが消えても、欄の目的はラベルで確認できます。
ラベル、入力支援、エラー通知を含む設計は、フォームと入力UIのアクセシビリティで詳しく確認できます。
aria-placeholderはカスタム入力欄の補助に使う
標準のplaceholderを使えないカスタムのテキスト入力欄では、aria-placeholderで入力例を支援技術へ伝えられます。
<span id="message-label">お問い合わせ内容</span>
<div role="textbox"
contenteditable="true"
aria-labelledby="message-label"
aria-multiline="true"
aria-placeholder="例：資料請求について"></div>aria-placeholderは画面に文字を描画しないため、視覚的なヒントが必要なら別途表示します。
カスタム入力欄では、ラベル、フォーカス、入力処理、空欄時のヒント表示を一組として実装し、実際のブラウザと支援技術で確認する必要があります。
主な入力系ロールと必要な状態
| ロール | 表す部品 | 主な状態や属性 | 先に検討するHTML要素 |
|---|---|---|---|
textbox |
自由な文字を入力する欄 | aria-multiline、aria-placeholder |
input、textarea |
searchbox |
検索条件を入力する欄 | aria-placeholder |
input type="search" |
combobox |
候補を示すポップアップを伴う入力部品 | aria-expanded、aria-controls、aria-autocomplete |
用途に応じてselectなど |
spinbutton |
一定の範囲や候補から値を増減する入力部品 | aria-valuenow、aria-valuemin、aria-valuemax、aria-valuetext |
input type="number" |
slider |
範囲内の値をつまみで選ぶ部品 | aria-valuenow、aria-valuemin、aria-valuemax、aria-valuetext、aria-orientation |
input type="range" |
textboxとsearchbox
textboxは文字入力欄を表し、searchboxは検索条件の入力に用途を絞ったロールです。
複数行の入力ならaria-multiline="true"を使いますが、この属性だけで改行できるようになるわけではありません。
通常のフォームでは、単一行にinput、複数行にtextarea、検索にinput type="search"を選ぶと、HTMLだけで意図を表しやすくなります。
combobox
comboboxは、値を扱う入力部品と候補を示すポップアップを組み合わせた部品です。
aria-expandedはポップアップの開閉状態を表し、aria-controlsは操作対象となるポップアップを関連付けます。
候補を表示するだけでは足りず、矢印キーによる候補移動、選択結果、フォーカス、開閉状態を同じ動作に合わせて更新します。
したがって、静的なHTMLだけをコピーしても、操作できるcomboboxにはなりません。
spinbutton
spinbuttonは、商品数量のように値を増減する入力部品です。
aria-valuenowで現在値を示し、範囲が決まっている場合はaria-valueminとaria-valuemaxも設定します。
数値だけでは意味が伝わりにくい場合は、aria-valuetextで「数量2」のような読みやすい値を補います。
上矢印キーと下矢印キーで値を変更できるようにし、必要に応じてHome、End、PageUp、PageDownも実装します。
slider
sliderは、音量や明るさのように一定範囲の値を選ぶ部品です。
現在値、最小値、最大値をARIA属性で表し、縦向きの場合はaria-orientation="vertical"を指定します。
矢印キーで値を増減し、HomeとEndで範囲の先頭と末尾へ移動できるようにします。
ドラッグ操作だけにするとキーボード利用者が値を変更できないため、同じ機能を複数の入力方法で使えるようにします。
カスタム入力部品の実装チェックリスト
ARIAロールを使う場合は、属性だけでなく操作と状態更新まで確認します。
- 目的に合うHTML標準要素で実装できないかを先に検討する。
- 表示されたラベルと入力部品をプログラム上も関連付ける。
Tabキーで部品へ移動でき、フォーカス位置を目で確認できるようにする。- ロールごとに求められるキーボード操作とフォーカス表示を実装する。
- 値や開閉状態が変わるたびに、対応する
aria-*属性も更新する。 - プレースホルダーをラベルの代わりにせず、入力後も項目の目的を確認できるようにする。
- キーボードだけの操作に加え、スクリーンリーダーの読み上げでも名前、役割、状態、値を確認する。
実装方法を選ぶ基準
- 標準の入力要素で足りる場合：HTMLの
input、textarea、selectを使い、常に確認できるラベルを付けます。 - 入力例を短く示す場合：標準要素では
placeholderを補助として使い、カスタムのtextboxまたはsearchboxでは必要に応じてaria-placeholderを使います。 - カスタム部品が必要な場合：適切なロールを選び、フォーカス、キーボード操作、状態更新、見た目を一体として実装します。
- 公開前：ブラウザの表示だけで判断せず、キーボードと支援技術を使って操作を確認します。
ARIAはHTML標準の動作を置き換える機能ではなく、カスタムUIの意味や状態を補う仕組みです。
標準要素を優先し、プレースホルダーをラベルから分け、操作とARIA属性を同期させることで、入力欄の目的と現在の状態を伝えやすくなります。
既存サイトのフォームやカスタムUIを点検したい場合は、UUU ウェブアクセシビリティツールの詳細もご覧ください。