सैंपल एक्सेसिबिलिटी सुधार रिपोर्ट। Harbor & Pine एक काल्पनिक स्टोर है जिसे हमने एक्सेसिबिलिटी की आम खामियों के साथ बनाया और फिर उसी इंजन से टेस्ट किया जो आपकी वेबसाइट स्कैन करता है।

सैंपल एक्सेसिबिलिटी सुधार रिपोर्ट

harborandpine.example

प्लेटफ़ॉर्म:: Shopify
बनाई गई:: 24 सित॰ 2026
टेस्ट किए गए पेज:: 9
इंजन:: axe-core 4.13.0

एक्सेसिबिलिटी (PDF)पूरी रिपोर्ट (PDF)स्कैन नतीजे यह रिपोर्ट अंग्रेज़ी में देखें

सारांश

हमने 24 सित॰ 2026 को axe-core 4.13.0 से harborandpine.example के 9 पेज (4 आपके साइटमैप से) की WCAG 2.2 A और AA के अनुसार जांच की, और सिर्फ़ कीबोर्ड से शॉपिंग टेस्ट भी किया।
8 तरह की समस्याएं ऑटोमेटेड WCAG टेस्ट में फ़ेल (131 इंस्टेंस)। इनमें से 8 पर पहले ठीक करें का निशान है।
जर्नी रुकीसिर्फ़ कीबोर्ड इस्तेमाल करने वाला खरीदार यहां अटक जाता है: विकल्प और मात्रा चुनना।
4 आइटम की इंसानी जांच ज़रूरी है: ऑटोमेटेड टेस्ट ने इन्हें फ़्लैग किया, लेकिन फ़ैसला नहीं कर सके।
शुरुआत इनसे करें: कीबोर्ड फ़ोकस कुकी बैनर में फंसा रहता है; प्रोडक्ट के विकल्प कीबोर्ड से नहीं चुने जा सकते; बटन में पहचाना जा सकने वाला टेक्स्ट होना चाहिए।

ऑटोमेटेड टेस्ट किसी साइट की एक्सेसिबिलिटी समस्याओं का सिर्फ़ एक हिस्सा पकड़ते हैं, सभी नहीं। यह रिपोर्ट बताती है कि हमारे टेस्ट को क्या मिला और उसे कैसे ठीक करें। यह कानूनी सलाह नहीं है और ADA, European Accessibility Act या किसी भी कानून के साथ कंप्लायंस को प्रमाणित नहीं करती।

ओवरव्यू

P1 · पहले ठीक करेंमुख्य पेजों पर विज़िटर्स को रोकने वाली बाधाएं: 8
P2 · उसके बाद ठीक करेंगंभीर या मध्यम बाधाएं: 0
P3 · बेहतर करेंमामूली समस्याएं और बेस्ट प्रैक्टिस: 2

गंभीरता के अनुसार इंस्टेंस

अत्यंत गंभीर: 73
गंभीर: 58
मध्यम: 25
मामूली: 0

पुष्टि किए गए फ़ेलियरसमस्याओं के प्रकार, जिनमें कोई ऑटोमेटेड टेस्ट फ़ेल हुआ: 10
समीक्षा ज़रूरीफ़्लैग हुए, लेकिन फ़ैसला किसी इंसान को करना होगा: 4
पास हुई जांचबिना फ़ेलियर वाले ऑटोमेटेड नियम: 32
टेस्ट नहीं किया गयाजर्नी के स्टेप और मैन्युअल जांच: 7

हमने 9 पेज टेस्ट किए, जिनमें से 4 आपके साइटमैप से चुने गए। लक्ष्य तारीखें गंभीरता के आधार पर दिए गए सुझाव हैं; अंतिम तारीखें अपने डेवलपर के साथ तय करें।

वेबसाइट ओवरव्यू

टेस्ट किए गए पेजों पर मौजूद सार्वजनिक सबूतों से पहचाना गया। लेबल गलत हो सकता है; इससे सिर्फ़ यह तय होता है कि कौन-सी अतिरिक्त जांच चलेंगी।

वेबसाइट का प्रकार

ऑनलाइन स्टोरउच्च कॉन्फ़िडेंस
- Shopify पर चलता है, जो एक स्टोर प्लेटफ़ॉर्म है
- कार्ट का लिंक
- प्रोडक्ट या शॉप के लिंक
लैंडिंग पेजमध्यम कॉन्फ़िडेंस
- सिर्फ़ 6 इंटरनल पेजों के लिंक

पहचानी गई टेक्नोलॉजी

Shopifyउच्च कॉन्फ़िडेंस
पेज पर Shopify की फ़ाइलें या स्क्रिप्ट

इस साइट के लिए जांच

हर साइट पर लागू जांच: एक्सेसिबिलिटी, SEO, स्पीड, सुरक्षा और ईमेल
ई-कॉमर्स मॉड्यूल: कलेक्शन, प्रोडक्ट और कार्ट पेज, और चेकआउट बटन तक कीबोर्ड शॉपिंग जर्नी
Shopify नोट्स: थीम और एडमिन में सुधार के स्टेप; प्लेटफ़ॉर्म से नियंत्रित हेडर और कुकी संदर्भ के लिए दिखाए जाते हैं

कीबोर्ड शॉपिंग जर्नी

हमने सिर्फ़ कीबोर्ड (Tab, Shift+Tab, Enter, Space, Escape) से खरीदारी करने की कोशिश की, जैसे वे लोग करते हैं जो माउस इस्तेमाल नहीं कर सकते। हम एक अस्थायी सेशन में एक आइटम कार्ट में डालते हैं और चेकआउट बटन पर रुक जाते हैं: हम कभी चेकआउट में नहीं जाते और न ही कोई निजी या पेमेंट जानकारी टाइप करते हैं। लक्ष्य: सिर्फ़ कीबोर्ड से होम पेज से चेकआउट बटन तक पहुंचें।

01मुख्य नेविगेशन तक पहुंचना
पास
21 बार Tab दबाने के बाद फ़ोकस नेविगेशन में “Shop” तक पहुंचा।
अपेक्षित: होम पेज के ऊपर से Tab दबाने पर फ़ोकस मुख्य नेविगेशन के लिंक तक पहुंचता है।
- नोट: एक कुकी बैनर ने कीबोर्ड फ़ोकस को तब तक रोके रखा, जब तक हमने “Accept all” पर Enter नहीं दबाया।
इसे कैसे दोहराएं
https://harborandpine.example/
1. होम पेज खोलें।
2. ब्राउज़र के एड्रेस बार पर क्लिक करें, फिर बार-बार Tab दबाएं (Shift+Tab से पीछे जाते हैं)।
हमें दिखा फ़ोकस का क्रम
“Shop”
02कलेक्शन से कोई प्रोडक्ट खोलना
पास
9 बार Tab दबाने के बाद फ़ोकस “Trail Daypack 22L” तक पहुंचा, और Enter से /products/trail-daypack खुला।
अपेक्षित: Tab से कलेक्शन ग्रिड के किसी प्रोडक्ट तक पहुंचा जा सकता है, और Enter से उसका पेज खुलता है।
इसे कैसे दोहराएं
https://harborandpine.example/collections/all
1. /collections/all खोलें।
2. तब तक Tab दबाएं जब तक ग्रिड का कोई प्रोडक्ट हाइलाइट न हो जाए, फिर Enter दबाएं।
हमें दिखा फ़ोकस का क्रम
“Harbor & Pine” → “Shop” → “New arrivals” → “Our story” → body > header.site > div.icons > button → “Account” → body > header.site > div.icons > a → “FeaturedPrice, low to highPrice, high to low” → “Trail Daypack 22L”
03विकल्प और मात्रा चुनना
फ़ेल
प्रोडक्ट के 3 विकल्पों पर कीबोर्ड फ़ोकस नहीं जा सकता: “S”, “M”, “L”। ये माउस पर काम करते हैं, लेकिन कीबोर्ड इस्तेमाल करने वाला इन्हें नहीं चुन सकता।
अपेक्षित: प्रोडक्ट के हर विकल्प (साइज़, रंग, वेरिएंट) और मात्रा वाले फ़ील्ड तक Tab से पहुंचा जा सकता है।
2.1.1 Keyboard · कॉन्फ़िडेंस: उच्च
विकल्प और मात्रा चुनना: फ़ेल होने वाला एलिमेंट, घेरकर दिखाया गया
इसे कैसे दोहराएं
https://harborandpine.example/products/trail-daypack
1. /products/trail-daypack खोलें।
2. पेज के ऊपर से Tab दबाएं और नोट करें कि Add to cart से पहले किन कंट्रोल पर फ़ोकस जाता है।
हमें दिखा फ़ोकस का क्रम
“Harbor & Pine” → “Shop” → “New arrivals” → “Our story” → … 5 और … → body > header.site > div.icons > a → div.page.product > div.gallery > div.thumbs > button → div.page.product > div.gallery > div.thumbs > button → div.page.product > div.gallery > div.thumbs > button → div.page.product > div > div.swatches > button → div.page.product > div > div.swatches > button → div.page.product > div > div.swatches > button → “1” → “Add to cart”
एलिमेंट
```
<div class="size-option" data-fr="opt-1">S</div>
```
04कीबोर्ड से कार्ट में जोड़ना
समीक्षा ज़रूरी
Add to cart पर Enter काम कर गया (हेडर में कार्ट की गिनती बदल गई, “कार्ट में जोड़ा गया” जैसा मैसेज दिखा), लेकिन हमें कोई स्टेटस मैसेज या फ़ोकस वाला डायलॉग नहीं मिला, इसलिए हो सकता है स्क्रीन रीडर इस्तेमाल करने वालों को पता न चले कि आइटम जुड़ गया।
अपेक्षित: Add to cart पर Enter दबाने से आइटम जुड़ता है, और इसकी पुष्टि अनाउंस होती है: कोई स्टेटस मैसेज, फ़ोकस लेने वाला कोई डायलॉग, या कार्ट पेज।
4.1.3 Status Messages · कॉन्फ़िडेंस: मध्यम
कीबोर्ड से कार्ट में जोड़ना: इस स्टेप पर पेज
इसे कैसे दोहराएं
https://harborandpine.example/products/trail-daypack
1. /products/trail-daypack खोलें।
2. तब तक Tab दबाएं जब तक Add to cart पर फ़ोकस न आ जाए, फिर Enter दबाएं।
3. स्क्रीन रीडर (VoiceOver: Cmd+F5) से सुनें कि पुष्टि अनाउंस होती है या नहीं।
05कार्ट में बदलाव करना और चेकआउट तक पहुंचना
पास
12 Tab प्रेस में कार्ट के सभी 4 कंट्रोल और चेकआउट बटन (“Check out”) तक पहुंचा गया। हमने इसे दबाया नहीं।
अपेक्षित: मात्रा वाले फ़ील्ड, हटाने वाले बटन और चेकआउट बटन, सभी तक Tab से पहुंचा जा सकता है।
इसे कैसे दोहराएं
https://harborandpine.example/cart
1. कोई भी प्रोडक्ट कार्ट में जोड़ें और कार्ट पेज खोलें।
2. Tab दबाएं और जांचें कि मात्रा वाले फ़ील्ड, हटाने वाले बटन और चेकआउट बटन, सभी पर फ़ोकस जाता है।
हमें दिखा फ़ोकस का क्रम
“Harbor & Pine” → “Shop” → “New arrivals” → “Our story” → body > header.site > div.icons > button → “Account” → body > header.site > div.icons > a → “1” → tbody > tr > td > button.remove → “2” → tbody > tr > td > button.remove → “Check out”
06चेकआउट
टेस्ट नहीं किया गया
हम चेकआउट बटन पर रुक जाते हैं: हम कभी चेकआउट में नहीं जाते, ऑर्डर नहीं बनाते और पेमेंट की जानकारी टाइप नहीं करते। Shopify पर चेकआउट पेज आपकी थीम नहीं, बल्कि Shopify चलाता है। चेकआउट को ख़ुद जांचें (मैन्युअल जांच देखें)।

लेटर क्लेम मैप

लेटर का हर दावा, स्कैन के सबूत से मिलाया गया। यह तथ्यों की तुलना है, कानूनी सलाह नहीं।

“Images lack alternative text, so product photos are not described.”
बिना टेक्स्ट विकल्प वाली इमेज. टेस्ट किए गए 5 में से 3 पेज पर 10 इंस्टेंस।
image-alt
दोहराया गया
“Text has insufficient color contrast against its background, including sale badges and prices.”
कम कलर कंट्रास्ट. टेस्ट किए गए 5 में से 5 पेज पर 16 इंस्टेंस।
color-contrast
दोहराया गया
“The website cannot be navigated using a keyboard alone.”
कीबोर्ड एक्सेस और फ़ोकस. कीबोर्ड फ़ोकस कुकी बैनर में फंस जाता है।
दोहराया गया
“Form fields do not have labels, including the newsletter sign-up and the quantity fields in the cart.”
बिना लेबल वाले फ़ॉर्म फ़ील्ड. टेस्ट किए गए 5 में से 3 पेज पर 4 इंस्टेंस।
select-name, label
दोहराया गया
“Product videos do not have captions.”
वीडियो और ऑडियो कैप्शन. ऑटोमेटेड स्कैन कैप्शन का आकलन नहीं कर सकते। हर प्रोडक्ट या ब्रैंड वीडियो में सही कैप्शन और ट्रांसक्रिप्ट जांचें।
मैन्युअल जांच
“Our client is legally blind and uses screen reader software.”
दूसरी समस्याएं. यह एक सामान्य दावा है। मुख्य फ़्लो (सर्च, प्रोडक्ट पेज, कार्ट में जोड़ना, चेकआउट) को VoiceOver या NVDA जैसे स्क्रीन रीडर से टेस्ट करें।
मैन्युअल जांच

