1.3.6 目的の特定

要件

入力欄、ボタン、リンクなどの目的（意味）を明示するために、次のようなセマンティックな情報付加が求められます。

• ARIA属性（aria-label、aria-labelledby）
• HTML5の意味的要素（<nav>, <main>, <header>, <button>など）
• autocomplete属性
• マイクロデータ / RDFa / JSON-LDによるマークアップ

具体例

例①：通貨フィールド

<label for="amount">金額（円）</label>
<input id="amount" name="amount" type="text" aria-describedby="currency" inputmode="numeric">
<span id="currency">JPY - 日本円</span>

支援技術が「これは金額の入力欄である」と理解できるようになっています。

例②：日付入力フィールド

<label for="birthday">誕生日</label>
<input id="birthday" name="birthday" type="date" autocomplete="bday">

autocomplete=”bday”により、「これは生年月日を入力する欄である」と機械が認識できます。

例③：アイコンボタン

<button aria-label="検索">
  <svg aria-hidden="true"><use href="#icon-search"/></svg>
</button>

見た目は虫眼鏡アイコンでも、aria-label=”検索” によりスクリーンリーダーが読み上げ可能になります。

利点

スクリーンリーダーの補助

UIの目的を正確に伝え、誤操作を防ぐ

自動化・AI対応

ユーザー補助技術や検索エンジンがより正確に内容を理解可能

モバイル補助入力対応

自動補完や入力支援が的確に動作する

再利用性の向上

コンポーネントの目的が明確になり、設計の一貫性を担保できる

対象となる要素例

• 名前、電話番号、メール、住所などのフォーム
• 「×（閉じる）」「検索」「メニュー」などのアイコンボタン
• 国・地域、通貨、日時などのコンテンツ情報

注意点

• ユーザーが操作するすべてのコンポーネントについて「何のためのものか」がプログラムから理解できるようにする
• セマンティックなHTMLを基本に、必要に応じてARIA属性を併用する

一覧に戻る