WordPress के लिए WCAG 2.2 ऑडियो अनुपालन: 2026 गाइड

WordPress ऑडियो को कम से कम चार WCAG 2.2 सफलता मानदंड पूरे करने होते हैं: 1.4.2 Audio Control, 2.1.1 Keyboard, 2.5.8 Target Size (2.2 में नया) और 4.1.2 Name, Role, Value। European Accessibility Act, जो 28 जून 2025 से लागू है, EU ग्राहकों को सेवा देने वाली किसी भी साइट के लिए इसे कानूनी रूप से ज़रूरी बनाता है। डिफ़ॉल्ट WordPress ऑडियो प्लेयर और अधिकांश थर्ड-पार्टी ऑडियो प्लगइन बिना बदलाव के इनमें से कई आवश्यकताएँ पूरी नहीं करते।

यह गाइड वही व्यावहारिक चेकलिस्ट है जो हम Mementor में WordPress साइटों का WCAG 2.2 ऑडिट करते समय इस्तेमाल करते हैं। हम ऑडियो के दोनों पहलुओं को कवर करते हैं: कंटेंट के रूप में ऑडियो जिसके अपने एक्सेसिबिलिटी नियम हैं, और टेक्स्ट कंटेंट के लिए एक्सेसिबिलिटी फीचर के रूप में ऑडियो।

2026 में ऑडियो अनुपालन क्यों ज़रूरी है

2025 में तीन बड़े बदलाव एक साथ आए जिन्होंने इसे तत्काल विषय बना दिया। EAA ने 28 जून 2025 से प्रवर्तन शुरू किया। WebAIM Million 2025 रिपोर्ट में पाया गया कि 96.3% होम पेज में WCAG की खामियाँ थीं। अमेरिका में ADA मुकदमेबाज़ी बढ़ती रही और उस साल दर्ज 4,000 से अधिक वेब एक्सेसिबिलिटी मामलों में WordPress साइटें प्रमुखता से सामने आईं।

हमारे ऑडिट में एक जैसा पैटर्न बार-बार दिखता है। साइट मालिक मान लेते हैं कि उनकी थीम एक्सेसिबिलिटी का ध्यान रखती है। थीम जो कुछ ऑडियो प्लगइन देता है वही अपना लेती है। ऑडियो प्लगइन ऐसे बटन देता है जो बहुत छोटे होते हैं, ऐसे स्लाइडर जो कीबोर्ड यूज़र को फँसा देते हैं, और कंट्रास्ट रेशियो जो पहली मैनुअल जाँच में फेल हो जाते हैं।

WCAG 2.2 ऑडियो चेकलिस्ट: पूरी जानकारी

WordPress साइट पर ऑडियो से सीधे जुड़े आठ सफलता मानदंड हैं। नीचे दी गई तालिका हर एक को व्यावहारिक अर्थ के साथ मैप करती है, बताती है कि डिफ़ॉल्ट WordPress ऑडियो क्या सही करता है और क्या गलत, और TTSWP प्लेयर इसे कैसे संभालता है। NEW से चिह्नित मानदंड अक्टूबर 2023 में WCAG 2.2 के साथ आए।

W3C का Media Accessibility User Requirements पेज इन मानदंडों का आधिकारिक स्रोत है। हम इन आठ पर ध्यान केंद्रित करते हैं क्योंकि ये सीधे ऑडियो प्लेयर पर लागू होते हैं। कैप्शन (1.2.2) और ऑडियो डिस्क्रिप्शन (1.2.3) भी प्रासंगिक हैं लेकिन वे वीडियो पर लागू होते हैं, शुद्ध ऑडियो नैरेशन पर नहीं।

टेक्स्ट के लिए मीडिया विकल्प का अपवाद