सुधार योजना

प्राथमिकता के क्रम में समस्याएं, ज़िम्मेदार और लक्ष्य तारीख के साथ
प्राथमिकता	समस्या	स्थिति	WCAG	इंस्टेंस	ज़िम्मेदार	लक्ष्य तारीख
P1	कीबोर्ड फ़ोकस कुकी बैनर में फंसा रहता है	पुष्टि हुई	2.1.2	1	ऐप वेंडर	2026-10-08
P1	प्रोडक्ट के विकल्प कीबोर्ड से नहीं चुने जा सकते	पुष्टि हुई	2.1.1	1	थीम डेवलपर	2026-10-08
P1	बटन में पहचाना जा सकने वाला टेक्स्ट होना चाहिए	पुष्टि हुई	4.1.2	41	थीम डेवलपर	2026-10-08
P1	इमेज में वैकल्पिक टेक्स्ट होना चाहिए	पुष्टि हुई	1.1.1	22	कंटेंट एडिटर	2026-10-08
P1	फ़ॉर्म एलिमेंट के लेबल होने चाहिए	पुष्टि हुई	4.1.2	7	थीम डेवलपर	2026-10-08
P1	select एलिमेंट का एक्सेसिबल नाम होना चाहिए	पुष्टि हुई	4.1.2	1	थीम डेवलपर	2026-10-08
P1	लिंक में पहचाना जा सकने वाला टेक्स्ट होना चाहिए	पुष्टि हुई	2.4.4, 4.1.2	36	थीम डेवलपर	2026-10-08
P1	एलिमेंट को न्यूनतम कलर कंट्रास्ट अनुपात की सीमा पूरी करनी चाहिए	पुष्टि हुई	1.4.3	22	स्टोर मालिक (एडमिन सेटिंग्स)	2026-10-08
P3	पेज का सारा कंटेंट लैंडमार्क के अंदर होना चाहिए	पुष्टि हुई	बेस्ट प्रैक्टिस	18	थीम डेवलपर	2026-11-23
P3	हेडिंग लेवल एक बार में सिर्फ़ एक बढ़ना चाहिए	पुष्टि हुई	बेस्ट प्रैक्टिस	7	थीम डेवलपर	2026-11-23

हर समस्या को कैसे ठीक करें

P1अत्यंत गंभीरपुष्टि किया गया फ़ेलियरWCAG 2.1.2

कीबोर्ड फ़ोकस कुकी बैनर में फंसा रहता है

मेहनत: मध्यम · ज़िम्मेदार: ऐप वेंडर · 2.1.2 No Keyboard Trap

जब कीबोर्ड इस्तेमाल करने वाला व्यक्ति Tab दबाता है, तो फ़ोकस कुछ ही एलिमेंट के बीच घूमता रहता है और पेज के बाकी हिस्से तक कभी नहीं पहुंचता।

अगर फ़ोकस फंसा रहे, तो सिर्फ़ कीबोर्ड और स्क्रीन रीडर इस्तेमाल करने वाले बिल्कुल भी खरीदारी नहीं कर सकते (WCAG 2.1.2 No Keyboard Trap)।

सबूत

किस जांच से मिला: कीबोर्ड टेस्ट (होम पेज पर Tab करते हुए)
स्थिति · कॉन्फ़िडेंस: पुष्टि किया गया फ़ेलियर · उच्च
पता चला: 24 सित॰ 2026 (UTC)
कहां: 1 पेज पर 1 इंस्टेंस

अपेक्षित: Tab दबाने पर फ़ोकस पेज के हर इंटरैक्टिव एलिमेंट से होते हुए पेज के बाकी हिस्से तक जाता है।

देखा गया: 40 बार Tab दबाने के बाद भी फ़ोकस इन्हीं के बीच घूमता रहा: Settings, Accept all।

इसे कैसे दोहराएं

होम पेज खोलें।
एड्रेस बार पर क्लिक करें, फिर बार-बार Tab दबाएं।
फ़ोकस बार-बार उन्हीं कुछ एलिमेंट पर लौट आता है।

फ़ेल होने वाले एलिमेंट (6 दिखाए गए)

button#cc-settings

Settings

button#cc-accept.primary

Accept all

button#cc-settings

Settings

button#cc-accept.primary

Accept all

button#cc-settings

Settings

button#cc-accept.primary

Accept all

प्रभावित पेज (1)

https://harborandpine.example/

इसे कैसे ठीक करें

सामान्य मार्गदर्शन

अपने कुकी या कंसेंट बैनर ऐप की सेटिंग्स में एक्सेसिबिलिटी या फ़ोकस ट्रैप का विकल्प देखें, या वेंडर से इसे ठीक करने को कहें।
मोडल सिर्फ़ खुले रहने तक फ़ोकस अपने अंदर रख सकता है, और उसे Escape की से बंद होना चाहिए और फ़ोकस वहीं लौटाना चाहिए जहां से वह आया था।

AI से ठीक करेंप्रॉम्प्ट दिखाएं

इसे अपनी थीम फ़ाइल के साथ ChatGPT, Claude, Cursor या Copilot में पेस्ट करें। पब्लिश करने से पहले बदलाव की समीक्षा करें।

मेरी वेबसाइट harborandpine.example है: एक Shopify स्टोर (Online Store 2.0 थीम, Liquid टेम्पलेट)। एक्सेसिबिलिटी टेस्ट में यह समस्या मिली है और मुझे इसे अपनी थीम में ठीक करना है।

समस्या: कीबोर्ड फ़ोकस कुकी बैनर में फंसा रहता है (WCAG 2.1.2)।
कहां: 1 पेज पर 1 इंस्टेंस, उदाहरण के लिए /।

फ़ेल होने वाला एक एलिमेंट, जैसा ब्राउज़र ने उसे रेंडर किया:
```html
Settings
```

यह क्यों ज़रूरी है: अगर फ़ोकस फंसा रहे, तो सिर्फ़ कीबोर्ड और स्क्रीन रीडर इस्तेमाल करने वाले बिल्कुल भी खरीदारी नहीं कर सकते (WCAG 2.1.2 No Keyboard Trap)।

क्या बदलना है:
- अपने कुकी या कंसेंट बैनर ऐप की सेटिंग्स में एक्सेसिबिलिटी या फ़ोकस ट्रैप का विकल्प देखें, या वेंडर से इसे ठीक करने को कहें।
- मोडल सिर्फ़ खुले रहने तक फ़ोकस अपने अंदर रख सकता है, और उसे Escape की से बंद होना चाहिए और फ़ोकस वहीं लौटाना चाहिए जहां से वह आया था।

आपके जवाब के लिए नियम:
- सटीक बदलाव पहले और बाद के रूप में दिखाएं, और बताएं कि वह किस फ़ाइल या सेटिंग में जाएगा। अगर आपको पहले मेरी फ़ाइल देखनी हो, तो मुझसे उसे पेस्ट करने को कहें।
- विज़ुअल डिज़ाइन और मौजूदा व्यवहार में कोई बदलाव न करें।
- प्रोडक्ट के नाम, कीमतें या टेक्स्ट अपनी ओर से न बनाएं; ऐसे प्लेसहोल्डर इस्तेमाल करें जिन्हें मैं भर सकूं।
- आख़िर में बताएं कि सुधार की जांच ख़ुद कैसे की जा सकती है।
- यह भी बताएं कि कीबोर्ड और स्क्रीन रीडर से इसकी पुष्टि कैसे करें।

अपने सुधार की जांच करें

होम पेज लोड करें, बार-बार Tab दबाएं और पुष्टि करें कि फ़ोकस मुख्य नेविगेशन और कंटेंट तक पहुंचता है।

एक ऑटोमेटेड कीबोर्ड जांच से पता चला; हाथ से पुष्टि करें।

P1अत्यंत गंभीरपुष्टि किया गया फ़ेलियरWCAG 2.1.1

प्रोडक्ट के विकल्प कीबोर्ड से नहीं चुने जा सकते

मेहनत: मध्यम · ज़िम्मेदार: थीम डेवलपर · 2.1.1 Keyboard

साइज़, रंग या वेरिएंट के विकल्प माउस पर काम करते हैं, लेकिन उन पर कीबोर्ड फ़ोकस नहीं आ सकता, इसलिए कीबोर्ड इस्तेमाल करने वाले वेरिएंट नहीं चुन सकते।

सिर्फ़ कीबोर्ड इस्तेमाल करने वाले ग्राहक, जिनमें स्क्रीन रीडर इस्तेमाल करने वाले कई लोग भी शामिल हैं, इस स्टेप से आगे नहीं जा सकते (WCAG 2.1.1)।

सबूत

किस जांच से मिला: कीबोर्ड जर्नी
स्थिति · कॉन्फ़िडेंस: पुष्टि किया गया फ़ेलियर · उच्च
पता चला: 24 सित॰ 2026 (UTC)
कहां: 1 पेज पर 1 इंस्टेंस

अपेक्षित: प्रोडक्ट के हर विकल्प (साइज़, रंग, वेरिएंट) और मात्रा वाले फ़ील्ड तक Tab से पहुंचा जा सकता है।

देखा गया: प्रोडक्ट के 3 विकल्पों पर कीबोर्ड फ़ोकस नहीं जा सकता: “S”, “M”, “L”। ये माउस पर काम करते हैं, लेकिन कीबोर्ड इस्तेमाल करने वाला इन्हें नहीं चुन सकता।

प्रोडक्ट के विकल्प कीबोर्ड से नहीं चुने जा सकते: घेरकर दिखाया गया एलिमेंट

इसे कैसे दोहराएं

/products/trail-daypack खोलें।
पेज के ऊपर से Tab दबाएं और नोट करें कि Add to cart से पहले किन कंट्रोल पर फ़ोकस जाता है।

फ़ेल होने वाले एलिमेंट (1 दिखाए गए)

(स्क्रीनशॉट देखें)

<div class="size-option" data-fr="opt-1">S</div>

प्रभावित पेज (1)

https://harborandpine.example/products/trail-daypack

इसे कैसे ठीक करें

सामान्य मार्गदर्शन

विकल्प चुनने वाले कंट्रोल नेटिव रेडियो बटन (या <select>) से, दिखने वाले लेबल के साथ बनाएं; लेबल को स्वैच की तरह स्टाइल करें।
अगर आप कस्टम एलिमेंट रखते हैं, तो हर विकल्प के लिए tabindex="0", role="radiogroup" के अंदर aria-checked के साथ role="radio", और ऐरो की व Space की हैंडलिंग ज़रूरी है। नेटिव रेडियो बटन यह सब अपने आप देते हैं।

कोड

आपके डेवलपर के लिए लागू करने के उदाहरण। हमारे पास आपकी थीम का सोर्स कोड नहीं है, इसलिए फ़ाइलों की जगह सिर्फ़ संकेत हैं, सटीक पाथ नहीं।

पहले · हमें क्या मिला · आपकी थीम का प्रोडक्ट फ़ॉर्म (वेरिएंट पिकर)

<div class="size-option" data-fr="opt-1">S</div>

बाद में · अपने हिसाब से बदलने वाला उदाहरण

<fieldset class="variant-picker">
  <legend>Size</legend>
  <input type="radio" id="size-s" name="Size" value="S" class="visually-hidden">
  <label for="size-s" class="size-option">S</label>
  <input type="radio" id="size-m" name="Size" value="M" class="visually-hidden">
  <label for="size-m" class="size-option">M</label>
</fieldset>

हर विकल्प एक असली रेडियो बटन है, जिस तक Tab से पहुंचा जा सकता है और जिसे ऐरो की से बदला जा सकता है; लेबल आपकी स्वैच स्टाइल बनाए रखता है। अपने विकल्पों के नाम और वैल्यू इस्तेमाल करें।

AI से ठीक करेंप्रॉम्प्ट दिखाएं

मेरी वेबसाइट harborandpine.example है: एक Shopify स्टोर (Online Store 2.0 थीम, Liquid टेम्पलेट)। एक्सेसिबिलिटी टेस्ट में यह समस्या मिली है और मुझे इसे अपनी थीम में ठीक करना है।

समस्या: प्रोडक्ट के विकल्प कीबोर्ड से नहीं चुने जा सकते (WCAG 2.1.1)।
कहां: 1 पेज पर 1 इंस्टेंस, उदाहरण के लिए /products/trail-daypack।

फ़ेल होने वाला एक एलिमेंट, जैसा ब्राउज़र ने उसे रेंडर किया:
```html
<div class="size-option" data-fr="opt-1">S</div>
```

