Frontend Academy · レッスン

ARIAとアクセシビリティ: label、role、aria-*

ラベルをコントロールに関連付け、必要に応じてARIAロールを適用し、スクリーンリーダー対応にaria-labelとaria-describedbyを使います。

「ARIAとアクセシビリティ: label、role、aria-*」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

ARIAとは

ARIA（Accessible Rich Internet Applications）は、UIコンポーネントの目的、状態、プロパティをスクリーンリーダーなどの支援技術に伝えるHTML属性の集合です。特に、ネイティブHTMLに相当するものがないカスタムウィジェットで役立ちます。

ARIAの第一のルール

ネイティブHTML要素や属性で実現できる場合は、ARIAを使わないでください。<button>は常に<div role="button">より優れています。ネイティブHTMLは、それだけでアクセシビリティを提供します。

ランドマークロール

ARIAのランドマークロールを使うと、スクリーンリーダーの利用者はページ内のセクションへ移動できます。ほとんどのロールはセマンティックHTMLから暗黙的に決まります。<main> → role=main、<nav> → role=navigationとなります。セマンティック要素を使っていない場合にのみ、明示的なロールを追加します。

<div role="main">...</div>    <!-- prefer <main> -->
<div role="navigation">...</div>  <!-- prefer <nav> -->
<div role="banner">...</div>      <!-- prefer <header> at page level -->

aria-label

aria-labelは、要素に目に見えないアクセシブルネームを提供します。参照できる目に見えるテキストラベルがない場合に使います。アイコンボタンでよく使用されます。

<button aria-label="Close dialog">×</button>
<a href="/rss.xml" aria-label="Subscribe to RSS feed">
  <img src="rss-icon.svg" alt="">
</a>

aria-labelledby

aria-labelledbyは、ID参照を使って別の要素のテキストをラベルとして指定します。目に見えるラベルがすでに存在する場合は、aria-labelよりもこちらが推奨されます。

<h2 id="billing-title">Billing Information</h2>
<form aria-labelledby="billing-title">
  ...
</form>

aria-describedby

aria-describedbyは、ラベルを補足する追加の説明テキスト（エラーメッセージやヒントなど）を参照します。スクリーンリーダーは最初にラベルを読み上げ、次に説明を読み上げます。

<input id="pass" type="password" aria-describedby="pass-hint">
<p id="pass-hint">Must be at least 12 characters with a symbol.</p>

aria-expandedとaria-haspopup

動的なウィジェットには状態属性が必要です。aria-expandedは、開閉ウィジェット（アコーディオンやドロップダウン）が開いているか閉じているかを示します。状態が変化したときは、JavaScriptで更新してください。

<button aria-expanded="false" aria-controls="menu" id="menu-btn">Menu</button>
<ul id="menu" hidden>...</ul>

<!-- On toggle: -->
btn.setAttribute('aria-expanded', 'true');
menu.removeAttribute('hidden');

aria-hidden

aria-hidden="true"は、要素とそのすべての子要素をアクセシビリティツリーから除外します。目に見えるテキストですでにラベル付けされているSVGアイコンのような装飾要素に使用します。

<button>
  <svg aria-hidden="true" focusable="false">...</svg>
  Save Draft
</button>

ライブリージョン：aria-live

aria-liveは、この領域の変更をスクリーンリーダーに読み上げさせます。politeはユーザーが現在の操作を終えるまで待ちます。assertiveは直ちに割り込みます（控えめに使用してください）。

<div aria-live="polite" aria-atomic="true">
  <!-- Status messages announced when updated -->
  Form saved successfully.
</div>

role="alert"

role="alert"にはaria-live=assertiveが暗黙的に設定されています。このロールを持つ要素にエラーメッセージや重要な通知を挿入すると、スクリーンリーダーが直ちに読み上げます。

const errorEl = document.querySelector('[role="alert"]');
errorEl.textContent = 'Email is required.'; // announced immediately

アクセシブルなフォームエラー

フィールドにエラーがある場合は、aria-invalid="true"を使い、aria-describedbyでエラーメッセージを関連付け、role="alert"の内容を更新します。この3つを組み合わせることで、スクリーンリーダーが必要な情報をすべて伝えられるようになります。

<input id="email" type="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error" role="alert">Please enter a valid email address.</p>

確認問題

目に見えるテキストラベルがない場合に、要素のアクセシブルネームを提供するARIA属性はどれですか？

まとめ：ARIAの基本

ARIAよりもネイティブHTMLを優先します。アイコンボタンにはaria-labelを使います。目に見えるラベルの参照にはaria-labelledbyを使います。ヒントやエラーにはaria-describedbyを使います。開閉ウィジェットにはaria-expandedを使います。装飾コンテンツにはaria-hiddenを使います。動的なステータス更新にはaria-liveを使います。フォームエラーにはaria-invalidとrole=alertを使います。

よくある質問

「ARIAとアクセシビリティ: label、role、aria-*」レッスンは無料ですか？

はい。「ARIAとアクセシビリティ: label、role、aria-*」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「ARIAとアクセシビリティ: label、role、aria-*」で何を学びますか？

ラベルをコントロールに関連付け、必要に応じてARIAロールを適用し、スクリーンリーダー対応にaria-labelとaria-describedbyを使います。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「ARIAとアクセシビリティ: label、role、aria-*」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る