यह वह नियम है जिसे 95% अनुपालन लेख छोड़ देते हैं। WCAG एक media alternative for text को ऐसा मीडिया मानता है जो टेक्स्ट में पहले से मौजूद जानकारी से अधिक कुछ नहीं देता। जब TTS नैरेशन किसी मौजूदा लेख को पढ़ता है, तो ऑडियो पेज टेक्स्ट का मीडिया विकल्प है। पेज टेक्स्ट खुद ट्रांसक्रिप्ट है।

इसका मतलब है कि किसी लेख के TTS ऑडियो संस्करण को अलग ट्रांसक्रिप्ट फ़ाइल की ज़रूरत नहीं। WebAIM इसे स्पष्ट रूप से समझाता है। शर्त यह है कि ऑडियो को स्पष्ट रूप से लेबल किया जाए ताकि यूज़र समझें कि इसे छोड़ने पर वे कोई जानकारी नहीं खो रहे। जैसे कि "इस लेख को सुनें" या "इस पोस्ट का ऑडियो संस्करण" जैसा लेबल इसे पूरा करता है।

यह अपवाद तब लागू नहीं होता जब ऑडियो में कमेंट्री, अर्थपूर्ण म्यूज़िक, या टेक्स्ट में न मिलने वाले हिस्से हों। पेज कंटेंट की शुद्ध नैरेशन इसके लिए योग्य है। प्रकाशक क्लाइंटों को सलाह देते समय हम इस पर नियमित रूप से भरोसा करते हैं, जो चिंता करते हैं कि ऑडियो जोड़ने से नई ट्रांसक्रिप्ट ज़िम्मेदारियाँ बनती हैं।

WCAG 2.2 में ऑडियो के लिए क्या नया है

तीन नए Level AA मानदंड ऑडियो प्लेयर को सीधे प्रभावित करते हैं।

2.5.8 Target Size (Minimum)

हर इंटरैक्टिव कंट्रोल का टारगेट कम से कम 24 x 24 CSS पिक्सेल होना चाहिए। यही वह मानदंड है जो सबसे अधिक WordPress ऑडियो प्लगइन को फेल करता है। थर्ड-पार्टी ऑडियो प्लगइन चलाने वाली WordPress साइटों के हमारे ऑडिट में, स्किप-बैक और स्किप-फॉरवर्ड बटन लगातार इस थ्रेशोल्ड से कम पाए जाते हैं। WCAG 2.2 में 24-पिक्सेल नियम आने से पहले विज़ुअल डिज़ाइनरों ने कॉम्पैक्टनेस को प्राथमिकता दी थी, और कम प्लगइन मेंटेनर ने इसे अपडेट किया है। डिफ़ॉल्ट थीम स्टाइल कभी-कभी टारगेट को और छोटा कर देती हैं।

इसका हल आमतौर पर आइकन साइज़ नहीं, बल्कि पैडिंग है। हर तरफ 4 पिक्सेल पैडिंग वाले बटन में 16-पिक्सेल SVG आइकन विज़ुअल को बदले बिना 24-पिक्सेल थ्रेशोल्ड पूरा करता है।

2.4.11 Focus Not Obscured

पेज के नीचे स्टिकी ऑडियो बार कीबोर्ड यूज़र जिस पर फोकस कर रहा है उसे ढक देता है। अगर फोकस किया गया लिंक बार के पीछे हो, तो मानदंड फेल हो जाता है। इसका समाधान या तो बार को बंद करने योग्य बनाना है, फोकस टारगेट के ऊपर जगह छोड़ना है, या डॉक्यूमेंट पर scroll-padding-bottom का उपयोग करना है ताकि फोकस किए गए एलिमेंट दिखते रहें।

2.5.7 Dragging Movements

कस्टम स्क्रब बार और वॉल्यूम स्लाइडर जो केवल ड्रैग से काम करते हैं, यह मानदंड फेल करते हैं। हर ड्रैग इंटरैक्शन के लिए सिंगल-पॉइंटर विकल्प ज़रूरी है। प्रोग्रेस बार पर क्लिक-टू-पोज़िशन इसे पूरा करता है। सही तरीके से बने role="slider" पर कीबोर्ड एरो-की कंट्रोल भी काम करता है।

