विज़ुअल एक्सेसिबिलिटी टेस्टिंग

टेक्स्ट contrast: ratio का मतलब और उसे कैसे मापें

1.4.3 Contrast (Minimum) (AA) के अनुसार टेक्स्ट और टेक्स्ट की images का background के सामने contrast ratio कम से कम 4.5:1 हो, या large-scale टेक्स्ट के लिए 3:1। WCAG large scale को कम से कम 18 point, या 14 point bold परिभाषित करता है (CSS pixels में 18pt = 24px और 14pt लगभग 18.7px)। Inactive components का टेक्स्ट, शुद्ध सजावट, अदृश्य टेक्स्ट, ऐसी तस्वीर का हिस्सा टेक्स्ट जिसमें अन्य महत्वपूर्ण दृश्य सामग्री हो, और logotypes पर contrast आवश्यकता नहीं है। ज़्यादा सख़्त 1.4.6 Contrast (Enhanced) AAA है, 7:1 और 4.5:1 के साथ।

Ratio डिज़ाइन की राय नहीं है। WCAG इसे दोनों रंगों की relative luminance से परिभाषित करता है — हर रंग की सापेक्ष चमक, 0 (सबसे गहरा काला) से 1 (सबसे हल्का सफ़ेद) के पैमाने पर, sRGB values से गणना की गई — और परिणामी ratio 1:1 से 21:1 तक होता है। WCAG की परिभाषा लागू करने वाला contrast checker इस्तेमाल करें; आँख से अंदाज़ा न लगाएँ।

उदाहरण के लिए: सफ़ेद पर grey #767676 का ratio 4.54:1 है और body text के लिए पास है; सफ़ेद पर #777777 का 4.48:1 है और सामान्य आकार के टेक्स्ट के लिए फ़ेल है (ऊपर round न करें), हालाँकि large text के लिए पास है। रंगों को वैसे मापें जैसे वे render होते हैं: photo या gradient पर टेक्स्ट को सबसे ख़राब बिंदु पर जाँचें, और hover, focus, visited, selected और error states हर एक का अलग माप चाहिए।

• रंग devtools के colour picker से या computed styles से लें, डिज़ाइन फ़ाइल से नहीं।
• Body text, secondary text, links, button labels, input text और hint text, table headers, badges और toast संदेश जाँचें।
• Images और semi-transparent overlays पर टेक्स्ट को उसके पीछे के सबसे हल्के हिस्से पर जाँचें।
• Disabled controls छूट में हैं, पर जो control सिर्फ़ disabled दिखता है और काम करता है, वह नहीं।

आज़माएँ: कलर कन्वर्टर आज़माएँ: HEX / RGB / HSL कन्वर्टर

Non-text contrast: components, states और graphics

1.4.11 Non-text Contrast (AA) के अनुसार UI components और उनकी states पहचानने के लिए ज़रूरी दृश्य जानकारी, और content समझने के लिए ज़रूरी graphics के हिस्सों का आसपास के रंगों के सामने 3:1 होना चाहिए। Inactive components और बिना बदले ब्राउज़र-default controls छूट में हैं, और वे graphics भी जिनकी एक ख़ास प्रस्तुति आवश्यक है।

