状態とプロパティ：expanded、checked、disabled
コントロールの現在の状態を伝えます。
「状態とプロパティ：expanded、checked、disabled」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
Beyond What, Toward How
A role says what an element is. States and properties say how it currently behaves: is it open, checked, busy, or off-limits?
States Change, Properties Mostly Stay
A state shifts as the user interacts, like expanded toggling. A property tends to stay put, like a control's required flag.
aria-expanded for Toggles
aria-expanded tells users whether a control's region is open. You must flip it in JavaScript every time the state changes.
<button aria-expanded="false">Menu</button>aria-checked for Custom Controls
aria-checked reports whether a custom checkbox or switch is on. A native checkbox already announces this for free.
<div role="switch" aria-checked="true">Dark mode</div>Disabled the Native Way
On real form controls, the HTML disabled attribute removes them from focus and announces them as unavailable automatically.
<button disabled>Submit</button>aria-disabled for the Rest
aria-disabled announces a custom control as disabled, but it does not block clicks. You still must stop the action in code.
<div role="button" aria-disabled="true">Submit</div>aria-selected in Sets
aria-selected marks the chosen item in a tablist, listbox, or grid so users know which option is currently active.
<div role="tab" aria-selected="true">Inbox</div>aria-pressed for Toggle Buttons
A toggle button uses aria-pressed to report on or off, like a bold button that stays lit while text is bold.
<button aria-pressed="true">Bold</button>Keep States in Sync
The number one bug: stale states. If the visual changes but aria-expanded stays false, screen reader users hear the wrong thing.
Values, Not Just Booleans
Some states carry numbers. A slider exposes its position with aria-valuenow, plus aria-valuemin and aria-valuemax for range.
<div role="slider" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>aria-required and aria-invalid
Two helpful form properties: aria-required flags a must-fill field, and aria-invalid announces one that failed validation.
<input aria-required="true" aria-invalid="true">Quick Check
You build a custom accordion button. Which attribute reports whether its panel is open?
Recap: Report the State
You learned states and properties describe an element's condition. Prefer native attributes, and always keep ARIA states in sync with the UI.
よくある質問
「状態とプロパティ：expanded、checked、disabled」レッスンは無料ですか？
はい。「状態とプロパティ：expanded、checked、disabled」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。
「状態とプロパティ：expanded、checked、disabled」で何を学びますか？
コントロールの現在の状態を伝えます。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Web Accessibility Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「状態とプロパティ：expanded、checked、disabled」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このWeb Accessibility Academyレッスンでコードを書いて実行できますか？
はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 第一の原則：悪いARIAよりARIAなし
- ロールは対象が何であるかを定義します
- 状態とプロパティ：expanded、checked、disabled
- アクセシビリティツリーを読んでARIAをデバッグする