Semantics、Labels、Roles、Focus
適切なsemanticsを使い、labelとinputを関連付け、rolesを活用し、ユーザーが必要とする場所へfocusを移します。
「Semantics、Labels、Roles、Focus」はCoddyKit上の無料React Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全3レッスンが含まれています。
アクセシビリティの基本を学ぶ理由
目標：支援技術がUIを理解できるようにします。
- 実際の要素（button、nav、form）を使用します
- 入力に適切なラベルを付けます
- 操作の流れに合わせてフォーカスを管理します
セマンティクスとロールの概要
- ネイティブのセマンティクスを優先：divではなくbuttonを使用します
- 暗黙のロールは実際の要素によって提供されます
- ネイティブのセマンティクスで不十分な場合にのみARIAを追加します
ラベル付き入力（良い例）
関連付けられたラベルと、フィードバック用のライブリージョンを備えた入力を作成します。
<div id="root"></div>
ボタンとトグルの状態
実際のボタンを使用し、トグルの状態をaria-pressedで公開します。
<div id="root"></div>
開いたときにフォーカスする（良いUX）
新しく開いたパネルにフォーカスを移動し、キーボードユーザーがすぐに入力を開始できるようにします。
<div id="root"></div>
ヒントと落とし穴
- ネイティブ要素を優先し、必要な場合にのみARIAを追加します
- ラベルによって入力に信頼できる名前が付与されます
- オーバーレイを開くときや画面遷移後にフォーカスを管理します
ラベル付けのベストプラクティス
まとめ
まとめ：実際のセマンティクスを使用し、ラベルを入力に関連付け、必要に応じてロール/ARIAで状態を公開し、ユーザーが次に操作する場所へフォーカスを移動します。
よくある質問
「Semantics、Labels、Roles、Focus」レッスンは無料ですか？
はい。「Semantics、Labels、Roles、Focus」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全3レッスンが含まれています。
「Semantics、Labels、Roles、Focus」で何を学びますか？
適切なsemanticsを使い、labelとinputを関連付け、rolesを活用し、ユーザーが必要とする場所へfocusを移します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。
「Semantics、Labels、Roles、Focus」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Semantics、Labels、Roles、Focus
- キーボード操作とSkip Link
- A11yテスト入門