ARIA (Accessible Rich Internet Applications) হল এমন বৈশিষ্ট্যগুলির একটি সেট যা অ্যাক্সেসিবিলিটি সিমান্টিক্স যোগ করে — ভূমিকা, অবস্থা এবং বৈশিষ্ট্য — যা নেটিভ HTML প্রকাশ করতে পারে না। তবে সবচেয়ে গুরুত্বপূর্ণ ARIA নিয়ম হল: প্রথমে নেটিভ HTML পছন্দ করুন।
Save
Save
নেটিভ উপাদানগুলি বিনামূল্যে সঠিক ভূমিকা, কীবোর্ড আচরণ এবং ফোকাস সহ আসে। যখন কোনও নেটিভ উপাদান কাজ করে না তখনই ARIA এর জন্য পৌঁছান।
<!-- 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: স্ক্রিন রিডারদের পৃষ্ঠা পুনরায় লোড ছাড়াই পরিবর্তনশীল সামগ্রী সম্পর্কে অবহিত করা (অনুসন্ধান ফলাফল, টোস্ট, বৈধতা ত্রুটি)।
ভুল ARIA কোনটিই নেই তার চেয়ে খারাপ — এটি স্ক্রিন রিডার ব্যবহারকারীদের মিথ্যা তথ্য দেয়। এবং ARIA শুধুমাত্র সিমান্টিক্স পরিবর্তন করে, কখনো আচরণ নয়: <div> এ role="button" এটিকে ফোকাসযোগ্য বা ক্লিকযোগ্য করে না; আপনাকে নিজেই tabindex এবং কী হ্যান্ডলার যোগ করতে হবে।
95% ক্ষেত্রে সিমান্টিক HTML ব্যবহার করুন; কাস্টম উইজেট (ট্যাব, কম্বোবক্স, মেনু) এর জন্য ফাঁক পূরণ করতে এবং লাইভ অঞ্চলের মাধ্যমে গতিশীল আপডেট ঘোষণা করতে ARIA ব্যবহার করুন।
নিয়মগুলি অনুসরণ করুন — নেটিভকে পছন্দ করুন, নেটিভ সিমান্টিক্স অপ্রয়োজনীয়ভাবে পরিবর্তন করবেন না, অবস্থাগুলি সিঙ্ক রাখুন এবং কখনও এমন একটি ভূমিকা প্রয়োগ করবেন না যা আপনি সম্পূর্ণভাবে প্রয়োগ করেন না।
বিস্তারিত উত্তরসহ IT ইন্টারভিউ প্রশ্নের একটি লাইব্রেরি — জুনিয়র থেকে সিনিয়র পর্যন্ত।
দান করুন