यह क्यों ज़रूरी है: सिर्फ़ कीबोर्ड इस्तेमाल करने वाले ग्राहक, जिनमें स्क्रीन रीडर इस्तेमाल करने वाले कई लोग भी शामिल हैं, इस स्टेप से आगे नहीं जा सकते (WCAG 2.1.1)।

क्या बदलना है:
- विकल्प चुनने वाले कंट्रोल नेटिव रेडियो बटन (या <select>) से, दिखने वाले लेबल के साथ बनाएं; लेबल को स्वैच की तरह स्टाइल करें।
- अगर आप कस्टम एलिमेंट रखते हैं, तो हर विकल्प के लिए tabindex="0", role="radiogroup" के अंदर aria-checked के साथ role="radio", और ऐरो की व Space की हैंडलिंग ज़रूरी है। नेटिव रेडियो बटन यह सब अपने आप देते हैं।

सुझाया गया बदलाव (आपकी थीम का प्रोडक्ट फ़ॉर्म (वेरिएंट पिकर)):
```html
<fieldset class="variant-picker">
  <legend>Size</legend>
  <input type="radio" id="size-s" name="Size" value="S" class="visually-hidden">
  <label for="size-s" class="size-option">S</label>
  <input type="radio" id="size-m" name="Size" value="M" class="visually-hidden">
  <label for="size-m" class="size-option">M</label>
</fieldset>
```

आपके जवाब के लिए नियम:
- सटीक बदलाव पहले और बाद के रूप में दिखाएं, और बताएं कि वह किस फ़ाइल या सेटिंग में जाएगा। अगर आपको पहले मेरी फ़ाइल देखनी हो, तो मुझसे उसे पेस्ट करने को कहें।
- विज़ुअल डिज़ाइन और मौजूदा व्यवहार में कोई बदलाव न करें।
- प्रोडक्ट के नाम, कीमतें या टेक्स्ट अपनी ओर से न बनाएं; ऐसे प्लेसहोल्डर इस्तेमाल करें जिन्हें मैं भर सकूं।
- आख़िर में बताएं कि सुधार की जांच ख़ुद कैसे की जा सकती है।
- यह भी बताएं कि कीबोर्ड और स्क्रीन रीडर से इसकी पुष्टि कैसे करें।

अपने सुधार की जांच करें

समस्या दोहराने वाले स्टेप सिर्फ़ कीबोर्ड से फिर से करें।
इस रिपोर्ट से री-टेस्ट का अनुरोध करें: जर्नी फिर से चलेगी।

P1अत्यंत गंभीरपुष्टि किया गया फ़ेलियरWCAG 4.1.2

बटन में पहचाना जा सकने वाला टेक्स्ट होना चाहिए

मेहनत: कम · ज़िम्मेदार: थीम डेवलपर · 4.1.2 Name, Role, Value

कुछ बटन का कोई एक्सेसिबल नाम नहीं है, इसलिए स्क्रीन रीडर इस्तेमाल करने वालों को सिर्फ़ “button” सुनाई देता है।

WCAG 4.1.2 के अनुसार हर कंट्रोल का एक नाम होना चाहिए। बिना नाम वाले बटन में अक्सर क्वांटिटी स्टेपर, बंद करने वाले बटन और स्लाइडर के तीर शामिल होते हैं।

सबूत

किस जांच से मिला: axe-core का ऑटोमेटेड नियम
स्थिति · कॉन्फ़िडेंस: पुष्टि किया गया फ़ेलियर · उच्च
पता चला: 24 सित॰ 2026 (UTC)
कहां: 9 पेज पर 41 इंस्टेंस

अपेक्षित: बटन में पहचाना जा सकने वाला टेक्स्ट होना चाहिए

देखा गया: एलिमेंट में ऐसा अंदरूनी टेक्स्ट नहीं है जिसे स्क्रीन रीडर पढ़ सकें। aria-label एट्रिब्यूट मौजूद नहीं है या खाली है। aria-labelledby एट्रिब्यूट मौजूद नहीं है, या ऐसे एलिमेंट की ओर इशारा करता है जो मौजूद नहीं हैं या खाली हैं। एलिमेंट में title एट्रिब्यूट नहीं है। एलिमेंट का कोई implicit (रैप करने वाला) <label> नहीं है। एलिमेंट का कोई explicit <label> नहीं है। एलिमेंट की डिफ़ॉल्ट सिमैंटिक्स को role="none" या role="presentation" से ओवरराइड नहीं किया गया।

बटन में पहचाना जा सकने वाला टेक्स्ट होना चाहिए: / पर घेरकर दिखाया गया एलिमेंट

बटन में पहचाना जा सकने वाला टेक्स्ट होना चाहिए: /collections/all पर घेरकर दिखाया गया एलिमेंट

इसे कैसे दोहराएं

https://harborandpine.example/ को Chrome या Edge में खोलें।
DevTools (F12) › Elements खोलें, Ctrl+F (Mac पर Cmd+F) दबाएं और यह खोजें: .icons > button[type="button"]
DevTools के Accessibility पेन में एलिमेंट का computed Name खाली है।
या पेज पर मुफ़्त axe DevTools ब्राउज़र एक्सटेंशन चलाएं: वह इसे “button-name” के रूप में दिखाता है।

फ़ेल होने वाले एलिमेंट (4 दिखाए गए)

.icons > button[type="button"]

<button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-3.5-3.5"></path></svg></button>

.thumbs > button:nth-child(1)

<button type="button"><img src="/img/daypack.svg"></button>

.thumbs > button:nth-child(2)

<button type="button"><img src="/img/jacket.svg"></button>

.thumbs > button:nth-child(3)

<button type="button"><img src="/img/bottle.svg"></button>

प्रभावित पेज (9)

https://harborandpine.example/
https://harborandpine.example/collections/all
https://harborandpine.example/products/trail-daypack
https://harborandpine.example/cart
https://harborandpine.example/pages/about
https://harborandpine.example/products/pine-wool-beanie
https://harborandpine.example/products/enamel-camp-mug
https://harborandpine.example/products/harbor-lantern
https://harborandpine.example/products/insulated-bottle

इसे कैसे ठीक करें

आपके पेज के मार्कअप से बना कोड

नीचे दिए उदाहरणों में बटन ढूंढें।
दिखने वाला टेक्स्ट, विज़ुअली हिडन टेक्स्ट, या ऐसा aria-label जोड़ें जो बताए कि बटन क्या करता है (जैसे aria-label="Close" या aria-label="Increase quantity")।

कोड

पहले · हमें क्या मिला · आपकी थीम का कोड (उसमें दिखाया गया मार्कअप खोजें)

<button type="button">…</button>

बाद में · फ़ेल होने वाले एलिमेंट से बना

<button type="button" aria-label="[What this button does]">…</button>

ब्रैकेट वाले टेक्स्ट की जगह लिखें कि बटन क्या करता है। बटन के अंदर दिखने वाला टेक्स्ट या विज़ुअली हिडन टेक्स्ट भी काम करता है।

पहले · हमें क्या मिला · आपकी थीम का कोड (उसमें दिखाया गया मार्कअप खोजें)

<button type="button"><img src="/img/daypack.svg"></button>

बाद में · फ़ेल होने वाले एलिमेंट से बना

<button type="button" aria-label="[Describe the image, e.g. Back view]"><img src="/img/daypack.svg"></button>

पहले · हमें क्या मिला · आपकी थीम का कोड (उसमें दिखाया गया मार्कअप खोजें)

<button type="button"><img src="/img/jacket.svg"></button>

बाद में · फ़ेल होने वाले एलिमेंट से बना

<button type="button" aria-label="[Describe the image, e.g. Back view]"><img src="/img/jacket.svg"></button>

पहले · हमें क्या मिला · आपकी थीम का कोड (उसमें दिखाया गया मार्कअप खोजें)

<button type="button"><img src="/img/bottle.svg"></button>

बाद में · फ़ेल होने वाले एलिमेंट से बना

<button type="button" aria-label="[Describe the image, e.g. Back view]"><img src="/img/bottle.svg"></button>

AI से ठीक करेंप्रॉम्प्ट दिखाएं

मेरी वेबसाइट harborandpine.example है: एक Shopify स्टोर (Online Store 2.0 थीम, Liquid टेम्पलेट)। एक्सेसिबिलिटी टेस्ट में यह समस्या मिली है और मुझे इसे अपनी थीम में ठीक करना है।

समस्या: बटन में पहचाना जा सकने वाला टेक्स्ट होना चाहिए (WCAG 4.1.2)।
कहां: 9 पेजों पर 41 इंस्टेंस, उदाहरण के लिए /, /collections/all, /products/trail-daypack, /cart।

फ़ेल होने वाला एक एलिमेंट, जैसा ब्राउज़र ने उसे रेंडर किया:
```html
<button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-3.5-3.5"></path></svg></button>
```

यह क्यों ज़रूरी है: WCAG 4.1.2 के अनुसार हर कंट्रोल का एक नाम होना चाहिए। बिना नाम वाले बटन में अक्सर क्वांटिटी स्टेपर, बंद करने वाले बटन और स्लाइडर के तीर शामिल होते हैं।

क्या बदलना है:
- नीचे दिए उदाहरणों में बटन ढूंढें।
- दिखने वाला टेक्स्ट, विज़ुअली हिडन टेक्स्ट, या ऐसा aria-label जोड़ें जो बताए कि बटन क्या करता है (जैसे aria-label="Close" या aria-label="Increase quantity")।

सुझाया गया बदलाव (आपकी थीम का कोड (उसमें दिखाया गया मार्कअप खोजें)):
```html
<button type="button" aria-label="[What this button does]">…</button>
```

आपके जवाब के लिए नियम:
- सटीक बदलाव पहले और बाद के रूप में दिखाएं, और बताएं कि वह किस फ़ाइल या सेटिंग में जाएगा। अगर आपको पहले मेरी फ़ाइल देखनी हो, तो मुझसे उसे पेस्ट करने को कहें।
- विज़ुअल डिज़ाइन और मौजूदा व्यवहार में कोई बदलाव न करें।
- प्रोडक्ट के नाम, कीमतें या टेक्स्ट अपनी ओर से न बनाएं; ऐसे प्लेसहोल्डर इस्तेमाल करें जिन्हें मैं भर सकूं।
- आख़िर में बताएं कि सुधार की जांच ख़ुद कैसे की जा सकती है।
- यह भी बताएं कि कीबोर्ड और स्क्रीन रीडर से इसकी पुष्टि कैसे करें।

अपने सुधार की जांच करें

प्रभावित पेजों को दोबारा स्कैन करें।
स्क्रीन रीडर से बटन जांचें।

विस्तृत मार्गदर्शन: https://dequeuniversity.com/rules/axe/4.13/button-name?application=playwright

P1अत्यंत गंभीरपुष्टि किया गया फ़ेलियरWCAG 1.1.1

इमेज में वैकल्पिक टेक्स्ट होना चाहिए

मेहनत: मध्यम · ज़िम्मेदार: कंटेंट एडिटर · 1.1.1 Non-text Content

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

WCAG 1.1.1 अर्थपूर्ण इमेज के लिए टेक्स्ट विकल्प मांगता है। इसके बिना स्क्रीन रीडर इस्तेमाल करने वाला व्यक्ति यह नहीं जान सकता कि फ़ोटो में कौन-सा प्रोडक्ट है।

सबूत

किस जांच से मिला: axe-core का ऑटोमेटेड नियम
स्थिति · कॉन्फ़िडेंस: पुष्टि किया गया फ़ेलियर · उच्च
पता चला: 24 सित॰ 2026 (UTC)
कहां: 7 पेज पर 22 इंस्टेंस

अपेक्षित: इमेज में वैकल्पिक टेक्स्ट होना चाहिए

देखा गया: एलिमेंट में alt एट्रिब्यूट नहीं है। aria-label एट्रिब्यूट मौजूद नहीं है या खाली है। aria-labelledby एट्रिब्यूट मौजूद नहीं है, या ऐसे एलिमेंट की ओर इशारा करता है जो मौजूद नहीं हैं या खाली हैं। एलिमेंट में title एट्रिब्यूट नहीं है। एलिमेंट की डिफ़ॉल्ट सिमैंटिक्स को role="none" या role="presentation" से ओवरराइड नहीं किया गया।

इमेज में वैकल्पिक टेक्स्ट होना चाहिए: / पर घेरकर दिखाया गया एलिमेंट

इमेज में वैकल्पिक टेक्स्ट होना चाहिए: /collections/all पर घेरकर दिखाया गया एलिमेंट

इसे कैसे दोहराएं

https://harborandpine.example/ को Chrome या Edge में खोलें।
DevTools (F12) › Elements खोलें, Ctrl+F (Mac पर Cmd+F) दबाएं और यह खोजें: img[src$="hero-photo.jpg"]
DevTools के Accessibility पेन में एलिमेंट का computed Name खाली है।
या पेज पर मुफ़्त axe DevTools ब्राउज़र एक्सटेंशन चलाएं: वह इसे “image-alt” के रूप में दिखाता है।

फ़ेल होने वाले एलिमेंट (4 दिखाए गए)

img[src$="hero-photo.jpg"]

<img src="/img/hero-photo.jpg" loading="lazy">

