ARIA (Accessible Rich Internet Applications) हे attributes चा एक संच आहे जो accessibility semantics — roles, states, आणि properties — जोडतो जे native HTML व्यक्त करू शकत नाही. परंतु सर्वात महत्वाचा ARIA नियम असा आहे: प्रथम native HTML ला प्राधान्य द्या.
Save
Save
Native elements मुक्त सोबत योग्य roles, keyboard behavior, आणि focus येतात. ARIA साठी केवळ तेव्हाच जा जेव्हा कोणताही native element काम करत नाही.
<!-- 1. Roles — what an element IS (for custom widgets) -->
<div role="tablist"><div role="tab" aria-selected="true">Tab 1</div></div>
<!-- 2. States — current condition (dynamic) -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<input aria-invalid="true" aria-describedby="err" />
<!-- 3. Properties — relationships / labels -->
<input aria-label="Search" />
<div aria-labelledby="heading-id"></div>
<div aria-live="polite">3 results found</div> <!-- screen reader announces updates -->
<div aria-live="assertive" role="alert">Error saving!</div> <!-- interrupts -->
हे खरोखर उपयोगी ARIA आहे: screen readers ला सामग्रीबद्दल सांगणे जे page reload न करता बदलते (search results, toasts, validation errors).
अशुद्ध ARIA काहीही नाहीपेक्षा वाईट आहे — हे screen reader वापरकर्त्यांना खोटी माहिती देते. आणि ARIA केवळ semantics बदलतो, वर्तन नाही: <div> वर role="button" हे focusable किंवा clickable बनवत नाही; तुम्हाला स्वतः tabindex आणि key handlers जोडावे लागतील.
95% प्रकरणांसाठी semantic HTML वापरा; custom widgets (tabs, comboboxes, menus) साठी अंतर भरण्यासाठी आणि live regions द्वारे dynamic updates जाहिर करण्यासाठी ARIA वापरा.
नियमांचे पालन करा — native ला प्राधान्य द्या, native semantics अनावश्यकरित्या बदलू नका, states sync ठेवा, आणि कधीही असा role लागू करू नका ज्याला तुम्ही पूर्णपणे लागू करत नाही.