WAI-ARIA の input タイプとプレースホルダー属性の徹底解説

はじめに

ウェブアクセシビリティは、すべてのユーザーが平等にウェブコンテンツを利用できるようにするための重要な取り組みです。特に、フォーム要素やテキスト入力フィールドのアクセシビリティ向上は、ユーザー体験を向上させるうえで欠かせません。この記事では、WAI-ARIA における input タイプの活用方法を深掘りし、aria-placeholder 属性と HTML 標準の placeholder 属性の違い、さらには spinbutton や slider といったコンポーネントのアクセシブルな実装方法について詳しく解説します。

WAI-ARIA の input タイプ

WAI-ARIA におけるロールの役割

WAI-ARIA は、HTML 標準の機能では補いきれないカスタムUIコンポーネントにアクセシビリティ情報を追加するために設計されています。textbox、combobox、spinbutton、slider などの WAI-ARIA ロールを使用することで、支援技術がコンポーネントの意味や状態を正しく解釈できるようになります。

主な WAI-ARIA ロールと属性

1. textbox

• 用途: 単一行または複数行のテキスト入力フィールド。
• サポート属性:
  • aria-multiline: 複数行入力が可能かどうかを示す（デフォルト値は false）。
  • aria-placeholder: 入力ヒントを提供。

使用例

<div role="textbox" aria-multiline="true" aria-placeholder="ここに入力してください"></div>

2. searchbox

• 用途: 検索専用の入力フィールド。
• サポート属性:
  • aria-placeholder: 検索内容のヒントを追加。

使用例

<div role="searchbox" aria-placeholder="検索ワードを入力"></div>

3. combobox

• 用途: 入力フィールドと選択リストを組み合わせたUIコンポーネント。
• サポート属性:
  • aria-expanded: リストが展開されているかどうか。
  • aria-haspopup: 関連するメニューやリストの存在を示す。

使用例

<div role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-controls="dropdown1">
  <input type="text" aria-autocomplete="list" />
</div>
<ul id="dropdown1" role="listbox">
  <li role="option">選択肢1</li>
  <li role="option">選択肢2</li>
</ul>

4. spinbutton

• 用途: 数値の増減が可能な入力フィールドを表します。たとえば、商品数量を選択する場合などに適しています。
• サポート属性:
  • aria-valuenow: 現在の値。
  • aria-valuemin: 設定可能な最小値。
  • aria-valuemax: 設定可能な最大値。
  • aria-valuetext: 現在の値を補足する文字列表現（例: 単位を付加する）。

使用例

<div role="spinbutton" aria-valuenow="2" aria-valuemin="1" aria-valuemax="10" aria-valuetext="数量 2"></div>

ポイント

• キーボード操作では、矢印キーや PageUp / PageDown を使って値を変更可能。
• 視覚的なインジケーター（例: 増減ボタン）を追加すると、マウス操作でも直感的に利用できます。

5. slider

• 用途: 値の範囲内で特定の値を選択するためのスライダーコンポーネント。たとえば、音量調節や明るさ設定などで使用されます。
• サポート属性:
  • aria-valuenow: 現在の値。
  • aria-valuemin: 最小値。
  • aria-valuemax: 最大値。
  • aria-orientation: スライダーの方向（horizontal または vertical）。
  • aria-valuetext: 値の補足説明（例: パーセンテージ表示）。

使用例

<div role="slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal"></div>

ポイント

• キーボード操作では、矢印キーや Home / End キーで値を変更できます。
• 視覚的なスライダーハンドルを実装し、ドラッグ操作をサポートすると、マウスユーザーも使いやすくなります。

aria-placeholder と placeholder 属性の違い

placeholder 属性の特徴

• HTML標準属性で、ユーザーに視覚的な入力ヒントを表示します。
• ユーザーが入力を開始すると、プレースホルダーテキストは自動的に消えます。

使用例

<input type="text" placeholder="お名前を入力してください">

課題

• プレースホルダーが消えると再参照ができない。
• 一部の支援技術で適切に読み上げられない場合があります。

aria-placeholder 属性の特徴

• WAI-ARIA 属性で、支援技術に入力ヒントを提供します。
• 視覚的には表示されず、主にカスタムUIコンポーネントで使用されます。

使用例

<div role="textbox" aria-placeholder="お名前を入力してください"></div>

メリット

• 支援技術が正確にヒント情報を取得できる。
• 入力が進んでも属性値として保持される。

aria-multiline のポイント

aria-multiline は、textbox ロールでの入力が単一行か複数行かを支援技術に伝える属性です。

• デフォルト値: false（単一行）。
• 複数行入力の場合は明示的に aria-multiline="true" を指定します。

使用例

<div role="textbox" aria-multiline="true"></div>

使い分けのポイント

1. HTML標準の入力要素の場合

   • まずは placeholder を利用。多くの支援技術やブラウザでサポートされています。

2. カスタムUIコンポーネントの場合

   • 標準の placeholder を使えない場合、aria-placeholder を活用。

3. 視覚的要素の必要性

   • 視覚的なヒントを提供する際は placeholder が便利。
   • 視覚以外の情報提供が必要なら aria-placeholder を追加。

まとめ

WAI-ARIA のロールや属性を適切に活用することで、より多くのユーザーが快適にウェブコンテンツを利用できるようになります。特に、textbox、spinbutton、slider などのロールと、それを補完する属性（aria-placeholder、aria-multiline など）を正しく使用することが重要です。

これらの仕様を理解し、アクセシブルなフォームデザインを追求することで、すべてのユーザーに優しいウェブ体験を提供しましょう。

当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティツールをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。