Состояния и свойства: expanded, checked, disabled
Сообщайте текущее состояние элемента управления.
«Состояния и свойства: expanded, checked, disabled» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения 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/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Состояния и свойства: expanded, checked, disabled»?
Сообщайте текущее состояние элемента управления. Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Состояния и свойства: expanded, checked, disabled»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Первое правило: отсутствие ARIA лучше плохой ARIA
- Роли определяют, чем является объект
- Состояния и свойства: expanded, checked, disabled
- Чтение дерева доступности для отладки ARIA