स्थितियाँ और गुण: विस्तृत, चयनित, अक्षम

Role बताती है कि कोई element क्या है। States और properties बताते हैं कि वह अभी कैसे व्यवहार कर रहा है: क्या वह खुला, checked, व्यस्त या अनुपलब्ध है?

जब user interaction करता है, तो state बदलती रहती है, जैसे expanded का toggle होना। Property आमतौर पर स्थिर रहती है, जैसे किसी control का required flag।

aria-expanded users को बताता है कि किसी control का region खुला है या नहीं। हर बार state बदलने पर आपको इसे JavaScript में बदलना होगा।

aria-checked बताता है कि custom checkbox या switch चालू है या नहीं। Native checkbox यह जानकारी पहले से अपने-आप बता देता है।

वास्तविक form controls पर HTML का disabled attribute उन्हें focus से हटा देता है और अपने-आप unavailable के रूप में घोषित करता है।

aria-disabled custom control को disabled के रूप में घोषित करता है, लेकिन clicks को नहीं रोकता। आपको code में action रोकना फिर भी आवश्यक है।

aria-selected tablist, listbox या grid में चुने गए item को चिह्नित करता है, ताकि users जान सकें कि इस समय कौन-सा विकल्प सक्रिय है।

Toggle button चालू या बंद होने की जानकारी देने के लिए aria-pressed का उपयोग करता है, जैसे bold button, जो text के bold रहने तक प्रकाशित रहता है।

सबसे आम bug है: पुरानी states। यदि दृश्य बदल जाए, लेकिन aria-expanded false ही रहे, तो screen reader users को गलत जानकारी सुनाई देगी।

कुछ states में संख्याएँ होती हैं। Slider अपनी position aria-valuenow से बताता है, और range के लिए aria-valuemin तथा aria-valuemax का उपयोग करता है।

Form की दो उपयोगी properties: aria-required अनिवार्य रूप से भरने वाले field को चिह्नित करता है, और aria-invalid बताता है कि कोई field validation में विफल रहा।

आपने सीखा कि states और properties किसी element की स्थिति का वर्णन करती हैं। Native attributes को प्राथमिकता दीजिए और ARIA states को हमेशा UI के साथ sync रखिए।