状态与属性：展开、选中、禁用

A role says what an element is. States and properties say how it currently behaves: is it open, checked, busy, or off-limits?

A state shifts as the user interacts, like expanded toggling. A property tends to stay put, like a control's required flag.

aria-expanded tells users whether a control's region is open. You must flip it in JavaScript every time the state changes.

aria-checked reports whether a custom checkbox or switch is on. A native checkbox already announces this for free.

On real form controls, the HTML disabled attribute removes them from focus and announces them as unavailable automatically.

aria-disabled announces a custom control as disabled, but it does not block clicks. You still must stop the action in code.

aria-selected marks the chosen item in a tablist, listbox, or grid so users know which option is currently active.

A toggle button uses aria-pressed to report on or off, like a bold button that stays lit while text is bold.

The number one bug: stale states. If the visual changes but aria-expanded stays false, screen reader users hear the wrong thing.

Some states carry numbers. A slider exposes its position with aria-valuenow, plus aria-valuemin and aria-valuemax for range.

Two helpful form properties: aria-required flags a must-fill field, and aria-invalid announces one that failed validation.

You build a custom accordion button. Which attribute reports whether its panel is open?

You learned states and properties describe an element's condition. Prefer native attributes, and always keep ARIA states in sync with the UI.