एक्सेसिबिलिटी: alt, हेडिंग पदानुक्रम, और ARIA

वैकल्पिक टेक्स्ट में महारत हासिल करें, एक ऐसा हेडिंग पदानुक्रम बनाएं जिसमें स्क्रीन रीडर सचमुच नेविगेट कर सकें, और ARIA का उपयोग केवल उन मामलों तक सीमित रखें जहाँ नेटिव HTML कम पड़ जाती है।

9 मिनट · 3 प्रश्न

एक्सेसिबिलिटी कोई ऐसी सजावटी परत नहीं है जिसे प्रोजेक्ट के अंत में जोड़ दिया जाए: यह आपकी HTML की एक संरचनात्मक विशेषता है। सबसे पहले, alt एट्रिब्यूट। अच्छा वैकल्पिक टेक्स्ट अपने संदर्भ में छवि के कार्य का वर्णन करता है, न कि उसकी पिक्सल-दर-पिक्सल दिखावट का। एक सेल्स चार्ट का वर्णन "नीला बार चार्ट" के रूप में नहीं, बल्कि उस जानकारी से किया जाता है जो वह लेकर चलता है। और एक विशुद्ध रूप से सजावटी छवि को एक खाली alt="" मिलना चाहिए: यह स्पष्ट संकेत है जो स्क्रीन रीडर को उसे छोड़ देने के लिए कहता है। एट्रिब्यूट को छोड़ देना सबसे बुरा विकल्प है, क्योंकि तब स्क्रीन रीडर फ़ाइल का नाम बोल देता है।

<img src="sales-chart.png"
     alt="2025 sales: +18% in the last quarter">

<img src="divider-ornament.png" alt="">

दूसरा काम: हेडिंग पदानुक्रम। स्क्रीन रीडर उपयोगकर्ता अधिकांशतः पृष्ठ का मानसिक नक्शा बनाने के लिए एक हेडिंग से दूसरी हेडिंग पर कूदते हैं। इसलिए आपका h1 → h2 → h3 ढाँचा सामग्री की तार्किक संरचना को दर्शाना चाहिए, कभी भी उस दृश्य आकार को नहीं जो आप चाहते हैं। दो अटल नियम: प्रति पृष्ठ एक ही h1, और कोई स्तर छोड़ना नहीं (किसी h2 के ठीक नीचे कोई h4 नहीं)। यदि कोई हेडिंग "बहुत बड़ी" लगती है, तो उसे CSS में ठीक करें, न कि उसके सिमैंटिक स्तर को घटाकर।

<h1>Dashboard</h1>
<section>
  <h2>Statistics</h2>
  <h3>Monthly visits</h3>
  <h3>Conversion rate</h3>
</section>
<section>
  <h2>Exportable reports</h2>
</section>

ARIA तब वैध बनता है जब नेटिव HTML किसी गतिशील अवस्था को व्यक्त नहीं कर सकती: एक मेन्यू जो खुला या बंद है, एक क्षेत्र जो लाइव अपडेट होता है, एक सक्रिय टैब। मुख्य एट्रिब्यूट हैं aria-expanded (खुली/बंद अवस्था), aria-controls (नियंत्रित किए जा रहे एलिमेंट से लिंक), और aria-live (अपडेट की घोषणा)। सिद्धांत याद रखें: नेटिव HTML रोल्स प्रदान करती है, ARIA उन अवस्थाओं और गुणों को भरती है जिन्हें आपका JavaScript समय के साथ बदलता है।

<button aria-expanded="false" aria-controls="menu">
  Menu
</button>
<ul id="menu" hidden>
  <li><a href="/profile">Profile</a></li>
  <li><a href="/settings">Settings</a></li>
</ul>

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. एक विशुद्ध रूप से सजावटी छवि को आपको कैसे संभालना चाहिए?
   • इसे एक वर्णनात्मक alt दें जैसे alt="ornament"
   • इसे एक खाली alt एट्रिब्यूट दें: alt=""
   • alt एट्रिब्यूट को पूरी तरह हटा दें
   • alt के बजाय title का उपयोग करें
2. किसी h2 के नीचे, आप एक दृश्य रूप से हल्की उप-शीर्षक चाहते हैं। आप क्या करते हैं?
   • एक h5, क्योंकि यह डिफ़ॉल्ट रूप से छोटा होता है
   • एक h3 जिसका आकार आप CSS में घटाते हैं
   • एक heading क्लास वाला div
3. ARIA एट्रिब्यूट जोड़ना कब उपयुक्त होता है?
   • हर इंटरैक्टिव एलिमेंट पर, बस सुरक्षित रहने के लिए
   • जब कोई नेटिव HTML एलिमेंट आवश्यक रोल या अवस्था को व्यक्त नहीं करता
   • पृष्ठ की खोज रैंकिंग सुधारने के लिए