आम failures: हल्के input borders (सफ़ेद पर #CCCCCC border 1.61:1 है), checkbox जिसकी checked state सिर्फ़ हल्के रंग से अलग है, हल्के grey icon-only buttons, background से मुश्किल से अलग focus indicators, और chart lines या pie segments जो सिर्फ़ मिलते-जुलते pastel रंगों से अलग हैं। अगर फ़ील्ड का कोई दिखने वाला border ही नहीं है, तो जाँचें कि कुछ और उसे फ़ील्ड के रूप में पहचान देता है — 3:1 पूरा करने वाला background fill या underline।

रंग का उपयोग

1.4.1 Use of Color (A) कहता है कि जानकारी देने, action बताने, प्रतिक्रिया माँगने या element अलग दिखाने का एकमात्र दृश्य साधन रंग न हो। यह contrast से अलग है: दो रंग contrast पास करके भी लाल-हरे की कमी वाले व्यक्ति के लिए अभिन्न हो सकते हैं।

पेज को greyscale में बदलकर टेस्ट करें (OS का colour filter या ब्राउज़र का vision-deficiency emulation) और पूछें: क्या मैं अब भी बता सकता हूँ कि किस फ़ील्ड में error है, कौन-सा link है, chart की कौन-सी line कौन-सी है, कौन-सा status “failed” है? Body text के अंदर जो links आसपास के टेक्स्ट से सिर्फ़ रंग से अलग हैं, उन्हें underline या कोई और non-colour संकेत चाहिए।

Text alternatives: alt text क्या हो, कैसे तय करें

1.1.1 Non-text Content (A) ऐसा text alternative माँगता है जो समान उद्देश्य पूरा करे। टूल बता सकते हैं कि alt attribute मौजूद है या नहीं; वह सही है या नहीं, यह केवल इंसान तय कर सकता है। पहले हर image को वर्गीकृत करें, फिर टेक्स्ट को आँकें।

• Informative image — alt संदर्भ में image जो जानकारी जोड़ती है उसे संक्षेप में बताए: “chart.png” के बजाय “Bar chart: नए checkout के बाद refunds 9% से घटकर 4% हुए”।
• Decorative image — ख़ाली alt (alt="") या CSS background, ताकि screen reader उसे छोड़ दे। alt="decorative swirl" वाली सजावटी image सिर्फ़ शोर है।
• Functional image — जो image link या button है: alt action या गंतव्य बताए (“Search”, “Invoice PDF डाउनलोड करें”), तस्वीर नहीं (“magnifying glass”)।
• Complex image — charts, diagrams, maps: पहचानने वाला छोटा alt, साथ में पास ही लंबा विवरण या data table जिसमें विवरण हो।
• Images of text — 1.4.5 Images of Text (AA) माँगता है कि जहाँ तकनीक वही दृश्य प्रस्तुति दे सके, वहाँ images of text के बजाय असली टेक्स्ट इस्तेमाल हो; customizable images और आवश्यक प्रस्तुति (जैसे logotypes) छूट में हैं।
• Redundant alt — अगर पास का टेक्स्ट पहले से वही कहता है तो image decorative हो सकती है; caption दोहराने से screen reader यूज़र दो बार सुनता है।

Resize text, 320 CSS px पर reflow और text spacing

1.4.4 Resize Text (AA): टेक्स्ट को assistive technology के बिना 200 प्रतिशत तक बढ़ाया जा सके, बिना content या functionality खोए। 200% browser zoom और बड़े default font size से टेस्ट करें, और कटे हुए टेक्स्ट, overlapping elements और स्क्रीन से बाहर जाते controls देखें।

1.4.10 Reflow (AA): content 320 CSS pixels के बराबर चौड़ाई (vertical scroll वाले content के लिए) या 256 CSS pixels ऊँचाई (horizontal scroll वाले content के लिए) पर दो दिशाओं में scroll किए बिना काम करे। WCAG नोट करता है कि 320 CSS pixels, 400% zoom पर 1280 px चौड़े viewport के बराबर है — यही व्यावहारिक टेस्ट है: ब्राउज़र विंडो 1280 px पर सेट करें, 400% zoom करें, और पूरा पेज सिर्फ़ vertical scroll से पढ़ें। Maps, diagrams, video, games, presentations और data tables उन हिस्सों के लिए दो-दिशा scroll रख सकते हैं।

1.4.12 Text Spacing (AA): जब यूज़र line height को font size का 1.5 गुना, paragraphs के बाद spacing 2 गुना, letter spacing 0.12 गुना और word spacing 0.16 गुना सेट करे, तो content या functionality न खोए। नीचे का override bookmarklet या user-stylesheet extension से लगाएँ और कटे labels, overlapping टेक्स्ट और कटे टेक्स्ट वाले buttons देखें। WCAG में उन भाषाओं और लिपियों के लिए अपवाद है जो इनमें से कोई property इस्तेमाल नहीं करतीं — यह अरबी के लिए प्रासंगिक है, जहाँ letter spacing जुड़े अक्षरों से टकराती है; इसे कैसे लागू करें, यह टीम के साथ तय करें।

/* WCAG 1.4.12 text-spacing test override */
* {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}
p {
  margin-bottom: 2em !important;
}

Target size

2.5.8 Target Size (Minimum) (AA), जो WCAG 2.2 में नया है, pointer targets को कम से कम 24 by 24 CSS pixels माँगता है, अपवादों के साथ। छोटा target पास होता है अगर उस पर केंद्रित 24 CSS px व्यास का वृत्त किसी दूसरे target या दूसरे छोटे target के वृत्त को न काटे; यह तब भी पास होता है जब उसी पेज पर आकार पूरा करने वाला समकक्ष control हो, जब वह वाक्य के भीतर inline हो, जब उसका आकार user agent तय करे और author ने न बदला हो, या जब प्रस्तुति आवश्यक या कानूनी रूप से ज़रूरी हो।

Devtools में मापें (element का box, उस padding सहित जो clickable क्षेत्र का हिस्सा है)। आम failures: dialogs और chips में close “×” icons, सटे हुए pagination नंबर, छोटे checkboxes, और table cells में icons की पंक्तियाँ। Apple और Google की mobile platform guidelines इस न्यूनतम से बड़े touch targets की सलाह देती हैं; native apps टेस्ट करते समय platform guidance भी इस्तेमाल करें।

Motion, animation और reduced-motion प्राथमिकता

तीन criteria मायने रखते हैं। 2.2.2 Pause, Stop, Hide (A): जो moving, blinking या scrolling content अपने आप शुरू होता है, पाँच सेकंड से ज़्यादा चलता है और दूसरे content के साथ दिखता है, उसे pause, stop या hide करने का तरीका चाहिए — carousels और marquee banners आम संदिग्ध हैं। 2.3.1 Three Flashes or Below Threshold (A): कुछ भी किसी एक सेकंड में तीन बार से ज़्यादा flash न करे, जब तक flash general और red flash thresholds से नीचे न हो। 2.3.3 Animation from Interactions (AAA): interaction से शुरू motion animation बंद किया जा सके, जब तक वह आवश्यक न हो।

भले प्रोजेक्ट AA को लक्ष्य करे, OS की “reduce motion” setting का सम्मान करना सस्ता और अपेक्षित है। ब्राउज़र इसे prefers-reduced-motion media feature से देते हैं। OS में reduce motion चालू करें (या devtools में emulate करें) और सत्यापित करें कि parallax, zoom-in page transitions, अपने आप चलने वाला background video और बड़े sliding effects हटे हैं या सादे fade से बदले गए हैं।

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Dark mode, high contrast और forced colours

Dark theme दूसरी दृश्य प्रस्तुति है, और हर contrast जाँच उस पर स्वतंत्र रूप से लागू होती है। आम dark-mode defects: brand रंग जो सफ़ेद पर पास और लगभग-काले पर फ़ेल होते हैं, transparent PNG logos और गहरी stroke वाले icons जो ग़ायब हो जाते हैं, हल्के background के लिए बने focus rings, light-theme palette रखने वाले charts, और card या फ़ील्ड की एकमात्र सीमा के रूप में shadows। OS setting या devtools के prefers-color-scheme emulation से theme बदलें और contrast pass दोबारा चलाएँ।

Forced-colours या high-contrast mode (जैसे Windows contrast themes) के साथ भी टेस्ट करें। ब्राउज़र author के रंग बदल देता है, इसलिए केवल background रंग या background images से दी गई जानकारी ग़ायब हो सकती है: backgrounds से बने कस्टम checkboxes, CSS backgrounds के रूप में बने icons, और केवल box-shadow पर टिके focus styles।

Checklist: विज़ुअल एक्सेसिबिलिटी test cases

नीचे की checklist अंग्रेज़ी में है ताकि test management टूल में सीधे कॉपी हो सके; उसके बिंदु हिंदी में ये हैं:

• Contrast — body, secondary, link, button, input और hint टेक्स्ट कम से कम 4.5:1 (बड़ा टेक्स्ट 3:1) (1.4.3); images/gradients पर टेक्स्ट सबसे ख़राब बिंदु पर मापा जाए; hover, focus, selected, visited और error states मापे जाएँ; input borders, icons, checkbox/radio states और focus indicator कम से कम 3:1 (1.4.11); समझने के लिए ज़रूरी chart elements पड़ोसी रंगों के मुकाबले कम से कम 3:1 (1.4.11)।
• रंग — greyscale में भी errors, links, statuses और chart series अलग पहचाने जा सकें (1.4.1)।
• Images — हर image वर्गीकृत हो: informative, decorative, functional या complex (1.1.1); functional images action बताएँ, decorative का alt="" हो; logos के अलावा images of text न हों (1.4.5)।
• Zoom और layout — 200% ज़ूम पर कोई टेक्स्ट कटा या overlap न हो और सभी फ़ंक्शन उपलब्ध हों (1.4.4); 1280px पर 400% (= 320 CSS px) में सिर्फ़ vertical scroll हो, 2-D कंटेंट को छोड़कर (1.4.10); text-spacing override से कुछ कटे या overlap न हो (1.4.12)।
• Targets और motion — pointer targets कम से कम 24×24 CSS px हों या किसी exception में आएँ (2.5.8); 5 सेकंड से ज़्यादा अपने-आप चलने वाला कंटेंट pause, stop या hide हो सके (2.2.2); एक सेकंड में 3 से ज़्यादा बार flashing न हो (2.3.1); reduce-motion setting ग़ैर-ज़रूरी motion हटा दे।
• Themes — dark theme में पूरा contrast pass दोबारा हो; forced colours/high contrast में controls, icons और focus दिखते रहें।

VISUAL A11Y CHECKLIST — <page / screen / build / theme>

Contrast
[ ] Body, secondary, link, button, input and hint text >= 4.5:1 (large text >= 3:1) (1.4.3)
[ ] Text over images/gradients measured at the worst point
[ ] Hover, focus, selected, visited and error states measured
[ ] Input borders, icons, checkbox/radio states, focus indicator >= 3:1 (1.4.11)
[ ] Chart elements needed for understanding >= 3:1 against neighbours (1.4.11)

Colour
[ ] In greyscale, errors, links, statuses and chart series are still distinguishable (1.4.1)

Images
[ ] Each image classified: informative / decorative / functional / complex (1.1.1)
[ ] Functional images describe the action; decorative have alt=""
[ ] No images of text except logos (1.4.5)

Zoom & layout
[ ] 200% zoom: no clipped or overlapping text, all functions available (1.4.4)
[ ] 1280px at 400% (= 320 CSS px): vertical scroll only, except 2-D content (1.4.10)
[ ] Text-spacing override: nothing truncated or overlapping (1.4.12)

Targets & motion
[ ] Pointer targets >= 24x24 CSS px or meet an exception (2.5.8)
[ ] Auto-moving content > 5 s can be paused/stopped/hidden (2.2.2)
[ ] No flashing more than 3 times per second (2.3.1)
[ ] Reduce-motion setting removes non-essential motion

Themes
[ ] Dark theme: full contrast pass repeated
[ ] Forced colours/high contrast: controls, icons and focus still visible

आज़माएँ: AI QA चेकलिस्ट जनरेटर

आम defects, bug titles के रूप में

रिपोर्ट में मापे गए रंग और ratio लिखें, screenshot लगाएँ और criterion का नाम दें। “#9E9E9E on #FFFFFF = 2.68:1, आवश्यक 4.5:1” वाला contrast bug बिना बहस के ठीक होता है।

• “Login: सफ़ेद पर hint text #999999 का ratio 2.85:1, 4.5:1 से कम (1.4.3)”
• “Profile फ़ॉर्म: सफ़ेद पर input borders #CCCCCC 1.61:1, फ़ील्ड पहचाने नहीं जाते (1.4.11)”
• “Orders table: ‘Failed’ और ‘Paid’ status केवल लाल/हरे dot से (1.4.1)”
• “Header search बटन: image alt ‘magnifier icon’ है, action ‘Search’ नहीं (1.1.1)”
• “Pricing पेज 1280px/400% zoom पर: comparison cards को horizontal scroll चाहिए (1.4.10)”
• “Chip close buttons 16×16 CSS px के और एक-दूसरे से सटे (2.5.8)”
• “Home carousel हर 4 सेकंड में आगे बढ़ता है, pause control नहीं (2.2.2)”
• “Dark theme: brand blue पर primary button टेक्स्ट 3.1:1 (1.4.3)”

आज़माएँ: AI बग टाइटल जनरेटर

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

संदर्भ

• Web Content Accessibility Guidelines (WCAG) 2.2W3C · 2024W3C की Recommendation जो सुलभ वेब कंटेंट के लिए टेस्ट करने योग्य success criteria तय करती है — चार सिद्धांतों और तीन conformance स्तरों (A, AA, AAA) में व्यवस्थित।
• Understanding WCAG 2.2W3C Web Accessibility Initiative (WAI)WCAG 2.2 की हर guideline और success criterion की व्याख्या: उद्देश्य, किसे लाभ, उदाहरण और तकनीकें (नॉर्मेटिव नहीं)।
• How to Meet WCAG (Quick Reference)W3C Web Accessibility Initiative (WAI)WCAG 2.2 के हर success criterion की फ़िल्टर करने योग्य सूची, पर्याप्त तकनीकों और आम विफलताओं के साथ।
• Easy Checks – A First Review of Web AccessibilityW3C Web Accessibility Initiative (WAI)पूरे मूल्यांकन से पहले कोई भी कर सके ऐसी शुरुआती जाँचें — पेज टाइटल, टेक्स्ट विकल्प, हेडिंग, कंट्रास्ट, टेक्स्ट रीसाइज़, कीबोर्ड एक्सेस।
• Accessibility — MDNMDN Web Docs (Mozilla)सुलभ वेब पेज बनाने और जाँचने की व्यावहारिक गाइड: सिमैंटिक HTML, ARIA, कीबोर्ड सपोर्ट और टेस्टिंग।
• Accessibility — Human Interface GuidelinesAppleiOS और अन्य प्लेटफ़ॉर्म के लिए Apple की एक्सेसिबिलिटी डिज़ाइन गाइडेंस: VoiceOver, Dynamic Type, कंट्रास्ट, टच टारगेट और मोशन।
• Test your app's accessibilityAndroid Developers (Google)Android ऐप की एक्सेसिबिलिटी को TalkBack जैसी सेवाओं से मैन्युअली और प्लेटफ़ॉर्म के टेस्टिंग टूल से ऑटोमेटेड तरीके से कैसे जाँचें।