असली ऑडिट से सामने आई WordPress ऑडियो की सामान्य खामियाँ

क्लाइंट साइटों पर यही पैटर्न बार-बार दिखता है। हम सबसे अधिक चार खामियाँ देखते हैं।

डिफ़ॉल्ट WordPress core <audio> ब्लॉक ब्राउज़र नेटिव प्लेयर रेंडर करता है। ब्राउज़र-नेटिव ऑडियो कंट्रोल का स्क्रीन रीडर के साथ असंगत व्यवहार का लंबा इतिहास है, और Chrome, Firefox और Safari में प्लेहेड पोज़िशन की एरो-की कंट्रोल अलग-अलग होती है। NVDA या JAWS पर यूज़र अक्सर टाइमस्टैम्प सुनते हैं लेकिन कीबोर्ड से पोज़िशन बदल नहीं पाते। इसका हल यह है कि ऑडियो को एक कस्टम प्लेयर में रैप करें जो उचित ARIA वैल्यू एट्रीब्यूट के साथ role="slider" एक्सपोज़ करे।

प्लगइन प्लेयर 24-पिक्सेल थ्रेशोल्ड से छोटे बटन देते हैं। WCAG 2.2 में यह नियम आने से पहले विज़ुअल डिज़ाइनर ने कॉम्पैक्टनेस को प्राथमिकता दी। थीम तब प्लगइन स्टाइल को ओवरराइड करती है, जो कभी चीज़ें बेहतर बनाती है और कभी बदतर।

स्टिकी ऑडियो बार फोकस किए गए कंटेंट को छुपाते हैं। जिस भी साइट पर स्टिकी फुटर प्लेयर था और कीबोर्ड नेविगेशन की जाँच नहीं हुई थी, वहाँ हमने यह खामी देखी।

वेवफॉर्म का कंट्रास्ट लगातार 4.5:1 से नीचे रहता है। डिज़ाइनर सफेद बैकग्राउंड पर हल्की ग्रे वेव पसंद करते हैं। स्क्रीन रीडर को इससे फर्क नहीं पड़ता, लेकिन कम दृष्टि वाले यूज़र को पड़ता है, और 1.4.3 फेल हो जाता है।

अनुपालन-योग्य ऑडियो प्लेयर बनाना: तकनीकी चेकलिस्ट

1. प्लेयर को role="region" में रैप करें जिसमें उसे बताने वाला aria-label हो।
2. प्ले, पॉज़, स्किप और म्यूट के लिए असली <button> इस्तेमाल करें। क्लिक हैंडलर वाला <div> कभी नहीं।
3. टॉगल स्टेट दिखाने के लिए प्ले बटन पर aria-pressed सेट करें।
4. पैडिंग का उपयोग करके हर कंट्रोल को कम से कम 24 x 24 CSS पिक्सेल का टारगेट दें।
5. स्क्रबर और वॉल्यूम को role="slider" बनाएँ जिसमें aria-valuemin, aria-valuemax और aria-valuenow हो, और एरो की का जवाब दे।
6. नॉन-ड्रैग विकल्प के रूप में स्क्रबर पर क्लिक-टू-पोज़िशन दें।
7. हर टेक्स्ट एलिमेंट और महत्वपूर्ण आइकन का कंट्रास्ट कम से कम 4.5:1 पर जाँचें।
8. फोकस रिंग दिखती रहें और overflow नियमों से क्लिप न हों।
9. अगर प्लेयर स्टिकी है, तो उसके ऊपर फोकस के लिए जगह छोड़ें या उसे बंद करने योग्य बनाएँ।
10. TTS नैरेशन प्लेयर को "इस लेख का ऑडियो संस्करण" लेबल करें ताकि मीडिया विकल्प अपवाद साफ तौर पर लागू हो।

एक न्यूनतम एक्सेसिबल प्ले बटन इस तरह दिखता है।