img[src$="mug.svg"]

<img src="/img/mug.svg">

img[src$="beanie.svg"]

<img src="/img/beanie.svg">

img[src$="jacket.svg"]

<img src="/img/jacket.svg">

प्रभावित पेज (7)

https://harborandpine.example/
https://harborandpine.example/collections/all
https://harborandpine.example/products/trail-daypack
https://harborandpine.example/products/pine-wool-beanie
https://harborandpine.example/products/enamel-camp-mug
https://harborandpine.example/products/harbor-lantern
https://harborandpine.example/products/insulated-bottle

इसे कैसे ठीक करें

आपके पेज के मार्कअप से बना कोड

Shopify admin में Products > [product] > Media खोलें, हर इमेज पर क्लिक करें और “Alt text” भरें। सेक्शन की इमेज के लिए Online Store > Themes > Customize खोलें और सेक्शन सेटिंग्स में इमेज का alt टेक्स्ट सेट करें।
वह बताएं जो ग्राहक के लिए मायने रखता है: प्रोडक्ट का नाम, रंग और दिखाया गया एंगल (जैसे “ऑलिव रंग का कैनवस टोट बैग, सामने से”)।
सजावटी इमेज में खाली alt एट्रिब्यूट (alt="") होना चाहिए, ताकि स्क्रीन रीडर उन्हें छोड़ दें।

कोड

पहले · हमें क्या मिला · प्रोडक्ट फ़ोटो: Shopify admin › Products › Media › Alt text। दूसरी इमेज: आपकी थीम का कोड

<img src="/img/hero-photo.jpg" loading="lazy">

बाद में · फ़ेल होने वाले एलिमेंट से बना

<img src="/img/hero-photo.jpg" loading="lazy" alt="[Describe the image for a shopper]">

बताएं कि इमेज में क्या दिखता है (प्रोडक्ट फ़ोटो के लिए: प्रोडक्ट, रंग, एंगल)। अगर इमेज सिर्फ़ सजावटी है, तो इसके बजाय alt="" इस्तेमाल करें, ताकि स्क्रीन रीडर उसे छोड़ दें।

<img src="/img/mug.svg">

बाद में · फ़ेल होने वाले एलिमेंट से बना

<img src="/img/mug.svg" alt="[Describe the image for a shopper]">

<img src="/img/beanie.svg">

बाद में · फ़ेल होने वाले एलिमेंट से बना

<img src="/img/beanie.svg" alt="[Describe the image for a shopper]">

<img src="/img/jacket.svg">

बाद में · फ़ेल होने वाले एलिमेंट से बना

<img src="/img/jacket.svg" alt="[Describe the image for a shopper]">

AI से ठीक करेंप्रॉम्प्ट दिखाएं

मेरी वेबसाइट harborandpine.example है: एक Shopify स्टोर (Online Store 2.0 थीम, Liquid टेम्पलेट)। एक्सेसिबिलिटी टेस्ट में यह समस्या मिली है और मुझे इसे अपनी थीम में ठीक करना है।

समस्या: इमेज में वैकल्पिक टेक्स्ट होना चाहिए (WCAG 1.1.1)।
कहां: 7 पेजों पर 22 इंस्टेंस, उदाहरण के लिए /, /collections/all, /products/trail-daypack, /products/pine-wool-beanie।

फ़ेल होने वाला एक एलिमेंट, जैसा ब्राउज़र ने उसे रेंडर किया:
```html
<img src="/img/hero-photo.jpg" loading="lazy">
```

यह क्यों ज़रूरी है: WCAG 1.1.1 अर्थपूर्ण इमेज के लिए टेक्स्ट विकल्प मांगता है। इसके बिना स्क्रीन रीडर इस्तेमाल करने वाला व्यक्ति यह नहीं जान सकता कि फ़ोटो में कौन-सा प्रोडक्ट है।

क्या बदलना है:
- Shopify admin में Products > [product] > Media खोलें, हर इमेज पर क्लिक करें और “Alt text” भरें। सेक्शन की इमेज के लिए Online Store > Themes > Customize खोलें और सेक्शन सेटिंग्स में इमेज का alt टेक्स्ट सेट करें।
- वह बताएं जो ग्राहक के लिए मायने रखता है: प्रोडक्ट का नाम, रंग और दिखाया गया एंगल (जैसे “ऑलिव रंग का कैनवस टोट बैग, सामने से”)।
- सजावटी इमेज में खाली alt एट्रिब्यूट (alt="") होना चाहिए, ताकि स्क्रीन रीडर उन्हें छोड़ दें।

सुझाया गया बदलाव (प्रोडक्ट फ़ोटो: Shopify admin › Products › Media › Alt text। दूसरी इमेज: आपकी थीम का कोड):
```html
<img src="/img/hero-photo.jpg" loading="lazy" alt="[Describe the image for a shopper]">
```

आपके जवाब के लिए नियम:
- सटीक बदलाव पहले और बाद के रूप में दिखाएं, और बताएं कि वह किस फ़ाइल या सेटिंग में जाएगा। अगर आपको पहले मेरी फ़ाइल देखनी हो, तो मुझसे उसे पेस्ट करने को कहें।
- विज़ुअल डिज़ाइन और मौजूदा व्यवहार में कोई बदलाव न करें।
- प्रोडक्ट के नाम, कीमतें या टेक्स्ट अपनी ओर से न बनाएं; ऐसे प्लेसहोल्डर इस्तेमाल करें जिन्हें मैं भर सकूं।
- आख़िर में बताएं कि सुधार की जांच ख़ुद कैसे की जा सकती है।
- यह भी बताएं कि कीबोर्ड और स्क्रीन रीडर से इसकी पुष्टि कैसे करें।

अपने सुधार की जांच करें

प्रभावित पेजों को दोबारा स्कैन करें।
स्क्रीन रीडर (Mac पर VoiceOver: Cmd+F5) से सुनें कि प्रोडक्ट इमेज कैसे पढ़ी जाती हैं।

विस्तृत मार्गदर्शन: https://dequeuniversity.com/rules/axe/4.13/image-alt?application=playwright

P1अत्यंत गंभीरपुष्टि किया गया फ़ेलियरWCAG 4.1.2

फ़ॉर्म एलिमेंट के लेबल होने चाहिए

मेहनत: कम · ज़िम्मेदार: थीम डेवलपर · 4.1.2 Name, Role, Value

कुछ फ़ॉर्म फ़ील्ड का कोई लेबल नहीं है, इसलिए स्क्रीन रीडर इस्तेमाल करने वालों को पता नहीं चलता कि क्या भरना है।

WCAG 1.3.1, 3.3.2 और 4.1.2 के अनुसार फ़ॉर्म फ़ील्ड के लेबल होने चाहिए। न्यूज़लेटर साइन-अप और सर्च फ़ील्ड में यह समस्या आम है।

सबूत

किस जांच से मिला: axe-core का ऑटोमेटेड नियम
स्थिति · कॉन्फ़िडेंस: पुष्टि किया गया फ़ेलियर · उच्च
पता चला: 24 सित॰ 2026 (UTC)
कहां: 6 पेज पर 7 इंस्टेंस

अपेक्षित: फ़ॉर्म एलिमेंट के लेबल होने चाहिए

देखा गया: एलिमेंट का कोई implicit (रैप करने वाला) <label> नहीं है। एलिमेंट का कोई explicit <label> नहीं है। aria-label एट्रिब्यूट मौजूद नहीं है या खाली है। aria-labelledby एट्रिब्यूट मौजूद नहीं है, या ऐसे एलिमेंट की ओर इशारा करता है जो मौजूद नहीं हैं या खाली हैं। एलिमेंट में title एट्रिब्यूट नहीं है। एलिमेंट में placeholder एट्रिब्यूट नहीं है। एलिमेंट की डिफ़ॉल्ट सिमैंटिक्स को role="none" या role="presentation" से ओवरराइड नहीं किया गया।

फ़ॉर्म एलिमेंट के लेबल होने चाहिए: /products/trail-daypack पर घेरकर दिखाया गया एलिमेंट

फ़ॉर्म एलिमेंट के लेबल होने चाहिए: /cart पर घेरकर दिखाया गया एलिमेंट

इसे कैसे दोहराएं

https://harborandpine.example/products/trail-daypack को Chrome या Edge में खोलें।
DevTools (F12) › Elements खोलें, Ctrl+F (Mac पर Cmd+F) दबाएं और यह खोजें: input
DevTools के Accessibility पेन में एलिमेंट का computed Name खाली है।
या पेज पर मुफ़्त axe DevTools ब्राउज़र एक्सटेंशन चलाएं: वह इसे “label” के रूप में दिखाता है।

फ़ेल होने वाले एलिमेंट (2 दिखाए गए)

input

<input type="number" value="1" min="1">

input[value="2"]

<input type="number" value="2" min="1">

प्रभावित पेज (6)

https://harborandpine.example/products/trail-daypack
https://harborandpine.example/cart
https://harborandpine.example/products/pine-wool-beanie
https://harborandpine.example/products/enamel-camp-mug
https://harborandpine.example/products/harbor-lantern
https://harborandpine.example/products/insulated-bottle

इसे कैसे ठीक करें

आपके पेज के मार्कअप से बना कोड

हर फ़ील्ड को एक <label for="field-id"> एलिमेंट दें, या कम से कम एक aria-label।
सिर्फ़ प्लेसहोल्डर टेक्स्ट को लेबल नहीं माना जाता।

कोड

पहले · हमें क्या मिला · आपकी थीम का कोड (उसमें दिखाया गया मार्कअप खोजें)

<input type="number" value="1" min="1">

बाद में · फ़ेल होने वाले एलिमेंट से बना

<input type="number" value="1" min="1" aria-label="Quantity">

फ़ील्ड की कोई id नहीं है, इसलिए सबसे जल्दी होने वाला सुधार aria-label है। दिखने वाला <label> सभी के लिए बेहतर है। लेबल टेक्स्ट “Quantity” का अंदाज़ा फ़ील्ड से लगाया गया है; ज़रूरत हो तो बदलें।

पहले · हमें क्या मिला · आपकी थीम का कोड (उसमें दिखाया गया मार्कअप खोजें)

<input type="number" value="2" min="1">

बाद में · फ़ेल होने वाले एलिमेंट से बना

<input type="number" value="2" min="1" aria-label="Quantity">

AI से ठीक करेंप्रॉम्प्ट दिखाएं

मेरी वेबसाइट harborandpine.example है: एक Shopify स्टोर (Online Store 2.0 थीम, Liquid टेम्पलेट)। एक्सेसिबिलिटी टेस्ट में यह समस्या मिली है और मुझे इसे अपनी थीम में ठीक करना है।

समस्या: फ़ॉर्म एलिमेंट के लेबल होने चाहिए (WCAG 4.1.2)।
कहां: 6 पेजों पर 7 इंस्टेंस, उदाहरण के लिए /products/trail-daypack, /cart, /products/pine-wool-beanie, /products/enamel-camp-mug।

फ़ेल होने वाला एक एलिमेंट, जैसा ब्राउज़र ने उसे रेंडर किया:
```html
<input type="number" value="1" min="1">
```

यह क्यों ज़रूरी है: WCAG 1.3.1, 3.3.2 और 4.1.2 के अनुसार फ़ॉर्म फ़ील्ड के लेबल होने चाहिए। न्यूज़लेटर साइन-अप और सर्च फ़ील्ड में यह समस्या आम है।

क्या बदलना है:
- हर फ़ील्ड को एक <label for="field-id"> एलिमेंट दें, या कम से कम एक aria-label।
- सिर्फ़ प्लेसहोल्डर टेक्स्ट को लेबल नहीं माना जाता।

सुझाया गया बदलाव (आपकी थीम का कोड (उसमें दिखाया गया मार्कअप खोजें)):
```html
<input type="number" value="1" min="1" aria-label="Quantity">
```

आपके जवाब के लिए नियम:
- सटीक बदलाव पहले और बाद के रूप में दिखाएं, और बताएं कि वह किस फ़ाइल या सेटिंग में जाएगा। अगर आपको पहले मेरी फ़ाइल देखनी हो, तो मुझसे उसे पेस्ट करने को कहें।
- विज़ुअल डिज़ाइन और मौजूदा व्यवहार में कोई बदलाव न करें।
- प्रोडक्ट के नाम, कीमतें या टेक्स्ट अपनी ओर से न बनाएं; ऐसे प्लेसहोल्डर इस्तेमाल करें जिन्हें मैं भर सकूं।
- आख़िर में बताएं कि सुधार की जांच ख़ुद कैसे की जा सकती है।
- यह भी बताएं कि कीबोर्ड और स्क्रीन रीडर से इसकी पुष्टि कैसे करें।

अपने सुधार की जांच करें

दोबारा स्कैन करें और पुष्टि करें कि label नियम अब फ़ेल नहीं होता।
हर लेबल पर क्लिक करें और जांचें कि उससे उसका फ़ील्ड फ़ोकस होता है।

विस्तृत मार्गदर्शन: https://dequeuniversity.com/rules/axe/4.13/label?application=playwright

P1अत्यंत गंभीरपुष्टि किया गया फ़ेलियरWCAG 4.1.2

