ボタン

サンプル

デザイン上の考慮事項

• 長いテキストが入った場合の表示を確認してください。
• 画面幅が狭い場合に、画面からはみ出さないことを確認してください。
• フォーカス時の見た目が意図通りであることを確認してください。（スタイル変更のアリナシなど）
• ボタンは同じページ/画面内で操作を実行する、リンクは別のページ/画面へ遷移する要素です。「リンクなら『＞』アイコンを付与する」など、見た目からボタンとリンクを区別できることを推奨します。

実装上の考慮事項

• 同じページ/画面内で操作を実行する場合はbutton要素、別のページ/画面へ遷移する場合はa要素を使用します。

ボタン

• button要素には、基本的にtype="button"を指定します（type属性のデフォルトはsubmitであるため）

アクセシビリティ上の考慮事項

• キーボードでも操作できることを確認してください（達成基準 2.1.1 キーボード (レベル A)）。
• フォーカスインジケータが正しく表示されることを確認してください（達成基準 2.4.7 フォーカスの可視化 (レベル AA)）。（特にoverflow: hidden;を使用している場合、フォーカスインジケータが隠れてしまうことがあります）
• 要素内のテキストが目的の説明にならない場合、aria-label属性で要素の目的を説明してください（達成基準 4.1.2 名前・役割及び値 (レベル A)）。

ボタン

• トグルボタンにはaria-pressed属性（true/false）を指定して、支援技術にON/OFFの状態を伝えてください（達成基準 4.1.2 名前・役割及び値 (レベル A)）。
• 展開/折り畳みを制御するボタンにはaria-expanded属性（true/false）を指定して、支援技術に開閉の状態を伝えてください（達成基準 4.1.2 名前・役割及び値 (レベル A)）。

リンク

• リンク先を新しいタブやPDFで開く場合は、表示（アイコン、テキストなど）と支援技術（alt属性など）を通して伝えてください。
• 「新しいタブで開く」「PDFで開く」ことをアイコンによって示す場合、代替テキストが設定されていることを確認してください（達成基準 1.1.1 非テキストコンテンツ (レベル A)）