<div role="region" aria-label="Article audio player">
  <button type="button"
          aria-pressed="false"
          aria-label="Play article narration"
          style="min-width:24px;min-height:24px;padding:8px">
    <svg aria-hidden="true" width="16" height="16">...</svg>
  </button>
  <input type="range"
         aria-label="Playback position"
         min="0" max="100" value="0">
</div>

यही आधार है। बटन को स्टाइल करें, चाहें तो कस्टम ट्रैक के लिए नेटिव range विज़ुअल छुपाएँ, लेकिन अंदर के semantics बनाए रखें।

TTS नैरेशन से समग्र WCAG अनुपालन कैसे बेहतर होता है

ऑडियो केवल एक्सेसिबल बनाने वाला कंटेंट नहीं है। यह खुद एक एक्सेसिबिलिटी फीचर है। विश्व स्वास्थ्य संगठन का अनुमान है कि 1.3 अरब लोग, यानी वैश्विक आबादी का लगभग 16%, किसी महत्वपूर्ण विकलांगता के साथ जीते हैं। इनमें से कई टेक्स्ट कंटेंट तक मल्टीमॉडल पहुँच से लाभान्वित होते हैं: डिस्लेक्सिया, ADHD, कम दृष्टि और विभिन्न संज्ञानात्मक विकलांगता वाले लोग टेक्स्ट के साथ ऑडियो होने पर अधिक आसानी से पढ़ते हैं।

टेक्स्ट टू स्पीच नैरेशन जोड़ना उन कुछ एक्सेसिबिलिटी निवेशों में से एक है जो ऑडिट पास करने से पहले यूज़र की मदद करता है। WordPress में TTS जोड़ना टेक्स्ट टू स्पीच – TTSWP प्लगइन के साथ 15 मिनट से कम में हो जाता है। प्लेयर WCAG 2.1 AA-अनुपालक डिफ़ॉल्ट, 24-पिक्सेल-प्लस टारगेट, कीबोर्ड सपोर्ट और उचित ARIA रोल के साथ आता है।

न्यूनतम रनटाइम पेलोड लगभग 35 से 40 KB gzipped (151 KB अनमिनिफाइड) है, जिसमें JavaScript प्लेयर लॉजिक और शेयर्ड CSS दोनों शामिल हैं। हमने प्लेयर चालू होने पर एक प्रकाशित लेख पर GTmetrix चलाया और Grade A, 93% Performance, 99% Structure, 1.3 सेकंड Largest Contentful Paint, 46 मिलीसेकंड Total Blocking Time और शून्य Cumulative Layout Shift हासिल किया। बंडल केवल उन पेजों पर लेज़ी-लोड होता है जिनमें प्लेयर है, इसलिए बिना ऑडियो वाले स्टैटिक पेजों पर कोई बोझ नहीं।

एक्सेसिबिलिटी डॉक्यूमेंटेशन हमारे accessibility trust पेज पर है। नैरेशन ElevenLabs जनरेटिव इंजन का उपयोग करती है, जो prosody को इतना बेहतर बनाता है कि श्रोता लेख पूरा सुनते हैं बजाय रोबोटिक आवाज़ से ऊबकर छोड़ने के।

व्यवहार में European Accessibility Act

EAA 28 जून 2025 से लागू हो गया। उस तारीख के बाद EU बाज़ार में लाई गई नई डिजिटल सेवाओं को अभी अनुपालन करना होगा। मौजूदा सेवाओं के पास सब कुछ ठीक करने के लिए 28 जून 2030 तक का समय है। यह निर्देश EU ग्राहकों को सेवा देने वाले किसी भी व्यवसाय पर लागू होता है, चाहे वह कहीं भी स्थित हो।