select एलिमेंट का एक्सेसिबल नाम होना चाहिए

मेहनत: कम · ज़िम्मेदार: थीम डेवलपर · 4.1.2 Name, Role, Value

एक ड्रॉपडाउन (अक्सर सॉर्ट या वेरिएंट चुनने वाला) का कोई लेबल नहीं है।

WCAG 4.1.2 के अनुसार select मेन्यू का एक्सेसिबल नाम होना चाहिए।

सबूत

किस जांच से मिला: axe-core का ऑटोमेटेड नियम
स्थिति · कॉन्फ़िडेंस: पुष्टि किया गया फ़ेलियर · उच्च
पता चला: 24 सित॰ 2026 (UTC)
कहां: 1 पेज पर 1 इंस्टेंस

अपेक्षित: select एलिमेंट का एक्सेसिबल नाम होना चाहिए

देखा गया: एलिमेंट का कोई implicit (रैप करने वाला) <label> नहीं है। एलिमेंट का कोई explicit <label> नहीं है। aria-label एट्रिब्यूट मौजूद नहीं है या खाली है। aria-labelledby एट्रिब्यूट मौजूद नहीं है, या ऐसे एलिमेंट की ओर इशारा करता है जो मौजूद नहीं हैं या खाली हैं। एलिमेंट में title एट्रिब्यूट नहीं है। एलिमेंट की डिफ़ॉल्ट सिमैंटिक्स को role="none" या role="presentation" से ओवरराइड नहीं किया गया।

select एलिमेंट का एक्सेसिबल नाम होना चाहिए: /collections/all पर घेरकर दिखाया गया एलिमेंट

इसे कैसे दोहराएं

https://harborandpine.example/collections/all को Chrome या Edge में खोलें।
DevTools (F12) › Elements खोलें, Ctrl+F (Mac पर Cmd+F) दबाएं और यह खोजें: select
DevTools के Accessibility पेन में एलिमेंट का computed Name खाली है।
या पेज पर मुफ़्त axe DevTools ब्राउज़र एक्सटेंशन चलाएं: वह इसे “select-name” के रूप में दिखाता है।

फ़ेल होने वाले एलिमेंट (1 दिखाए गए)

select

<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>

प्रभावित पेज (1)

https://harborandpine.example/collections/all

इसे कैसे ठीक करें

आपके पेज के मार्कअप से बना कोड

select से जुड़ा एक <label> जोड़ें, या aria-label="Sort by" जैसा aria-label।

कोड

पहले · हमें क्या मिला · आपकी थीम का कोड (उसमें दिखाया गया मार्कअप खोजें)

<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>

बाद में · फ़ेल होने वाले एलिमेंट से बना

<select aria-label="[Field label]"><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>

फ़ील्ड की कोई id नहीं है, इसलिए सबसे जल्दी होने वाला सुधार aria-label है। दिखने वाला <label> सभी के लिए बेहतर है। ब्रैकेट वाले टेक्स्ट की जगह फ़ील्ड का लेबल लिखें।

AI से ठीक करेंप्रॉम्प्ट दिखाएं

मेरी वेबसाइट harborandpine.example है: एक Shopify स्टोर (Online Store 2.0 थीम, Liquid टेम्पलेट)। एक्सेसिबिलिटी टेस्ट में यह समस्या मिली है और मुझे इसे अपनी थीम में ठीक करना है।

समस्या: select एलिमेंट का एक्सेसिबल नाम होना चाहिए (WCAG 4.1.2)।
कहां: 1 पेज पर 1 इंस्टेंस, उदाहरण के लिए /collections/all।

फ़ेल होने वाला एक एलिमेंट, जैसा ब्राउज़र ने उसे रेंडर किया:
```html
<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

यह क्यों ज़रूरी है: WCAG 4.1.2 के अनुसार select मेन्यू का एक्सेसिबल नाम होना चाहिए।

क्या बदलना है:
- select से जुड़ा एक <label> जोड़ें, या aria-label="Sort by" जैसा aria-label।

सुझाया गया बदलाव (आपकी थीम का कोड (उसमें दिखाया गया मार्कअप खोजें)):
```html
<select aria-label="[Field label]"><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

आपके जवाब के लिए नियम:
- सटीक बदलाव पहले और बाद के रूप में दिखाएं, और बताएं कि वह किस फ़ाइल या सेटिंग में जाएगा। अगर आपको पहले मेरी फ़ाइल देखनी हो, तो मुझसे उसे पेस्ट करने को कहें।
- विज़ुअल डिज़ाइन और मौजूदा व्यवहार में कोई बदलाव न करें।
- प्रोडक्ट के नाम, कीमतें या टेक्स्ट अपनी ओर से न बनाएं; ऐसे प्लेसहोल्डर इस्तेमाल करें जिन्हें मैं भर सकूं।
- आख़िर में बताएं कि सुधार की जांच ख़ुद कैसे की जा सकती है।
- यह भी बताएं कि कीबोर्ड और स्क्रीन रीडर से इसकी पुष्टि कैसे करें।

अपने सुधार की जांच करें

कलेक्शन और प्रोडक्ट पेज दोबारा स्कैन करें।

विस्तृत मार्गदर्शन: https://dequeuniversity.com/rules/axe/4.13/select-name?application=playwright

P1गंभीरपुष्टि किया गया फ़ेलियरWCAG 2.4.4WCAG 4.1.2

लिंक में पहचाना जा सकने वाला टेक्स्ट होना चाहिए

मेहनत: कम · ज़िम्मेदार: थीम डेवलपर · 2.4.4 Link Purpose (In Context), 4.1.2 Name, Role, Value

कुछ लिंक में ऐसा कोई टेक्स्ट नहीं है जिसे स्क्रीन रीडर पढ़ सके; अक्सर ये सिर्फ़ आइकन वाले लिंक होते हैं, जैसे सोशल आइकन या कार्ट आइकन।

WCAG 2.4.4 और 4.1.2 के अनुसार लिंक का ऐसा एक्सेसिबल नाम होना चाहिए जो उनका मकसद बताए।

सबूत

किस जांच से मिला: axe-core का ऑटोमेटेड नियम
स्थिति · कॉन्फ़िडेंस: पुष्टि किया गया फ़ेलियर · उच्च
पता चला: 24 सित॰ 2026 (UTC)
कहां: 9 पेज पर 36 इंस्टेंस

अपेक्षित: लिंक में पहचाना जा सकने वाला टेक्स्ट होना चाहिए

देखा गया: एलिमेंट टैब ऑर्डर में है और उसमें एक्सेसिबल टेक्स्ट नहीं है। साथ ही: एलिमेंट में ऐसा टेक्स्ट नहीं है जिसे स्क्रीन रीडर पढ़ सकें। aria-label एट्रिब्यूट मौजूद नहीं है या खाली है। aria-labelledby एट्रिब्यूट मौजूद नहीं है, या ऐसे एलिमेंट की ओर इशारा करता है जो मौजूद नहीं हैं या खाली हैं। एलिमेंट में title एट्रिब्यूट नहीं है।

लिंक में पहचाना जा सकने वाला टेक्स्ट होना चाहिए: / पर घेरकर दिखाया गया एलिमेंट

लिंक में पहचाना जा सकने वाला टेक्स्ट होना चाहिए: /collections/all पर घेरकर दिखाया गया एलिमेंट

इसे कैसे दोहराएं

https://harborandpine.example/ को Chrome या Edge में खोलें।
DevTools (F12) › Elements खोलें, Ctrl+F (Mac पर Cmd+F) दबाएं और यह खोजें: a[href$="cart"]
DevTools के Accessibility पेन में एलिमेंट का computed Name खाली है।
या पेज पर मुफ़्त axe DevTools ब्राउज़र एक्सटेंशन चलाएं: वह इसे “link-name” के रूप में दिखाता है।

फ़ेल होने वाले एलिमेंट (4 दिखाए गए)

a[href$="cart"]

<a href="/cart"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 4h2l2.4 11h11l2-8H6.5"></path><circle cx="9" cy="20" r="1.5"></circle><circle cx="18" cy="20" r="1.5"></circle></svg></a>

.social > a:nth-child(1)

<a href="https://instagram.example/harborandpine"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="5"></rect><circle cx="12" cy="12" r="4"></circle></svg></a>

.social > a:nth-child(2)

<a href="https://facebook.example/harborandpine"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M14 8h3V4h-3c-2.8 0-4 1.8-4 4v2H7v4h3v8h4v-8h3l1-4h-4V8.5c0-.3.2-.5.5-.5z"></path></svg></a>

.social > a:nth-child(3)

<a href="https://x.example/harborandpine"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4l16 16M20 4L4 20"></path></svg></a>

प्रभावित पेज (9)

https://harborandpine.example/
https://harborandpine.example/collections/all
https://harborandpine.example/products/trail-daypack
https://harborandpine.example/cart
https://harborandpine.example/pages/about
https://harborandpine.example/products/pine-wool-beanie
https://harborandpine.example/products/enamel-camp-mug
https://harborandpine.example/products/harbor-lantern
https://harborandpine.example/products/insulated-bottle

इसे कैसे ठीक करें

आपके पेज के मार्कअप से बना कोड

नीचे दिए उदाहरणों में लिंक ढूंढें। ज़्यादातर किसी <a> टैग के अंदर आइकन या इमेज होते हैं।
लिंक के अंदर विज़ुअली हिडन टेक्स्ट जोड़ें, या aria-label="Instagram" या aria-label="Cart" जैसा aria-label।
अगर लिंक के अंदर इमेज है, तो इसके बजाय इमेज को अर्थपूर्ण alt टेक्स्ट दें।

कोड

पहले · हमें क्या मिला · आपकी थीम का कोड (उसमें दिखाया गया मार्कअप खोजें)

<a href="/cart">…</a>

बाद में · फ़ेल होने वाले एलिमेंट से बना

<a href="/cart" aria-label="Cart">…</a>

लिंक को “Cart” नाम देता है, जिसका अंदाज़ा उसके लिंक या क्लास से लगाया गया है। जांचें कि यह नाम बताता है कि लिंक क्या करता है।

पहले · हमें क्या मिला · आपकी थीम का कोड (उसमें दिखाया गया मार्कअप खोजें)

<a href="https://instagram.example/harborandpine">…</a>

बाद में · फ़ेल होने वाले एलिमेंट से बना

<a href="https://instagram.example/harborandpine" aria-label="Instagram">…</a>

लिंक को “Instagram” नाम देता है, जिसका अंदाज़ा उसके लिंक या क्लास से लगाया गया है। जांचें कि यह नाम बताता है कि लिंक क्या करता है।

पहले · हमें क्या मिला · आपकी थीम का कोड (उसमें दिखाया गया मार्कअप खोजें)

<a href="https://facebook.example/harborandpine">…</a>

बाद में · फ़ेल होने वाले एलिमेंट से बना

<a href="https://facebook.example/harborandpine" aria-label="Facebook">…</a>

लिंक को “Facebook” नाम देता है, जिसका अंदाज़ा उसके लिंक या क्लास से लगाया गया है। जांचें कि यह नाम बताता है कि लिंक क्या करता है।

पहले · हमें क्या मिला · आपकी थीम का कोड (उसमें दिखाया गया मार्कअप खोजें)

<a href="https://x.example/harborandpine">…</a>

बाद में · फ़ेल होने वाले एलिमेंट से बना

<a href="https://x.example/harborandpine" aria-label="X (Twitter)">…</a>

लिंक को “X (Twitter)” नाम देता है, जिसका अंदाज़ा उसके लिंक या क्लास से लगाया गया है। जांचें कि यह नाम बताता है कि लिंक क्या करता है।

AI से ठीक करेंप्रॉम्प्ट दिखाएं

मेरी वेबसाइट harborandpine.example है: एक Shopify स्टोर (Online Store 2.0 थीम, Liquid टेम्पलेट)। एक्सेसिबिलिटी टेस्ट में यह समस्या मिली है और मुझे इसे अपनी थीम में ठीक करना है।

समस्या: लिंक में पहचाना जा सकने वाला टेक्स्ट होना चाहिए (WCAG 2.4.4, 4.1.2)।
कहां: 9 पेजों पर 36 इंस्टेंस, उदाहरण के लिए /, /collections/all, /products/trail-daypack, /cart।

फ़ेल होने वाला एक एलिमेंट, जैसा ब्राउज़र ने उसे रेंडर किया:
```html
<a href="/cart"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 4h2l2.4 11h11l2-8H6.5"></path><circle cx="9" cy="20" r="1.5"></circle><circle cx="18" cy="20" r="1.5"></circle></svg></a>
```

यह क्यों ज़रूरी है: WCAG 2.4.4 और 4.1.2 के अनुसार लिंक का ऐसा एक्सेसिबल नाम होना चाहिए जो उनका मकसद बताए।

क्या बदलना है:
- नीचे दिए उदाहरणों में लिंक ढूंढें। ज़्यादातर किसी <a> टैग के अंदर आइकन या इमेज होते हैं।
- लिंक के अंदर विज़ुअली हिडन टेक्स्ट जोड़ें, या aria-label="Instagram" या aria-label="Cart" जैसा aria-label।
- अगर लिंक के अंदर इमेज है, तो इसके बजाय इमेज को अर्थपूर्ण alt टेक्स्ट दें।

