Durumlar ve Özellikler: expanded, checked, disabled
Bir denetimin mevcut durumunu bildirin.
Durumlar ve Özellikler: expanded, checked, disabled, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Web Accessibility Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
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.
Sıkça Sorulan Sorular
“Durumlar ve Özellikler: expanded, checked, disabled” dersi ücretsiz mi?
Evet — “Durumlar ve Özellikler: expanded, checked, disabled” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Web Accessibility Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
“Durumlar ve Özellikler: expanded, checked, disabled” dersinde ne öğreneceğim?
Bir denetimin mevcut durumunu bildirin. Web Accessibility Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Web Accessibility Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Web Accessibility Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Durumlar ve Özellikler: expanded, checked, disabled” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Web Accessibility Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Web Accessibility Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- İlk Kural: Kötü ARIA'dansa Hiç ARIA Olmaması İyidir
- Roller Bir Şeyin Ne Olduğunu Tanımlar
- Durumlar ve Özellikler: expanded, checked, disabled
- ARIA Hatalarını Ayıklamak İçin Erişilebilirlik Ağacını Okuma