` तत्वों का उपयोग करना जिन्हें तालिका जैसा दिखने के लिए स्टाइल किया गया है।

सही:

<table>
  <caption>अक्टूबर 2024 के लिए कैलेंडर</caption>
  <thead>
    <tr>
      <th scope="col">रवि</th>
      <th scope="col">सोम</th>
      <th scope="col">मंगल</th>
      <th scope="col">बुध</th>
      <th scope="col">गुरु</th>
      <th scope="col">शुक्र</th>
      <th scope="col">शनि</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>29</td>
      <td>30</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <!-- अधिक पंक्तियाँ -->
  </tbody>
</table>

2. ARIA विशेषताएँ

ARIA (एक्सेसिबल रिच इंटरनेट एप्लिकेशंस) विशेषताएँ सहायक प्रौद्योगिकियों को अतिरिक्त सिमेंटिक जानकारी प्रदान करती हैं, जिससे इंटरैक्टिव तत्वों के बारे में उनकी समझ बढ़ती है। ARIA विशेषताओं का उपयोग करें:

• भूमिकाएँ परिभाषित करें: तत्वों का उद्देश्य इंगित करें, जैसे कैलेंडर ग्रिड के लिए `role="grid"` और प्रत्येक दिनांक सेल के लिए `role="gridcell"`।
• लेबल प्रदान करें: तत्वों के लिए वर्णनात्मक लेबल प्रदान करने के लिए `aria-label` या `aria-labelledby` का उपयोग करें, खासकर जब दृश्य लेबल अपर्याप्त हो।
• स्थिति इंगित करें: चयनित तिथि को इंगित करने के लिए `aria-selected` जैसी विशेषताओं का उपयोग करें और अक्षम तिथियों को इंगित करने के लिए `aria-disabled` का उपयोग करें।
• विवरण प्रदान करें: किसी तत्व के साथ अतिरिक्त जानकारी संबद्ध करने के लिए `aria-describedby` का उपयोग करें, जैसे कि दिनांक प्रारूप का विवरण।

उदाहरण:

<table role="grid" aria-labelledby="date-picker-label">
  <caption id="date-picker-label">एक तिथि चुनें</caption>
  <thead>
    <tr>
      <th scope="col">रवि</th>
      <th scope="col">सोम</th>
      <th scope="col">मंगल</th>
      <th scope="col">बुध</th>
      <th scope="col">गुरु</th>
      <th scope="col">शुक्र</th>
      <th scope="col">शनि</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td role="gridcell" aria-disabled="true">29</td>
      <td role="gridcell" aria-disabled="true">30</td>
      <td role="gridcell"><button aria-label="October 1, 2024">1</button></td>
      <td role="gridcell"><button aria-label="October 2, 2024">2</button></td>
      <td role="gridcell"><button aria-label="October 3, 2024">3</button></td>
      <td role="gridcell"><button aria-label="October 4, 2024">4</button></td>
      <td role="gridcell"><button aria-label="October 5, 2024">5</button></td>
    </tr>
    <tr>
      <td role="gridcell"><button aria-label="October 6, 2024">6</button></td>
      <td role="gridcell"><button aria-label="October 7, 2024">7</button></td>
      <td role="gridcell"><button aria-label="October 8, 2024">8</button></td>
      <td role="gridcell"><button aria-label="October 9, 2024">9</button></td>
      <td role="gridcell"><button aria-label="October 10, 2024">10</button></td>
      <td role="gridcell"><button aria-label="October 11, 2024">11</button></td>
      <td role="gridcell"><button aria-label="October 12, 2024">12</button></td>
    </tr>
    <!-- अधिक पंक्तियाँ -->
  </tbody>
</table>

नोट: हमेशा वास्तविक स्क्रीन रीडर के साथ परीक्षण करें ताकि यह सुनिश्चित हो सके कि ARIA विशेषताएँ सही ढंग से व्याख्या की गई हैं।

3. कीबोर्ड नेविगेशन

कीबोर्ड नेविगेशन उन उपयोगकर्ताओं के लिए आवश्यक है जो माउस या अन्य पॉइंटिंग डिवाइस का उपयोग नहीं कर सकते। सुनिश्चित करें कि डेट पिकर के भीतर सभी इंटरैक्टिव तत्व कीबोर्ड के माध्यम से सुलभ हैं।

• फोकस प्रबंधन: फोकस क्रम को नियंत्रित करने के लिए `tabindex` विशेषता का उपयोग करें। सुनिश्चित करें कि फोकस डेट पिकर के माध्यम से तार्किक रूप से चलता है। जब उपयोगकर्ता विजेट के साथ इंटरैक्ट करता है तो फोकस को प्रबंधित करने के लिए जावास्क्रिप्ट का उपयोग करें।
• तीर कुंजियाँ: तिथियों के बीच जाने के लिए तीर कुंजियों का उपयोग करके कीबोर्ड नेविगेशन लागू करें। बाएँ और दाएँ तीर कुंजियाँ क्रमशः पिछले और अगले दिनों में जानी चाहिए। ऊपर और नीचे तीर कुंजियाँ क्रमशः पिछली और अगली सप्ताह में उसी दिन जानी चाहिए।
• होम और एंड कुंजियाँ: होम कुंजी वर्तमान सप्ताह के पहले दिन में जानी चाहिए, और एंड कुंजी वर्तमान सप्ताह के अंतिम दिन में जानी चाहिए।
• पेज अप और पेज डाउन कुंजियाँ: पेज अप कुंजी पिछले महीने में जानी चाहिए, और पेज डाउन कुंजी अगले महीने में जानी चाहिए।
• एंटर कुंजी: एंटर कुंजी चयनित तिथि का चयन करना चाहिए।
• एस्केप कुंजी: एस्केप कुंजी डेट पिकर को बंद कर देना चाहिए और फोकस को उस इनपुट फ़ील्ड या बटन पर वापस कर देना चाहिए जिसने इसे ट्रिगर किया था।

उदाहरण (जावास्क्रिप्ट):

// कीबोर्ड नेविगेशन को संभालने का उदाहरण
const datePicker = document.getElementById('date-picker');

datePicker.addEventListener('keydown', function(event) {
  switch (event.key) {
    case 'ArrowLeft':
      // फोकस को पिछले दिन पर ले जाएँ
      break;
    case 'ArrowRight':
      // फोकस को अगले दिन पर ले जाएँ
      break;
    case 'ArrowUp':
      // फोकस को पिछले सप्ताह के उसी दिन पर ले जाएँ
      break;
    case 'ArrowDown':
      // फोकस को अगले सप्ताह के उसी दिन पर ले जाएँ
      break;
    case 'Enter':
      // केंद्रित तिथि का चयन करें
      break;
    case 'Escape':
      // डेट पिकर बंद करें
      break;
  }
});

4. स्क्रीन रीडर संगतता

स्क्रीन रीडर उपयोगकर्ताओं को जानकारी प्रदान करने के लिए सिमेंटिक HTML और ARIA विशेषताओं पर निर्भर करते हैं। सुनिश्चित करें कि आपका डेट पिकर NVDA, JAWS, और VoiceOver जैसे लोकप्रिय स्क्रीन रीडर के साथ संगत है।

• वर्णनात्मक लेबल: सभी इंटरैक्टिव तत्वों के लिए स्पष्ट और संक्षिप्त लेबल प्रदान करें। अतिरिक्त संदर्भ प्रदान करने के लिए `aria-label` या `aria-labelledby` का उपयोग करें।
• स्थिति घोषणाएँ: तत्वों की स्थिति को इंगित करने के लिए ARIA विशेषताओं का उपयोग करें, जैसे कि चयनित तिथि के लिए `aria-selected` और अक्षम तिथियों के लिए `aria-disabled`। स्क्रीन रीडर इन स्थितियों को उपयोगकर्ता को सूचित करेंगे।
• लाइव क्षेत्र: डेट पिकर में गतिशील परिवर्तनों की घोषणा करने के लिए ARIA लाइव क्षेत्रों (उदाहरण के लिए, `aria-live="polite"`) का उपयोग करें, जैसे कि जब उपयोगकर्ता किसी भिन्न महीने में नेविगेट करता है। यह स्क्रीन रीडर को उपयोगकर्ता के कार्यप्रवाह को बाधित किए बिना परिवर्तन के बारे में सूचित करने की अनुमति देता है।
• त्रुटि प्रबंधन: यदि कोई त्रुटियाँ या सत्यापन समस्याएँ हैं, तो स्पष्ट और जानकारीपूर्ण त्रुटि संदेश प्रदान करें जो स्क्रीन रीडर के लिए सुलभ हों। त्रुटि संदेश को संबंधित इनपुट फ़ील्ड से संबद्ध करने के लिए `aria-describedby` का उपयोग करें।

उदाहरण:

<div aria-live="polite">
  <!-- गतिशील सामग्री, जैसे महीने का नेविगेशन -->
</div>

5. दृश्य डिज़ाइन

डेट पिकर का दृश्य डिज़ाइन भी सुलभ होना चाहिए। निम्नलिखित पर विचार करें:

• रंग कंट्रास्ट: WCAG (वेब सामग्री एक्सेसिबिलिटी दिशानिर्देश) 2.1 स्तर AA मानकों को पूरा करने के लिए टेक्स्ट और पृष्ठभूमि रंगों के बीच पर्याप्त रंग कंट्रास्ट सुनिश्चित करें। कंट्रास्ट अनुपात को सत्यापित करने के लिए रंग कंट्रास्ट चेकर टूल का उपयोग करें।
• फोकस संकेतक: सभी इंटरैक्टिव तत्वों के लिए एक स्पष्ट और दृश्यमान फोकस संकेतक प्रदान करें। फोकस संकेतक आसपास के तत्वों से अलग होना चाहिए और अन्य तत्वों द्वारा अस्पष्ट नहीं होना चाहिए।
• फ़ॉन्ट आकार और रिक्ति: पठनीयता और उपयोगिता में सुधार के लिए एक सुपाठ्य फ़ॉन्ट आकार और तत्वों के बीच पर्याप्त रिक्ति का उपयोग करें।
• केवल रंग पर निर्भर न रहें: जानकारी संप्रेषित करने के लिए केवल रंग पर निर्भर न रहें। रंग कोडिंग के पूरक के लिए अन्य दृश्य संकेतों, जैसे आइकन या टेक्स्ट का उपयोग करें।

6. स्थानीयकरण और अंतर्राष्ट्रीयकरण

दिनांक प्रारूप, कैलेंडर सिस्टम और भाषा सम्मेलन विभिन्न संस्कृतियों और क्षेत्रों में भिन्न होते हैं। सुनिश्चित करें कि आपका डेट पिकर वैश्विक दर्शकों का समर्थन करने के लिए ठीक से स्थानीयकृत और अंतर्राष्ट्रीयकृत है।

• दिनांक प्रारूप: एक लचीली दिनांक फ़ॉर्मेटिंग लाइब्रेरी का उपयोग करें जो विभिन्न दिनांक प्रारूपों का समर्थन करती है, जैसे DD/MM/YYYY (यूरोप और एशिया के कुछ हिस्सों में आम) और MM/DD/YYYY (उत्तरी अमेरिका में आम)। उपयोगकर्ताओं को अपनी वरीयताओं के अनुसार दिनांक प्रारूप को अनुकूलित करने की अनुमति दें।
• कैलेंडर सिस्टम: विभिन्न कैलेंडर सिस्टम का समर्थन करें, जैसे ग्रेगोरियन कैलेंडर (सबसे व्यापक रूप से उपयोग किया जाने वाला कैलेंडर) और हिजरी कैलेंडर (कई इस्लामी देशों में उपयोग किया जाता है)।
• भाषा समर्थन: डेट पिकर में सभी टेक्स्ट तत्वों के लिए अनुवाद प्रदान करें, जिसमें महीने के नाम, दिन के नाम और लेबल शामिल हैं।
• दाएँ-से-बाएँ (RTL) समर्थन: सुनिश्चित करें कि डेट पिकर RTL भाषाओं, जैसे अरबी और हिब्रू में ठीक से प्रदर्शित होता है। इसमें विजेट के लेआउट और स्टाइलिंग को समायोजित करने की आवश्यकता हो सकती है।
• समय क्षेत्र: दिनांकों को संभालते समय समय क्षेत्रों के निहितार्थों पर विचार करें। दिनांकों को एक सुसंगत समय क्षेत्र (जैसे UTC) में संग्रहीत करें और उन्हें प्रदर्शित करते समय उपयोगकर्ता के स्थानीय समय क्षेत्र में परिवर्तित करें।

उदाहरण: दिनांक फ़ॉर्मेटिंग और स्थानीयकरण को संभालने के लिए `moment.js` या `date-fns` जैसी जावास्क्रिप्ट लाइब्रेरी का उपयोग करें।

7. मोबाइल एक्सेसिबिलिटी

मोबाइल उपकरणों के बढ़ते उपयोग के साथ, यह सुनिश्चित करना आवश्यक है कि आपका डेट पिकर मोबाइल प्लेटफार्मों पर सुलभ है। निम्नलिखित पर विचार करें:

• टच टारगेट: सुनिश्चित करें कि सभी इंटरैक्टिव तत्वों में मोबाइल उपकरणों पर आसानी से टैप करने के लिए पर्याप्त बड़े टच टारगेट हों। Apple 44x44 पिक्सेल के न्यूनतम टच टारगेट आकार की सिफारिश करता है।
• उत्तरदायी डिज़ाइन: सुनिश्चित करें कि डेट पिकर विभिन्न स्क्रीन आकार और ओरिएंटेशन के अनुकूल हो।
• कीबोर्ड इनपुट: यदि डेट पिकर को कीबोर्ड इनपुट की आवश्यकता है, तो एक मोबाइल-अनुकूल कीबोर्ड प्रदान करें जो दिनांक प्रविष्टि के लिए अनुकूलित हो।
• इशारे: केवल उन इशारों पर निर्भर न रहें जो मोटर अक्षमता वाले उपयोगकर्ताओं के लिए मुश्किल हो सकते हैं। वैकल्पिक इनपुट विधियाँ प्रदान करें, जैसे कीबोर्ड नेविगेशन या ध्वनि नियंत्रण।

परीक्षण और सत्यापन

आपके डेट पिकर की एक्सेसिबिलिटी सुनिश्चित करने के लिए गहन परीक्षण महत्वपूर्ण है। स्वचालित और मैन्युअल परीक्षण विधियों के संयोजन का उपयोग करें:

• स्वचालित परीक्षण: सामान्य एक्सेसिबिलिटी समस्याओं की पहचान करने के लिए एक्सेसिबिलिटी परीक्षण टूल, जैसे एक्स (Axe) या वेव (WAVE) का उपयोग करें।
• मैन्युअल परीक्षण: स्क्रीन रीडर और कीबोर्ड नेविगेशन का उपयोग करके डेट पिकर का मैन्युअल रूप से परीक्षण करें ताकि यह सत्यापित हो सके कि यह विकलांग लोगों द्वारा उपयोग योग्य है।
• उपयोगकर्ता परीक्षण: प्रतिक्रिया प्राप्त करने और सुधार के क्षेत्रों की पहचान करने के लिए विकलांग लोगों के साथ उपयोगकर्ता परीक्षण करें।
• WCAG अनुपालन: सुनिश्चित करें कि आपका डेट पिकर WCAG 2.1 स्तर AA की आवश्यकताओं को पूरा करता है।

एक्सेसिबल डेट पिकर्स के उदाहरण

कई ओपन-सोर्स और व्यावसायिक डेट पिकर लाइब्रेरी अच्छे एक्सेसिबिलिटी समर्थन प्रदान करती हैं। कुछ उदाहरणों में शामिल हैं:

• रिएक्ट डेट पिकर: ARIA समर्थन और कीबोर्ड नेविगेशन के साथ एक लोकप्रिय रिएक्ट घटक।
• एयर डेट पिकर: अच्छी एक्सेसिबिलिटी सुविधाओं के साथ एक हल्का और अनुकूलन योग्य डेट पिकर।
• फुलकैलेंडर: व्यापक एक्सेसिबिलिटी समर्थन के साथ एक पूर्ण-विशेषताओं वाला कैलेंडर घटक।

डेट पिकर लाइब्रेरी चुनते समय, इसकी एक्सेसिबिलिटी सुविधाओं का सावधानीपूर्वक मूल्यांकन करें और सुनिश्चित करें कि यह आपकी विशिष्ट आवश्यकताओं को पूरा करती है।

एक्सेसिबल डेट पिकर्स बनाने के लिए सर्वोत्तम प्रथाएँ

एक्सेसिबल डेट पिकर बनाने के लिए सर्वोत्तम प्रथाओं का सारांश यहाँ दिया गया है:

• डेट पिकर को संरचित करने के लिए सिमेंटिक HTML का उपयोग करें।
• अतिरिक्त सिमेंटिक जानकारी प्रदान करने के लिए ARIA विशेषताओं का उपयोग करें।
• सुनिश्चित करें कि कीबोर्ड नेविगेशन पूरी तरह से लागू है।
• संगतता सत्यापित करने के लिए स्क्रीन रीडर के साथ परीक्षण करें।
• पर्याप्त रंग कंट्रास्ट और स्पष्ट फोकस संकेतक प्रदान करें।
• वैश्विक उपयोगकर्ताओं के लिए डेट पिकर का स्थानीयकरण और अंतर्राष्ट्रीयकरण करें।
• मोबाइल उपकरणों के लिए डेट पिकर को अनुकूलित करें।
• गहन परीक्षण और सत्यापन करें।

निष्कर्ष

एक्सेसिबल डेट पिकर बनाना एक जटिल लेकिन आवश्यक कार्य है। इस मार्गदर्शिका में उल्लिखित दिशानिर्देशों और सर्वोत्तम प्रथाओं का पालन करके, आप समावेशी कैलेंडर विजेट बना सकते हैं जो विविध सांस्कृतिक और तकनीकी परिदृश्यों में सभी क्षमताओं वाले उपयोगकर्ताओं को पूरा करते हैं। याद रखें कि एक्सेसिबिलिटी एक सतत प्रक्रिया है, और यह सुनिश्चित करने के लिए निरंतर परीक्षण और सुधार महत्वपूर्ण हैं कि आपके डेट पिकर समय के साथ सुलभ बने रहें। एक्सेसिबिलिटी को प्राथमिकता देकर, आप सभी के लिए अधिक समावेशी और उपयोगकर्ता-अनुकूल वेब अनुभव बना सकते हैं।

आगे के संसाधन

• WAI-ARIA ऑथरिंग प्रैक्टिसेज गाइड (APG) - कैलेंडर
• वेब कंटेंट एक्सेसिबिलिटी दिशानिर्देश (WCAG) 2.1
• डेक यूनिवर्सिटी