सुझाया गया बदलाव (आपकी थीम का कोड (उसमें दिखाया गया मार्कअप खोजें)):
```html
<a href="/cart" aria-label="Cart">…</a>
```

आपके जवाब के लिए नियम:
- सटीक बदलाव पहले और बाद के रूप में दिखाएं, और बताएं कि वह किस फ़ाइल या सेटिंग में जाएगा। अगर आपको पहले मेरी फ़ाइल देखनी हो, तो मुझसे उसे पेस्ट करने को कहें।
- विज़ुअल डिज़ाइन और मौजूदा व्यवहार में कोई बदलाव न करें।
- प्रोडक्ट के नाम, कीमतें या टेक्स्ट अपनी ओर से न बनाएं; ऐसे प्लेसहोल्डर इस्तेमाल करें जिन्हें मैं भर सकूं।
- आख़िर में बताएं कि सुधार की जांच ख़ुद कैसे की जा सकती है।
- यह भी बताएं कि कीबोर्ड और स्क्रीन रीडर से इसकी पुष्टि कैसे करें।

अपने सुधार की जांच करें

दोबारा स्कैन करें और पुष्टि करें कि link-name अब नहीं दिखता।
स्क्रीन रीडर चालू रखकर हर लिंक पर Tab करें और उसका नाम सुनें।

विस्तृत मार्गदर्शन: https://dequeuniversity.com/rules/axe/4.13/link-name?application=playwright

P1गंभीरपुष्टि किया गया फ़ेलियरWCAG 1.4.3

एलिमेंट को न्यूनतम कलर कंट्रास्ट अनुपात की सीमा पूरी करनी चाहिए

मेहनत: कम · ज़िम्मेदार: स्टोर मालिक (एडमिन सेटिंग्स) · 1.4.3 Contrast (Minimum)

कुछ टेक्स्ट अपने बैकग्राउंड से इतना अलग नहीं दिखता कि कम दृष्टि वाले लोग उसे पढ़ सकें।

WCAG 1.4.3 सामान्य टेक्स्ट के लिए कम से कम 4.5:1 और बड़े टेक्स्ट के लिए 3:1 का कंट्रास्ट अनुपात मांगता है। हल्के रंग की कीमतें, बैज और बैनर कम दृष्टि वाले लोगों के लिए, और तेज़ रोशनी में सभी के लिए, पढ़ने में मुश्किल होते हैं।

सबूत

किस जांच से मिला: axe-core का ऑटोमेटेड नियम
स्थिति · कॉन्फ़िडेंस: पुष्टि किया गया फ़ेलियर · उच्च
पता चला: 24 सित॰ 2026 (UTC)
कहां: 9 पेज पर 22 इंस्टेंस

अपेक्षित: एलिमेंट को न्यूनतम कलर कंट्रास्ट अनुपात की सीमा पूरी करनी चाहिए