EAA जिस तकनीकी मानक का हवाला देता है वह EN 301 549 है। मौजूदा हार्मनाइज़्ड संस्करण (V3.2.1, अगस्त 2021) WCAG 2.1 Level AA पर आधारित है। नवंबर 2025 में प्रकाशित Draft V4.1.0 WCAG 2.2 के साथ अनुपालन के लिए क्लॉज़ 9, 10 और 11 को अपडेट करता है, जिसकी अंतिम हार्मनाइज़ेशन 2026 में अपेक्षित है। जब तक यह अपडेट EU के Official Journal में संदर्भित नहीं होता, WCAG 2.1 AA कानूनी रूप से बाध्यकारी न्यूनतम बना रहेगा, लेकिन हम अभी से 2.2 को टारगेट करने की सलाह देते हैं क्योंकि यह बदलाव वर्षों नहीं, महीनों दूर है।

जुर्माना सदस्य देश के अनुसार अलग होता है। जर्मनी और फ्रांस में सबसे सक्रिय प्रवर्तन ढाँचा है, जहाँ राष्ट्रीय एक्सेसिबिलिटी अधिकारियों को शिकायतों की जाँच करने और जुर्माना लगाने का अधिकार है। हमने देखा है कि नॉर्वेजियन और जर्मन क्लाइंटों को प्रवर्तन तारीख के कुछ महीनों के भीतर अंतिम यूज़र से औपचारिक शिकायतें मिलती हैं, आमतौर पर ऑडियो और फॉर्म कॉम्पोनेंट के बारे में। जुर्माने से पहले शिकायतें आती हैं, इसलिए अगर टीम तैयार है तो तीस दिन का सुधार विंडो आमतौर पर संभव है।

अनुपालन की जाँच कैसे करें

स्वचालित टूल लगभग 30 से 40 प्रतिशत समस्याएँ पकड़ते हैं। बाकी के लिए मैनुअल टेस्टिंग ज़रूरी है, खासकर कीबोर्ड इंटरैक्शन और डायनामिक स्टेट पर अर्थपूर्ण कंट्रास्ट के लिए।

• NVDA Windows पर Chrome और Firefox के साथ। मुफ्त।
• JAWS Windows पर एंटरप्राइज़ क्लाइंट अपेक्षाओं के लिए।
• VoiceOver macOS और iOS पर। बिल्ट-इन।
• TalkBack Android पर। बिल्ट-इन।
• axe DevTools ब्राउज़र एक्सटेंशन स्वचालित स्कैन के लिए।
• Lighthouse Chrome DevTools में त्वरित जाँच के लिए।
• केवल कीबोर्ड से वॉकथ्रू। माउस हटाएँ और हर प्लेयर कंट्रोल चलाएँ।

केवल कीबोर्ड से वॉकथ्रू सबसे अधिक असरदार एकल परीक्षण है। अगर प्लेयर बिना माउस काम करता है, तो WCAG 2.2 की अधिकांश आवश्यकताएँ पहले से पूरी हो जाती हैं।

अक्सर पूछे जाने वाले सवाल

क्या WCAG 2.2 में ऑडियो पॉडकास्ट के लिए कैप्शन ज़रूरी हैं?

नहीं। कैप्शन (1.2.2) सिंक्रनाइज़्ड ऑडियो वाले प्रीरिकॉर्डेड वीडियो पर लागू होते हैं। पॉडकास्ट जैसे केवल-ऑडियो कंटेंट के लिए प्रासंगिक मानदंड 1.2.1 है, जिसके लिए ट्रांसक्रिप्ट या विस्तृत सारांश जैसे टेक्स्ट विकल्प की ज़रूरत होती है। कैप्शन और ट्रांसक्रिप्ट अलग-अलग उद्देश्य पूरे करते हैं। पॉडकास्ट को ट्रांसक्रिप्ट चाहिए। वीडियो ट्यूटोरियल को विज़ुअल-ओनली जानकारी के लिए कैप्शन और ऑडियो डिस्क्रिप्शन दोनों चाहिए।

क्या EAA के तहत ऑटो-प्ले ऑडियो गैरकानूनी है?

