Web Accessibility म्हणजे काय? WCAG आणि सर्वसमावेशक डिझाइन
Web accessibility म्हणजे वेबसाइट्स आणि अॅप्स अशा प्रकारे बनवणे की अपंग लोक ते वापरू शकतील — ते अंध असून स्क्रीन रीडर वापरत असोत, माउस वापरू शकत नसोत, कमी दृष्टी किंवा रंगांधळेपणा असो, कर्णबधिर असोत किंवा संज्ञानात्मक किंवा शिकण्याशी संबंधित अपंगत्व असो. प्रत्यक्षात त्यासाठी प्रतिमांसाठी मजकुरी पर्याय, पुरेसा रंग कॉन्ट्रास्ट, योग्य labels असलेले फॉर्म, आणि फक्त keyboard वापरून सगळे चालणे अशा गोष्टी येतात. त्यासाठीचे आंतरराष्ट्रीय मानक WCAG आहे, W3C चे Web Content Accessibility Guidelines.
Accessibility ला अनेकदा a11y असे लहान केले जाते — “a”, मग 11 अक्षरे, मग “y”.
AI सह बनवताना accessibility का महत्त्वाची आहे
AI builders असे अॅप्स चांगले बनवतात जे दिसायला बरोबर असतात. Accessibility मुख्यतः स्क्रीनशॉटमध्ये न दिसणाऱ्या गोष्टींबद्दल आहे: एखादे बटण खरोखर बटण आहे का, एखाद्या input ला स्क्रीन रीडर सांगू शकेल असे label आहे का, Tab की वापरून मेनूपर्यंत पोहोचता येते का.
त्यामुळे विचारणे महत्त्वाचे आहे:
- हे सहज चुकते. सानुकूल शैलीतील dropdown परिपूर्ण दिसू शकतो आणि माउसशिवाय वापरता येत नाही. तुम्ही तपासल्याशिवाय ते लक्षात येत नाही.
- सुरुवातीला बरोबर करणे स्वस्त असते. पहिल्या prompt पासूनच accessible components मागितल्यास जवळजवळ काहीच खर्च येत नाही. पूर्ण झालेल्या अॅपमध्ये नंतर बदल करणे म्हणजे प्रत्येक स्क्रीनला हात लावणे.
- ते सर्वांना मदत करते. Captions गोंगाटाच्या ठिकाणी असलेल्या लोकांना मदत करतात, चांगला कॉन्ट्रास्ट उन्हात फोनवर असलेल्या लोकांना मदत करतो, आणि स्पष्ट labels सर्वांना फॉर्म जलद भरायला मदत करतात.
- ते SEO शी जोडलेले आहे. योग्य headings, वर्णनात्मक links आणि alt text सर्च इंजिनना तुमची पेजेस समजायलाही मदत करतात — AI ने बनवलेल्या वेबसाइट्ससाठी SEO पहा.
- ते आवश्यक असू शकते. तुम्ही कुठे काम करता आणि कोणाला सेवा देता त्यानुसार accessibility कायदेशीर बंधन असू शकते.
रोजच्या आयुष्यातील उदाहरण
इमारतीच्या प्रवेशद्वाराचा विचार करा.
पायऱ्या अनेक लोकांसाठी ठीक आहेत. व्हीलचेअर वापरणाऱ्यांसाठी रॅम्प काम करतो — आणि लहान मुलांच्या गाड्या घेऊन आलेल्या पालकांसाठी, ट्रॉली घेऊन आलेल्या डिलिव्हरी कामगारांसाठी आणि सामान घेऊन जाणाऱ्या प्रवाशांसाठीही. स्वयंचलित दरवाजे, स्पष्ट फलक, लिफ्टच्या बटणांवर ब्रेल आणि चांगला प्रकाश, प्रत्येक जण कोणासाठी तरी एक अडथळा दूर करतो.
Web accessibility ही डिजिटल जागांसाठीची तीच कल्पना आहे: तुमच्या अॅपचे रॅम्प, फलक आणि हँडरेल्स. आणि इमारतीप्रमाणेच, काँक्रीट सुकल्यानंतर रॅम्प जोडण्यापेक्षा आराखड्यातच रॅम्प समाविष्ट करणे खूप सोपे असते.
WCAG थोडक्यात
WCAG W3C च्या Web Accessibility Initiative कडून प्रकाशित होते. सध्याची आवृत्ती WCAG 2.2 आहे, जी ऑक्टोबर 2023 मध्ये प्रथम प्रकाशित झाली. ती मागास सुसंगत आहे: WCAG 2.2 पूर्ण करणारा मजकूर 2.1 आणि 2.0 लाही पूर्ण करतो, आणि W3C नवीनतम आवृत्ती वापरण्याची शिफारस करते. WCAG 2.2 ला ISO/IEC 40500:2025 हे आंतरराष्ट्रीय मानक म्हणूनही मान्यता मिळाली आहे. WCAG 3 हे खूप वेगळे असून ते सुरुवातीच्या मसुद्याच्या स्वरूपात आहे, पूर्ण झालेले मानक नाही.
WCAG चार तत्त्वांखाली मांडलेले आहे, ज्यांना अनेकदा POUR असे लक्षात ठेवले जाते:
| तत्त्व | अर्थ | उदाहरणे |
|---|---|---|
| Perceivable (जाणता येण्याजोगे) | लोक त्यांना वापरत असलेल्या इंद्रियांनी मजकूर आत्मसात करू शकतात | प्रतिमांसाठी alt text, व्हिडिओसाठी captions, पुरेसा कॉन्ट्रास्ट |
| Operable (चालवता येण्याजोगे) | लोक नियंत्रणे वापरू शकतात आणि नेव्हिगेट करू शकतात | Keyboard प्रवेश, वाढवता न येणारी वेळमर्यादा नाही, दिसणारा focus |
| Understandable (समजण्याजोगे) | मजकूर आणि वर्तन अर्थपूर्ण आहेत | स्पष्ट labels, उपयुक्त error messages, सुसंगत नेव्हिगेशन |
| Robust (मजबूत) | विविध browsers आणि assistive technologies सोबत चालते | योग्य HTML घटक, नियंत्रणांसाठी योग्य नावे आणि roles |
प्रत्येक मार्गदर्शक तत्त्वात तीन स्तरांवर तपासता येण्याजोगे success criteria आहेत:
- Level A — किमान. हे पूर्ण न झाल्यास काही लोक पूर्णपणे अडतात.
- Level AA — मानक लक्ष्य, आणि बहुतेक कायदे व धोरणे ज्याकडे निर्देश करतात तो स्तर.
- Level AAA — सर्वोच्च स्तर. काही ठिकाणी त्याचे ध्येय ठेवणे उपयुक्त आहे, पण काही मजकूर ते पूर्ण करू शकत नसल्यामुळे W3C संपूर्ण साइटसाठी ते अनिवार्य करण्याची शिफारस करत नाही.
WCAG 2.2 ने 2.1 मध्ये नऊ success criteria जोडले, ज्यात AA स्तरावरील Target Size (Minimum) समाविष्ट आहे — क्लिक करता येणारी लक्ष्ये साधारणपणे किमान 24 बाय 24 CSS pixels असावीत, अपवाद वगळता — आणि Accessible Authentication (Minimum), जे स्मृती किंवा कोड्यांवर अवलंबून असणाऱ्या लॉगिन पायऱ्यांना मर्यादा घालते, जसे पासवर्ड पेस्ट करू न देता पुन्हा टाइप करायला लावणे. त्याने जुना “Parsing” criterion कालबाह्य म्हणून काढूनही टाकला.
एक प्रत्यक्ष उदाहरण: साइन-अप फॉर्म
AI ने तयार केला असेल असा एक साइन-अप फॉर्म आणि accessibility तपासणीत काय सापडते ते पाहा:
| समस्या | कोणावर परिणाम होतो | दुरुस्ती |
|---|---|---|
| Inputs मध्ये labels ऐवजी placeholder मजकूर ("Email") वापरला आहे | स्क्रीन रीडर वापरणारे वापरकर्ते; टाइप करू लागल्यावर फील्ड कशासाठी होते ते विसरणारे कोणीही | प्रत्येक input ला जोडलेला दिसणारा <label> |
| पांढऱ्या पार्श्वभूमीवर फिकट राखाडी मजकूर, 4.5:1 पेक्षा खूप कमी कॉन्ट्रास्ट | कमी दृष्टी असलेले लोक, उन्हात बाहेर असलेले कोणीही | 4.5:1 कॉन्ट्रास्ट गुणोत्तर पूर्ण करणारा गडद मजकूर |
| Errors फक्त लाल बॉर्डरने दाखवले आहेत | रंगांधळे वापरकर्ते, स्क्रीन रीडर वापरणारे वापरकर्ते | फील्डच्या शेजारी मजकूर संदेश, जो स्क्रीन रीडरला सांगितला जातो |
"Sign up" हे शैलीकृत <div> आहे, <button> नाही | Keyboard आणि स्क्रीन रीडर वापरणारे ते सक्रिय करू शकत नाहीत | खरा <button> घटक वापरा |
| फील्ड्समधून Tab करताना दिसणारी बाह्यरेषा नाही | Keyboard वापरणाऱ्यांना ते कुठे आहेत हे कळत नाही | स्पष्ट focus शैली |
| लोगो प्रतिमेला alt text नाही | स्क्रीन रीडर वापरणाऱ्यांना फाईलचे नाव ऐकू येते | "Acme Bookings" सारखा alt text |
यापैकी कोणत्याही दुरुस्तीने फॉर्म कसा दिसतो ते फारसे बदलत नाही. पण त्या सगळ्यांमुळे काही लोक तो अजिबात वापरू शकतात की नाही हे बदलते.
महत्त्वाच्या संज्ञा
| संज्ञा | अर्थ |
|---|---|
| Screen reader | स्क्रीन मोठ्याने वाचून दाखवणारे किंवा ब्रेल डिस्प्लेला पाठवणारे सॉफ्टवेअर, जसे VoiceOver, NVDA किंवा JAWS. |
| Alt text | प्रतिमेचे मजकुरी वर्णन, जे स्क्रीन रीडर वाचतो. सजावटीच्या प्रतिमांना रिकामा alt text दिला जातो, म्हणजे त्या वगळल्या जातात. |
| Contrast ratio | मजकूर आणि पार्श्वभूमी रंगांमधील फरक, 1:1 ते 21:1. |
| Keyboard navigation | माउसऐवजी Tab, Enter, Space आणि बाण कीज वापरून साइट वापरणे. |
| Focus indicator | कीबोर्ड कोणत्या घटकावर आहे हे दाखवणारी दिसणारी बाह्यरेषा. |
| Semantic HTML | कामासाठी योग्य घटक वापरणे — <button>, <nav>, <h2> — जेणेकरून browsers आणि assistive tech पेज समजू शकतील. |
| ARIA | सानुकूल नियंत्रणांचे assistive technology ला वर्णन करणारे अतिरिक्त गुणधर्म. जपून वापरावेत; नेटिव्ह HTML घटक आधी येतात. |
| Assistive technology | संगणक वापरण्यासाठी लोक वापरत असलेली साधने, स्क्रीन रीडरपासून switch devices आणि voice control पर्यंत. |
सामान्य गैरसमज
- “Accessibility फक्त अंध वापरकर्त्यांसाठी महत्त्वाची आहे.” ती दृष्टी, हालचाल, श्रवण, बोलणे आणि संज्ञानात्मक अपंगत्वांना, तसेच हात मोडल्यासारख्या तात्पुरत्या परिस्थितींना लागू होते.
- “Accessible साइट्स साध्या दिसतात.” Accessibility काही गोष्टींवर मर्यादा घालते — कॉन्ट्रास्ट, focus शैली, मजकुराचा आकार — पण चांगल्या दिसणाऱ्या accessible साइट्स हा नियम आहे, अपवाद नाही.
- “स्वयंचलित तपासणी 100 म्हणते, म्हणजे आपण झालो.” स्वयंचलित साधने फक्त काही समस्या पकडतात. Alt text खरोखर अर्थपूर्ण आहे का, किंवा स्क्रीन रीडरसोबत एखादा प्रवाह अर्थपूर्ण आहे का, हे तपासायला माणूस लागतो.
- “एखादा overlay widget आपल्याला compliant करेल.” वर बसवलेले toolbars तुमच्या कोडमधील गहाळ labels किंवा तुटलेला keyboard प्रवेश दुरुस्त करू शकत नाहीत. स्रोत दुरुस्त करा.
- “आमच्याकडे अपंग वापरकर्ते नाहीत.” कदाचित तुम्हाला ते माहित नसेल. अनेक अपंगत्व दिसत नाहीत, आणि अडथळ्याला सामोरे जाणारे लोक सहसा फक्त निघून जातात.
तुमच्या AI builder कडे काय मागायचे
- “हे WCAG 2.2 level AA पूर्ण करेल असे बनवा.”
- “Semantic HTML वापरा: खरी बटणे, links, क्रमाने headings, आणि प्रत्येक फॉर्म फील्डला labels.”
- “प्रत्येक interactive घटक फक्त keyboard ने चालतो आणि त्याची दिसणारी focus शैली आहे याची खात्री करा.”
- “सर्व मजकूर आणि आयकॉन रंगांचा कॉन्ट्रास्ट तपासा — सामान्य मजकुरासाठी 4.5:1, मोठ्या मजकुरासाठी आणि आयकॉन्ससाठी 3:1.”
- “माहितीपूर्ण प्रतिमांना अर्थपूर्ण alt text आणि सजावटीच्या प्रतिमांना रिकामा alt text जोडा.”
- “फॉर्म errors फक्त रंगाने नव्हे तर फील्डशी जोडलेल्या मजकुरी संदेशाने दाखवा.”
- “अॅनिमेशनसाठी वापरकर्त्याची reduced-motion सेटिंग पाळा.”
- “स्वयंचलित accessibility तपासणी चालवा आणि ती काय तपासू शकत नाही त्याची यादी द्या, म्हणजे ते मी हाताने तपासू शकेन.”
मग स्वतः तपासा: माउस बाजूला ठेवा आणि फक्त Tab, Shift+Tab, Enter आणि Space वापरून तुमचा मुख्य प्रवाह पूर्ण करण्याचा प्रयत्न करा. मुख्य पानावर तुमच्या फोनचा अंगभूत स्क्रीन रीडर वापरून पाहा. Browser 200% पर्यंत झूम करा आणि काही तुटते का ते पाहा.
Mythex मध्ये accessibility
Mythex मध्ये समर्पित accessibility checker नाही, त्यामुळे accessibility ला तुमच्या prompts आणि चाचणीचा भाग माना. पहिल्या prompt पासूनच WCAG 2.2 AA मागा, Preview मध्ये keyboard वापरून निकाल तपासा, आणि प्रकाशित करण्यापूर्वी /test वापरून agent ला तुमचे मुख्य प्रवाह क्लिक करून तपासायला सांगा — App Testing पहा. SEO रेसिपी देखील अर्थपूर्ण headings आणि alt text मागते, जे दोन्ही उद्दिष्टांसाठी उपयोगी आहेत.
हाताने करता येणाऱ्या checklist साठी, तुमची वेबसाइट accessible कशी करायची पहा. डिझाइनसाठी, AI सह चांगले दिसणारे अॅप कसे डिझाइन करायचे वाचा, आणि लाँचपूर्वी लाँचपूर्वी तुमचे अॅप कसे तपासायचे पहा. W3C ची स्वतःची WCAG माहिती हा अधिकृत स्रोत आहे.
प्रश्न
Web accessibility म्हणजे सोप्या भाषेत काय?
Web accessibility म्हणजे वेबसाइट्स आणि अॅप्स अशा प्रकारे डिझाइन आणि बनवणे की अपंग लोक त्यांना जाणू शकतील, समजू शकतील, नेव्हिगेट करू शकतील आणि वापरू शकतील. त्यात स्क्रीन रीडर वापरणारे अंध लोक, माउस वापरू न शकणारे लोक, कमी दृष्टी किंवा रंगांधळेपणा असलेले लोक, कर्णबधिर वापरकर्ते आणि संज्ञानात्मक अपंगत्व असलेले लोक यांचा समावेश होतो.
WCAG म्हणजे काय?
WCAG (Web Content Accessibility Guidelines) हे web accessibility साठीचे आंतरराष्ट्रीय मानक आहे, जे W3C ने प्रकाशित केले आहे. सध्याची आवृत्ती WCAG 2.2 आहे, जी ऑक्टोबर 2023 मध्ये प्रथम प्रकाशित झाली. त्याचे success criteria A, AA आणि AAA अशा स्तरांत विभागलेले आहेत, आणि बहुतेक संस्था व कायदे ज्याचा संदर्भ घेतात ते लक्ष्य AA स्तर आहे.
WCAG कोणता रंग कॉन्ट्रास्ट मागते?
AA स्तरावर, सामान्य मजकुरासाठी त्याच्या पार्श्वभूमीच्या तुलनेत किमान 4.5:1 कॉन्ट्रास्ट गुणोत्तर लागते, आणि मोठ्या मजकुरासाठी (साधारण 18 point, किंवा ठळक 14 point) किमान 3:1 लागते. आयकॉन्स आणि नियंत्रणांचे दिसणारे भाग त्यांच्या शेजारच्या गोष्टीच्या तुलनेत किमान 3:1 असायला हवेत.
Web accessibility हे कायदेशीर बंधन आहे का?
अनेक ठिकाणी, अनेक संस्थांसाठी, हो. कायदे देश आणि क्षेत्रानुसार वेगळे असतात — उदाहरणार्थ, European Accessibility Act EU मधील अनेक ग्राहक डिजिटल उत्पादने आणि सेवांना लागू होतो. तुम्हाला लागू होणारे नियम तपासा, किंवा कायदेशीर सल्लागाराला विचारा.
Accessibility overlay किंवा widget माझी साइट compliant करू शकते का?
एकट्याने नाही. Overlays तुमच्या साइटवर toolbar जोडतात, पण गहाळ labels, न वापरता येणारी keyboard नेव्हिगेशन किंवा अस्पष्ट रचना अशा मूळ समस्या विश्वासार्हपणे दुरुस्त करू शकत नाहीत. विश्वसनीय मार्ग म्हणजे साइटचा कोड आणि मजकूर दुरुस्त करणे.