देखा गया: एलिमेंट का कलर कंट्रास्ट 3.09 है, जो पर्याप्त नहीं है (फ़ोरग्राउंड रंग: #ffffff, बैकग्राउंड रंग: #e76f51, फ़ॉन्ट साइज़: 9.8pt (13px), फ़ॉन्ट वेट: normal)। अपेक्षित कंट्रास्ट अनुपात 4.5:1 है।

एलिमेंट को न्यूनतम कलर कंट्रास्ट अनुपात की सीमा पूरी करनी चाहिए: / पर घेरकर दिखाया गया एलिमेंट

एलिमेंट को न्यूनतम कलर कंट्रास्ट अनुपात की सीमा पूरी करनी चाहिए: /collections/all पर घेरकर दिखाया गया एलिमेंट

इसे कैसे दोहराएं

https://harborandpine.example/ को Chrome या Edge में खोलें।
DevTools (F12) › Elements खोलें, Ctrl+F (Mac पर Cmd+F) दबाएं और यह खोजें: .announce
मापा गया कंट्रास्ट अनुपात देखने के लिए Styles पेन में एलिमेंट के रंग के पास वाले कलर स्वैच पर क्लिक करें।
या पेज पर मुफ़्त axe DevTools ब्राउज़र एक्सटेंशन चलाएं: वह इसे “color-contrast” के रूप में दिखाता है।

फ़ेल होने वाले एलिमेंट (4 दिखाए गए)

.announce

<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>

article:nth-child(3) > .badge

<span class="badge">Sale</span>

article:nth-child(3) > .price > .compare

<span class="compare">$72</span>

article:nth-child(4) > .price > .compare

<span class="compare">$40</span>

प्रभावित पेज (9)

https://harborandpine.example/
https://harborandpine.example/collections/all
https://harborandpine.example/products/trail-daypack
https://harborandpine.example/cart
https://harborandpine.example/pages/about
https://harborandpine.example/products/pine-wool-beanie
https://harborandpine.example/products/enamel-camp-mug
https://harborandpine.example/products/harbor-lantern
https://harborandpine.example/products/insulated-bottle

इसे कैसे ठीक करें

आपके पेज के मार्कअप से बना कोड

नीचे दिए गए फ़ेल होने वाले एलिमेंट खोलें और फ़ेलियर सारांश में फ़ोरग्राउंड और बैकग्राउंड रंग नोट करें।
Online Store > Themes > Customize > Theme settings > Colors में, प्रभावित कलर स्कीम के लिए टेक्स्ट का रंग गहरा करें या बैकग्राउंड हल्का करें, जब तक अनुपात कम से कम 4.5:1 न हो जाए।
सेल बैज, प्लेसहोल्डर टेक्स्ट, फ़ुटर लिंक और इमेज पर रखे बटन पर ख़ास ध्यान दें।

कोड

पहले · हमें क्या मिला · Theme settings › Colors, या आपकी थीम की CSS फ़ाइल

<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>

बाद में · फ़ेल होने वाले एलिमेंट से बना

.announce {
  background-color: #b95941; /* was #e76f51: 3.09:1, now 4.59:1 */
}

13px टेक्स्ट के लिए मापा गया अनुपात 3.09:1 है; WCAG 1.4.3 को 4.5:1 चाहिए। #b95941 में रंगत वही रहती है और यह पास होता है। यह वही सेलेक्टर है जो हमारे टेस्ट ने इस्तेमाल किया; हो सकता है आपकी थीम उसी स्टाइल के लिए कोई ज़्यादा व्यापक क्लास इस्तेमाल करती हो।

पहले · हमें क्या मिला · Theme settings › Colors, या आपकी थीम की CSS फ़ाइल

<span class="badge">Sale</span>

बाद में · फ़ेल होने वाले एलिमेंट से बना

.badge {
  background-color: #9f693f; /* was #f4a261: 2.06:1, now 4.59:1 */
}

12px बोल्ड टेक्स्ट के लिए मापा गया अनुपात 2.06:1 है; WCAG 1.4.3 को 4.5:1 चाहिए। #9f693f में रंगत वही रहती है और यह पास होता है। यह वही सेलेक्टर है जो हमारे टेस्ट ने इस्तेमाल किया; हो सकता है आपकी थीम उसी स्टाइल के लिए कोई ज़्यादा व्यापक क्लास इस्तेमाल करती हो।

पहले · हमें क्या मिला · Theme settings › Colors, या आपकी थीम की CSS फ़ाइल

<span class="compare">$72</span>

बाद में · फ़ेल होने वाले एलिमेंट से बना

.compare {
  color: #78736c; /* was #b0a99f: 2.29:1, now 4.62:1 */
}

14px टेक्स्ट के लिए मापा गया अनुपात 2.29:1 है; WCAG 1.4.3 को 4.5:1 चाहिए। #78736c में रंगत वही रहती है और यह पास होता है। यह वही सेलेक्टर है जो हमारे टेस्ट ने इस्तेमाल किया; हो सकता है आपकी थीम उसी स्टाइल के लिए कोई ज़्यादा व्यापक क्लास इस्तेमाल करती हो।

AI से ठीक करेंप्रॉम्प्ट दिखाएं

मेरी वेबसाइट harborandpine.example है: एक Shopify स्टोर (Online Store 2.0 थीम, Liquid टेम्पलेट)। एक्सेसिबिलिटी टेस्ट में यह समस्या मिली है और मुझे इसे अपनी थीम में ठीक करना है।

समस्या: एलिमेंट को न्यूनतम कलर कंट्रास्ट अनुपात की सीमा पूरी करनी चाहिए (WCAG 1.4.3)।
कहां: 9 पेजों पर 22 इंस्टेंस, उदाहरण के लिए /, /collections/all, /products/trail-daypack, /cart।

फ़ेल होने वाला एक एलिमेंट, जैसा ब्राउज़र ने उसे रेंडर किया:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

यह क्यों ज़रूरी है: WCAG 1.4.3 सामान्य टेक्स्ट के लिए कम से कम 4.5:1 और बड़े टेक्स्ट के लिए 3:1 का कंट्रास्ट अनुपात मांगता है। हल्के रंग की कीमतें, बैज और बैनर कम दृष्टि वाले लोगों के लिए, और तेज़ रोशनी में सभी के लिए, पढ़ने में मुश्किल होते हैं।

क्या बदलना है:
- नीचे दिए गए फ़ेल होने वाले एलिमेंट खोलें और फ़ेलियर सारांश में फ़ोरग्राउंड और बैकग्राउंड रंग नोट करें।
- Online Store > Themes > Customize > Theme settings > Colors में, प्रभावित कलर स्कीम के लिए टेक्स्ट का रंग गहरा करें या बैकग्राउंड हल्का करें, जब तक अनुपात कम से कम 4.5:1 न हो जाए।
- सेल बैज, प्लेसहोल्डर टेक्स्ट, फ़ुटर लिंक और इमेज पर रखे बटन पर ख़ास ध्यान दें।

सुझाया गया बदलाव (Theme settings › Colors, या आपकी थीम की CSS फ़ाइल):
```css
.announce {
  background-color: #b95941; /* was #e76f51: 3.09:1, now 4.59:1 */
}
```

आपके जवाब के लिए नियम:
- सटीक बदलाव पहले और बाद के रूप में दिखाएं, और बताएं कि वह किस फ़ाइल या सेटिंग में जाएगा। अगर आपको पहले मेरी फ़ाइल देखनी हो, तो मुझसे उसे पेस्ट करने को कहें।
- विज़ुअल डिज़ाइन और मौजूदा व्यवहार में कोई बदलाव न करें।
- प्रोडक्ट के नाम, कीमतें या टेक्स्ट अपनी ओर से न बनाएं; ऐसे प्लेसहोल्डर इस्तेमाल करें जिन्हें मैं भर सकूं।
- आख़िर में बताएं कि सुधार की जांच ख़ुद कैसे की जा सकती है।
- यह भी बताएं कि कीबोर्ड और स्क्रीन रीडर से इसकी पुष्टि कैसे करें।

अपने सुधार की जांच करें

स्कैन दोबारा चलाएं और पुष्टि करें कि color-contrast अब नहीं दिखता।
सटीक रंगों को किसी कंट्रास्ट चेकर से जांचकर देखें।

विस्तृत मार्गदर्शन: https://dequeuniversity.com/rules/axe/4.13/color-contrast?application=playwright

P3मध्यमपुष्टि किया गया फ़ेलियर

पेज का सारा कंटेंट लैंडमार्क के अंदर होना चाहिए

मेहनत: मध्यम · ज़िम्मेदार: थीम डेवलपर

कुछ कंटेंट किसी पेज लैंडमार्क (header, nav, main या footer) के अंदर नहीं है।

लैंडमार्क की मदद से स्क्रीन रीडर इस्तेमाल करने वाले पेज के अलग-अलग हिस्सों पर सीधे जा सकते हैं। यह WCAG 1.3.1 और 2.4.1 को सपोर्ट करने वाली एक बेस्ट प्रैक्टिस है।

सबूत

किस जांच से मिला: axe-core का ऑटोमेटेड नियम
स्थिति · कॉन्फ़िडेंस: पुष्टि किया गया फ़ेलियर · उच्च
पता चला: 24 सित॰ 2026 (UTC)
कहां: 9 पेज पर 18 इंस्टेंस

अपेक्षित: पेज का सारा कंटेंट लैंडमार्क के अंदर होना चाहिए

देखा गया: पेज का कुछ कंटेंट लैंडमार्क के अंदर नहीं है।

पेज का सारा कंटेंट लैंडमार्क के अंदर होना चाहिए: / पर घेरकर दिखाया गया एलिमेंट

पेज का सारा कंटेंट लैंडमार्क के अंदर होना चाहिए: /cart पर घेरकर दिखाया गया एलिमेंट

इसे कैसे दोहराएं

https://harborandpine.example/ को Chrome या Edge में खोलें।
DevTools (F12) › Elements खोलें, Ctrl+F (Mac पर Cmd+F) दबाएं और यह खोजें: .announce
या पेज पर मुफ़्त axe DevTools ब्राउज़र एक्सटेंशन चलाएं: वह इसे “region” के रूप में दिखाता है।

फ़ेल होने वाले एलिमेंट (2 दिखाए गए)

.announce

<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>

#cookie-banner > p

<p>We use cookies to improve your experience and measure traffic.</p>

प्रभावित पेज (9)

https://harborandpine.example/
https://harborandpine.example/collections/all
https://harborandpine.example/products/trail-daypack
https://harborandpine.example/cart
https://harborandpine.example/pages/about
https://harborandpine.example/products/pine-wool-beanie
https://harborandpine.example/products/enamel-camp-mug
https://harborandpine.example/products/harbor-lantern
https://harborandpine.example/products/insulated-bottle

इसे कैसे ठीक करें

सामान्य मार्गदर्शन

लैंडमार्क से बाहर छूटे कंटेंट (अनाउंसमेंट बार, पॉप-अप, चैट विजेट) को सही लैंडमार्क में रखें या <main> के अंदर ले जाएं।

AI से ठीक करेंप्रॉम्प्ट दिखाएं

मेरी वेबसाइट harborandpine.example है: एक Shopify स्टोर (Online Store 2.0 थीम, Liquid टेम्पलेट)। एक्सेसिबिलिटी टेस्ट में यह समस्या मिली है और मुझे इसे अपनी थीम में ठीक करना है।

समस्या: पेज का सारा कंटेंट लैंडमार्क के अंदर होना चाहिए।
कहां: 9 पेजों पर 18 इंस्टेंस, उदाहरण के लिए /, /collections/all, /products/trail-daypack, /cart।

फ़ेल होने वाला एक एलिमेंट, जैसा ब्राउज़र ने उसे रेंडर किया:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

यह क्यों ज़रूरी है: लैंडमार्क की मदद से स्क्रीन रीडर इस्तेमाल करने वाले पेज के अलग-अलग हिस्सों पर सीधे जा सकते हैं। यह WCAG 1.3.1 और 2.4.1 को सपोर्ट करने वाली एक बेस्ट प्रैक्टिस है।

क्या बदलना है:
- लैंडमार्क से बाहर छूटे कंटेंट (अनाउंसमेंट बार, पॉप-अप, चैट विजेट) को सही लैंडमार्क में रखें या <main> के अंदर ले जाएं।

आपके जवाब के लिए नियम:
- सटीक बदलाव पहले और बाद के रूप में दिखाएं, और बताएं कि वह किस फ़ाइल या सेटिंग में जाएगा। अगर आपको पहले मेरी फ़ाइल देखनी हो, तो मुझसे उसे पेस्ट करने को कहें।
- विज़ुअल डिज़ाइन और मौजूदा व्यवहार में कोई बदलाव न करें।
- प्रोडक्ट के नाम, कीमतें या टेक्स्ट अपनी ओर से न बनाएं; ऐसे प्लेसहोल्डर इस्तेमाल करें जिन्हें मैं भर सकूं।
- आख़िर में बताएं कि सुधार की जांच ख़ुद कैसे की जा सकती है।
- यह भी बताएं कि कीबोर्ड और स्क्रीन रीडर से इसकी पुष्टि कैसे करें।

अपने सुधार की जांच करें

प्रभावित पेजों को दोबारा स्कैन करें।

विस्तृत मार्गदर्शन: https://dequeuniversity.com/rules/axe/4.13/region?application=playwright

P3मध्यमपुष्टि किया गया फ़ेलियर

हेडिंग लेवल एक बार में सिर्फ़ एक बढ़ना चाहिए

मेहनत: मध्यम · ज़िम्मेदार: थीम डेवलपर

हेडिंग लेवल बीच में छूट जाते हैं (जैसे H2 से सीधे H4), जिससे स्क्रीन रीडर इस्तेमाल करने वालों के लिए पेज का स्ट्रक्चर उलझन भरा हो जाता है।

स्क्रीन रीडर इस्तेमाल करने वाले हेडिंग के सहारे पेज पर आगे-पीछे जाते हैं। यह WCAG 1.3.1 को सपोर्ट करने वाली एक बेस्ट प्रैक्टिस है।

सबूत

किस जांच से मिला: axe-core का ऑटोमेटेड नियम
स्थिति · कॉन्फ़िडेंस: पुष्टि किया गया फ़ेलियर · उच्च
पता चला: 24 सित॰ 2026 (UTC)
कहां: 7 पेज पर 7 इंस्टेंस

अपेक्षित: हेडिंग लेवल एक बार में सिर्फ़ एक बढ़ना चाहिए

देखा गया: हेडिंग का क्रम सही नहीं है।

हेडिंग लेवल एक बार में सिर्फ़ एक बढ़ना चाहिए: /collections/all पर घेरकर दिखाया गया एलिमेंट

हेडिंग लेवल एक बार में सिर्फ़ एक बढ़ना चाहिए: /products/trail-daypack पर घेरकर दिखाया गया एलिमेंट

इसे कैसे दोहराएं

https://harborandpine.example/collections/all को Chrome या Edge में खोलें।
DevTools (F12) › Elements खोलें, Ctrl+F (Mac पर Cmd+F) दबाएं और यह खोजें: article:nth-child(1) > a[href$="trail-daypack"] > h3
या पेज पर मुफ़्त axe DevTools ब्राउज़र एक्सटेंशन चलाएं: वह इसे “heading-order” के रूप में दिखाता है।

फ़ेल होने वाले एलिमेंट (3 दिखाए गए)

article:nth-child(1) > a[href$="trail-daypack"] > h3

<h3>Trail Daypack 22L</h3>

<h3>Reviews</h3>

h3:nth-child(3)

<h3>Started on the trail</h3>

प्रभावित पेज (7)

https://harborandpine.example/collections/all
https://harborandpine.example/products/trail-daypack
https://harborandpine.example/pages/about
https://harborandpine.example/products/pine-wool-beanie
https://harborandpine.example/products/enamel-camp-mug
https://harborandpine.example/products/harbor-lantern
https://harborandpine.example/products/insulated-bottle

इसे कैसे ठीक करें

सामान्य मार्गदर्शन

प्रभावित सेक्शन में हेडिंग लेवल ऐसे ठीक करें कि वे बिना कोई लेवल छोड़े क्रम से चलें।
सिर्फ़ टैग बदलें, विज़ुअल स्टाइल नहीं (साइज़ के लिए CSS क्लास इस्तेमाल करें)।

कोड

पहले · हमें क्या मिला · आपकी थीम का कोड (उसमें दिखाया गया मार्कअप खोजें)

<h3>Trail Daypack 22L</h3>

बाद में · अपने हिसाब से बदलने वाला उदाहरण

<h2 class="h3">Trail Daypack 22L</h2>

वह लेवल इस्तेमाल करें जो पेज पर पिछली हेडिंग के बाद आता है (अक्सर एक लेवल ऊपर), और किसी क्लास से रूप पहले जैसा रखें। बदलने से पहले पेज की रूपरेखा जांचें।

पहले · हमें क्या मिला · आपकी थीम का कोड (उसमें दिखाया गया मार्कअप खोजें)

<h3>Reviews</h3>

बाद में · अपने हिसाब से बदलने वाला उदाहरण

<h2 class="h3">Reviews</h2>

पहले · हमें क्या मिला · आपकी थीम का कोड (उसमें दिखाया गया मार्कअप खोजें)

<h3>Started on the trail</h3>

बाद में · अपने हिसाब से बदलने वाला उदाहरण

<h2 class="h3">Started on the trail</h2>

AI से ठीक करेंप्रॉम्प्ट दिखाएं

मेरी वेबसाइट harborandpine.example है: एक Shopify स्टोर (Online Store 2.0 थीम, Liquid टेम्पलेट)। एक्सेसिबिलिटी टेस्ट में यह समस्या मिली है और मुझे इसे अपनी थीम में ठीक करना है।

समस्या: हेडिंग लेवल एक बार में सिर्फ़ एक बढ़ना चाहिए।
कहां: 7 पेजों पर 7 इंस्टेंस, उदाहरण के लिए /collections/all, /products/trail-daypack, /pages/about, /products/pine-wool-beanie।

फ़ेल होने वाला एक एलिमेंट, जैसा ब्राउज़र ने उसे रेंडर किया:
```html
<h3>Trail Daypack 22L</h3>
```

यह क्यों ज़रूरी है: स्क्रीन रीडर इस्तेमाल करने वाले हेडिंग के सहारे पेज पर आगे-पीछे जाते हैं। यह WCAG 1.3.1 को सपोर्ट करने वाली एक बेस्ट प्रैक्टिस है।

क्या बदलना है:
- प्रभावित सेक्शन में हेडिंग लेवल ऐसे ठीक करें कि वे बिना कोई लेवल छोड़े क्रम से चलें।
- सिर्फ़ टैग बदलें, विज़ुअल स्टाइल नहीं (साइज़ के लिए CSS क्लास इस्तेमाल करें)।

सुझाया गया बदलाव (आपकी थीम का कोड (उसमें दिखाया गया मार्कअप खोजें)):
```html
<h2 class="h3">Trail Daypack 22L</h2>
```

आपके जवाब के लिए नियम:
- सटीक बदलाव पहले और बाद के रूप में दिखाएं, और बताएं कि वह किस फ़ाइल या सेटिंग में जाएगा। अगर आपको पहले मेरी फ़ाइल देखनी हो, तो मुझसे उसे पेस्ट करने को कहें।
- विज़ुअल डिज़ाइन और मौजूदा व्यवहार में कोई बदलाव न करें।
- प्रोडक्ट के नाम, कीमतें या टेक्स्ट अपनी ओर से न बनाएं; ऐसे प्लेसहोल्डर इस्तेमाल करें जिन्हें मैं भर सकूं।
- आख़िर में बताएं कि सुधार की जांच ख़ुद कैसे की जा सकती है।
- यह भी बताएं कि कीबोर्ड और स्क्रीन रीडर से इसकी पुष्टि कैसे करें।

अपने सुधार की जांच करें

दोबारा स्कैन करें और HeadingsMap जैसे किसी ब्राउज़र एक्सटेंशन से हेडिंग की रूपरेखा जांचें।

विस्तृत मार्गदर्शन: https://dequeuniversity.com/rules/axe/4.13/heading-order?application=playwright

मैन्युअल समीक्षा ज़रूरी

ऑटोमेटेड टेस्ट ने इन्हें फ़्लैग किया लेकिन फ़ैसला नहीं कर सके, जैसे किसी इमेज के ऊपर लिखा टेक्स्ट या ऐसा कंटेंट जो शायद फ़ोन की स्क्रीन में न समाए। इन्हें फ़ेलियर नहीं गिना जाता। अपने डेवलपर से हर एक की जांच करने को कहें।

समीक्षा ज़रूरीWCAG 4.1.3
कीबोर्ड जर्नी: कीबोर्ड से कार्ट में जोड़ना
Add to cart पर Enter काम कर गया (हेडर में कार्ट की गिनती बदल गई, “कार्ट में जोड़ा गया” जैसा मैसेज दिखा), लेकिन हमें कोई स्टेटस मैसेज या फ़ोकस वाला डायलॉग नहीं मिला, इसलिए हो सकता है स्क्रीन रीडर इस्तेमाल करने वालों को पता न चले कि आइटम जुड़ गया।
1 पेज पर 1 इंस्टेंस · इसे कैसे जांचें
समीक्षा ज़रूरीWCAG 1.4.10
प्रोडक्ट पेज शायद साइड में स्क्रॉल किए बिना पतली स्क्रीन में न समाए
320 CSS पिक्सेल चौड़ाई पर (400% ज़ूम के बराबर) पेज स्क्रीन से 200px ज़्यादा चौड़ा है। डेटा टेबल और मैप स्क्रॉल हो सकते हैं; टेक्स्ट और कंट्रोल नहीं होने चाहिए।
1 पेज पर 2 इंस्टेंस · इसे कैसे जांचें
जांचने वाले एलिमेंट (2 दिखाए गए)
div.icons
```
<div class="icons"> <button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-3.5-3.5"></path></svg></bu
```
div
```
<div> <p style="color:#6a6a60;font-size:14px">Harbor &amp; Pine</p> <h1>Trail Daypack 22L</h1> <p class="price" style="font-size:22px">$128<span class="compare">$150</span></p> <p class="opt-label">Si
```
समीक्षा ज़रूरीWCAG 1.4.10
होम पेज शायद साइड में स्क्रॉल किए बिना पतली स्क्रीन में न समाए
320 CSS पिक्सेल चौड़ाई पर (400% ज़ूम के बराबर) पेज स्क्रीन से 55px ज़्यादा चौड़ा है। डेटा टेबल और मैप स्क्रॉल हो सकते हैं; टेक्स्ट और कंट्रोल नहीं होने चाहिए।
1 पेज पर 3 इंस्टेंस · इसे कैसे जांचें
जांचने वाले एलिमेंट (3 दिखाए गए)
div.icons
```
<div class="icons"> <button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-3.5-3.5"></path></svg></bu
```
article.card
```
<article class="card"><span class="badge">Sale</span><a href="/products/trail-daypack"><img src="/img/beanie.svg"><h3>Pine Wool Beanie</h3></a><p class="price">$32<span class="compare">$40</span></p><
```
button.btn.light
```
<button class="btn light" type="submit">Subscribe</button>
```
समीक्षा ज़रूरीWCAG 1.4.3
एलिमेंट को न्यूनतम कलर कंट्रास्ट अनुपात की सीमा पूरी करनी चाहिए
एलिमेंट का बैकग्राउंड रंग तय नहीं किया जा सका, क्योंकि एलिमेंट में एक इमेज नोड है।
1 पेज पर 1 इंस्टेंस · इसे कैसे जांचें
जांचने वाले एलिमेंट (1 दिखाए गए)
h1
```
<h1>Gear for the long way home</h1>
```

अपने सुधारों का री-टेस्ट करें

जब आपका डेवलपर बदलाव कर ले, तो री-टेस्ट करें। हम उन्हीं पेजों पर वही ऑटोमेटेड जांच, कीबोर्ड टेस्ट और कीबोर्ड जर्नी दोबारा चलाते हैं, और दिखाते हैं कि कौन-सी समस्याएं अब दोहराई नहीं जा सकतीं। 5 री-टेस्ट शामिल हैं।

री-टेस्ट पेड रिपोर्ट पर चलते हैं।

मैन्युअल जांच

ऑटोमेटेड टूल इनका फ़ैसला नहीं कर सकते। काम को पूरा मानने से पहले ये जांच ज़रूर करें।

सिर्फ़ कीबोर्ड से चेकआउट पूरा करें: हमारी ऑटोमेटेड जर्नी चेकआउट बटन पर रुक जाती है और कभी चेकआउट में नहीं जाती।
स्क्रीन रीडर (Mac पर VoiceOver: Cmd+F5; Windows पर NVDA) के साथ फिर से करें और पुष्टि करें कि कीमतें, वेरिएंट और एरर पढ़े जाते हैं।
ब्राउज़र को 200% तक ज़ूम करें और पुष्टि करें कि कुछ भी एक-दूसरे पर नहीं चढ़ता या गायब नहीं होता।
जांचें कि प्रोडक्ट और ब्रैंड वीडियो में सही कैप्शन हैं।
गलतियों के साथ फ़ॉर्म (न्यूज़लेटर, संपर्क, चेकआउट) सबमिट करें और पुष्टि करें कि एरर टेक्स्ट में बताए जाते हैं।
जांचें कि कैरोसेल और पॉप-अप को रोका या बंद किया जा सकता है, Escape की से भी।

एक्सेसिबिलिटी स्टेटमेंट का ड्राफ़्ट

ब्रैकेट वाले हिस्से बदलें और इसे ऐसे पेज पर प्रकाशित करें जिसका लिंक आपके फ़ुटर में हो।

harborandpine.example के लिए एक्सेसिबिलिटी स्टेटमेंट

हम चाहते हैं कि हर कोई harborandpine.example पर खरीदारी कर सके, जिनमें वे लोग भी शामिल हैं जो स्क्रीन रीडर, कीबोर्ड नेविगेशन, मैग्निफ़िकेशन या दूसरी असिस्टिव टेक्नोलॉजी इस्तेमाल करते हैं। हमारा लक्ष्य लेवल AA पर Web Content Accessibility Guidelines (WCAG) 2.2 को पूरा करना है।

हम क्या करते हैं
- हम ऑटोमेटेड एक्सेसिबिलिटी टूल से अपने स्टोर की टेस्टिंग करते हैं और उनमें मिली समस्याएं ठीक करते हैं।
- हम खरीदारी के मुख्य स्टेप (ब्राउज़िंग, प्रोडक्ट पेज, कार्ट और चेकआउट) कीबोर्ड और स्क्रीन रीडर से टेस्ट करते हैं।
- थर्ड-पार्टी ऐप और विजेट जोड़ने से पहले हम उनकी एक्सेसिबिलिटी की समीक्षा करते हैं।

ज्ञात सीमाएं (24 सितंबर 2026 तक)
- कीबोर्ड एक्सेस और फ़ोकस (WCAG 2.1.1)। हम इसे 2026-10-08 तक ठीक करने की योजना बना रहे हैं।
- बिना नाम वाले लिंक और बटन (WCAG 2.4.4, 4.1.2)। हम इसे 2026-10-08 तक ठीक करने की योजना बना रहे हैं।
- बिना टेक्स्ट विकल्प वाली इमेज (WCAG 1.1.1)। हम इसे 2026-10-08 तक ठीक करने की योजना बना रहे हैं।
- बिना लेबल वाले फ़ॉर्म फ़ील्ड (WCAG 4.1.2)। हम इसे 2026-10-08 तक ठीक करने की योजना बना रहे हैं।
- कम कलर कंट्रास्ट (WCAG 1.4.3)। हम इसे 2026-10-08 तक ठीक करने की योजना बना रहे हैं।

फ़ीडबैक और मदद
अगर हमारे स्टोर के किसी भी हिस्से का इस्तेमाल करने में आपको परेशानी हो, तो हमसे [आपका ईमेल] या [आपका फ़ोन नंबर] पर संपर्क करें। हमें पेज और समस्या बताएं, हम आपकी खरीदारी पूरी करने में मदद करेंगे और 5 कार्य दिवसों के भीतर जवाब देंगे।

यह स्टेटमेंट 24 सितंबर 2026 को तैयार किया गया था और साल में कम से कम एक बार इसकी समीक्षा की जाएगी।

सबूतों का लॉग

हर पेज Chromium में लोड किया गया और axe-core 4.13.0 से टेस्ट किया गया। SHA-256 हैश हर पेज के रॉ नतीजों की पहचान करता है।

टेस्ट किए गए पेज, टाइमस्टैम्प और नतीजों के हैश के साथ
पेज	टेस्ट का समय (UTC)	HTTP	समस्याएं	SHA-256
होम पेजhttps://harborandpine.example/	2026-09-24 14:05:00	200	15	da1e5470a57859a864332912dd1e4f62b4c4f64487ba144865b74879519599a3
कलेक्शन पेजhttps://harborandpine.example/collections/all	2026-09-24 14:05:09	200	20	28d8dfcf5ca953af353264a930a351bea3cf23f98a303874b32e5da355a4c8b0
प्रोडक्ट पेजhttps://harborandpine.example/products/trail-daypack	2026-09-24 14:05:18	200	20	68a173ddfd16eeeef5e36d6c0fa9d426769f0d96e358c5e35b67608dd84139b4
कार्टhttps://harborandpine.example/cart	2026-09-24 14:05:27	200	12	5b7945c2cdf779dcef2bd8975d96eb8f42d8dedbf10e767ec80199dd22ce257c
कंटेंट पेजhttps://harborandpine.example/pages/about	2026-09-24 14:05:36	200	9	daf61ae856358a574e63f9357db0bfd9ae6079065acf3aebd5b3c5a7f460e53f
अतिरिक्त पेजhttps://harborandpine.example/products/pine-wool-beanie	2026-09-24 14:08:00	200	20	f708ccd7de34dfb65d59d3716580b6ec15a6420020c8387fa4da4e2ff5bd52d3
अतिरिक्त पेजhttps://harborandpine.example/products/enamel-camp-mug	2026-09-24 14:08:07	200	19	c619bcd29e89d06099d174b9fc19305a42f2fa9bdddb600a750c867fc7477022
अतिरिक्त पेजhttps://harborandpine.example/products/harbor-lantern	2026-09-24 14:08:14	200	20	5720b7433b75050ba413ac74c2bd726b0620aaa68f7918083052383257d5c418
अतिरिक्त पेजhttps://harborandpine.example/products/insulated-bottle	2026-09-24 14:08:21	200	19	6f1972c22e477c9a63e2dfde1123ed759718f6a75e1606b23f208848691510fd

दायरा और तरीका

हमने क्या टेस्ट किया

9 पेज (होम पेज, कलेक्शन पेज, प्रोडक्ट पेज, कार्ट, कंटेंट पेज, अतिरिक्त पेज) Chromium में 1366×900 पर लोड किए गए।
WCAG 2.0, 2.1 और 2.2 लेवल A और AA के लिए axe-core 4.13.0 के नियम, साथ में बेस्ट-प्रैक्टिस नियम (P3 के रूप में दिखाए गए)।
एक कीबोर्ड टेस्ट: होम पेज पर 40 बार Tab दबाकर फ़ोकस ट्रैप और गायब फ़ोकस इंडिकेटर की तलाश।
होम पेज से चेकआउट बटन तक सिर्फ़ कीबोर्ड से शॉपिंग जर्नी (ऊपर देखें)।
होम पेज और प्रोडक्ट पेज पर 320 CSS पिक्सेल की चौड़ाई में रीफ़्लो जांच (WCAG 1.4.10)।

हमने क्या टेस्ट नहीं किया

चेकआउट और पेमेंट पेज, फ़ॉर्म सबमिशन, अकाउंट और लॉगिन के बाद वाले पेज।
ऑटोमेटेड नियमों से आगे, स्क्रीन रीडर असल में क्या बोलता है।
वीडियो कैप्शन और ऑडियो डिस्क्रिप्शन, PDF दस्तावेज़, और थर्ड-पार्टी फ़्रेम के अंदर का कंटेंट।
सरल भाषा, कॉग्निटिव एक्सेसिबिलिटी और ऐसी कोई भी चीज़ जिसके लिए इंसानी समझ ज़रूरी है (मैन्युअल जांच देखें)।

नतीजों को कैसे समझें

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

अपनी वेबसाइट के लिए यह रिपोर्ट पाएं।

अपनी समस्याएं देखने और यह जानने के लिए कि वे आपके लेटर से कैसे मेल खाती हैं, मुफ़्त स्कैन से शुरू करें। एक्सेसिबिलिटी सुधार रिपोर्ट की कीमत $249 है, एक बार का भुगतान, और यह लगभग 10 मिनट में तैयार हो जाती है।

अपनी वेबसाइट मुफ़्त में स्कैन करें

यह रिपोर्ट ऑटोमेटेड टेस्ट के नतीजे बताती है और सुधार का मार्गदर्शन देती है। यह कानूनी सलाह नहीं है और ADA, European Accessibility Act या किसी दूसरे कानून के साथ कंप्लायंस को प्रमाणित नहीं करती।

harborandpine.example

सारांश

ओवरव्यू

वेबसाइट ओवरव्यू

कीबोर्ड शॉपिंग जर्नी

01मुख्य नेविगेशन तक पहुंचना

02कलेक्शन से कोई प्रोडक्ट खोलना

03विकल्प और मात्रा चुनना

04कीबोर्ड से कार्ट में जोड़ना

05कार्ट में बदलाव करना और चेकआउट तक पहुंचना

06चेकआउट

लेटर क्लेम मैप

सुधार योजना

हर समस्या को कैसे ठीक करें

कीबोर्ड फ़ोकस कुकी बैनर में फंसा रहता है

सबूत

इसे कैसे ठीक करें

अपने सुधार की जांच करें

प्रोडक्ट के विकल्प कीबोर्ड से नहीं चुने जा सकते

सबूत

इसे कैसे ठीक करें

कोड

अपने सुधार की जांच करें

बटन में पहचाना जा सकने वाला टेक्स्ट होना चाहिए

सबूत

इसे कैसे ठीक करें

कोड

अपने सुधार की जांच करें

इमेज में वैकल्पिक टेक्स्ट होना चाहिए

सबूत

इसे कैसे ठीक करें

कोड

अपने सुधार की जांच करें

फ़ॉर्म एलिमेंट के लेबल होने चाहिए

सबूत

इसे कैसे ठीक करें

कोड

अपने सुधार की जांच करें

select एलिमेंट का एक्सेसिबल नाम होना चाहिए

सबूत

इसे कैसे ठीक करें

कोड

अपने सुधार की जांच करें

लिंक में पहचाना जा सकने वाला टेक्स्ट होना चाहिए

सबूत

इसे कैसे ठीक करें

कोड

अपने सुधार की जांच करें

एलिमेंट को न्यूनतम कलर कंट्रास्ट अनुपात की सीमा पूरी करनी चाहिए

सबूत

इसे कैसे ठीक करें

कोड

अपने सुधार की जांच करें

पेज का सारा कंटेंट लैंडमार्क के अंदर होना चाहिए

सबूत

इसे कैसे ठीक करें

अपने सुधार की जांच करें

हेडिंग लेवल एक बार में सिर्फ़ एक बढ़ना चाहिए

सबूत

इसे कैसे ठीक करें

कोड

अपने सुधार की जांच करें

मैन्युअल समीक्षा ज़रूरी

कीबोर्ड जर्नी: कीबोर्ड से कार्ट में जोड़ना

प्रोडक्ट पेज शायद साइड में स्क्रॉल किए बिना पतली स्क्रीन में न समाए

होम पेज शायद साइड में स्क्रॉल किए बिना पतली स्क्रीन में न समाए

एलिमेंट को न्यूनतम कलर कंट्रास्ट अनुपात की सीमा पूरी करनी चाहिए

अपने सुधारों का री-टेस्ट करें

मैन्युअल जांच

एक्सेसिबिलिटी स्टेटमेंट का ड्राफ़्ट

सबूतों का लॉग

दायरा और तरीका

हमने क्या टेस्ट किया

हमने क्या टेस्ट नहीं किया

नतीजों को कैसे समझें

अपनी वेबसाइट के लिए यह रिपोर्ट पाएं।