गैरकानूनी नहीं, लेकिन प्रतिबंधित है। WCAG 1.4.2 Audio Control, जिसे EAA EN 301 549 के ज़रिए संदर्भित करता है, की ज़रूरत है कि तीन सेकंड से अधिक अपने-आप चलने वाले किसी भी ऑडियो में पॉज़, स्टॉप या स्वतंत्र वॉल्यूम कंट्रोल का विकल्प हो। उस कंट्रोल के बिना ऑटो-प्ले Level A पर फेल होता है और गैर-अनुपालन की स्थिति बनाता है। अधिकांश प्रवर्तन निकाय इसे बॉर्डरलाइन मामले के बजाय स्पष्ट उल्लंघन मानते हैं।

क्या मेरे लेख का ऑडियो संस्करण होने पर भी ट्रांसक्रिप्ट चाहिए?

आमतौर पर नहीं। जब ऑडियो लेख के टेक्स्ट की सीधी नैरेशन हो और कोई नई जानकारी न जोड़े, तो WCAG की "media alternative for text" परिभाषा के तहत लेख का टेक्स्ट खुद ट्रांसक्रिप्ट है। प्लेयर को लेख के ऑडियो संस्करण के रूप में स्पष्ट रूप से लेबल करें और अपवाद लागू हो जाता है। अगर ऑडियो में कमेंट्री, अर्थपूर्ण म्यूज़िक, या टेक्स्ट में न मिलने वाले हिस्से हों, तो अलग ट्रांसक्रिप्ट ज़रूरी है।

WCAG 2.2 में ऑडियो प्लेयर के बटन की न्यूनतम साइज़ क्या है?

Level AA पर सफलता मानदंड 2.5.8 Target Size (Minimum) के तहत इंटरैक्टिव टारगेट कम से कम 24 x 24 CSS पिक्सेल होने चाहिए। टारगेट में पैडिंग शामिल है, इसलिए हर तरफ 4 पिक्सेल पैडिंग वाला 16-पिक्सेल आइकन आवश्यकता पूरी करता है। टेक्स्ट में इनलाइन लिंक और यूज़र एजेंट द्वारा निर्धारित कंट्रोल के लिए अपवाद हैं, लेकिन स्टैंडअलोन प्लेयर बटन को कोई अपवाद नहीं मिलता और उन्हें यह थ्रेशोल्ड पूरा करना होगा।

क्या WCAG 2.2 WordPress.com होस्टेड साइटों पर लागू होता है?

हाँ। WCAG होस्टिंग प्लेटफॉर्म की परवाह किए बिना किसी भी वेब कंटेंट पर लागू होता है। WordPress.com साइटें EAA, ADA और समकक्ष राष्ट्रीय कानूनों के तहत सेल्फ-होस्टेड WordPress जैसा ही कानूनी जोखिम रखती हैं। होस्टिंग मॉडल दायित्व नहीं बदलता। जो बदलता है वह है साइट मालिक का प्लेयर मार्कअप पर नियंत्रण। WordPress.com Business और Commerce प्लान कस्टम प्लगइन की अनुमति देते हैं, निचले टायर नहीं देते।

शुरुआत कहाँ से करें

अपनी साइट का एक पोस्ट चुनें, ऑडियो प्लेयर का केवल कीबोर्ड से वॉकथ्रू करें, और हर बटन को 24-पिक्सेल नियम के खिलाफ जाँचें। यह एकल ऑडिट बताता है कि आपका मौजूदा सेटअप WCAG 2.2 अनुपालन के करीब है या दूर। वहाँ से, विकल्प है: मौजूदा प्लेयर ठीक करना या ऐसे प्लेयर से बदलना जो डिफ़ॉल्ट रूप से अनुपालन-योग्य हो। हमारी एक्सेसिबिलिटी डॉक्यूमेंटेशन में वह कॉन्फ़िगरेशन है जो हम EAA दबाव में साइटों के लिए सुझाते हैं।