# प्रवेशयोग्य वेबपृष्ठ तयार करणे ![प्रवेशयोग्यता बद्दल सर्व काही](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.mr.png) > स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) यांच्याकडून ## व्याख्यानपूर्व प्रश्नमंजुषा [व्याख्यानपूर्व प्रश्नमंजुषा](https://ff-quizzes.netlify.app/web/) > वेबची ताकद त्याच्या सार्वत्रिकतेत आहे. अपंगत्व असलेल्या प्रत्येक व्यक्तीला प्रवेश मिळणे ही एक अत्यावश्यक बाब आहे. > > \- सर टिमोथी बर्नर्स-ली, W3C संचालक आणि वर्ल्ड वाइड वेबचे शोधक हे तुम्हाला आश्चर्यचकित करू शकते: जेव्हा तुम्ही प्रवेशयोग्य वेबसाइट्स तयार करता, तेव्हा तुम्ही फक्त अपंगत्व असलेल्या लोकांना मदत करत नाही—तुम्ही प्रत्यक्षात वेब सर्वांसाठी चांगले बनवत आहात! तुम्ही कधी रस्त्याच्या कोपऱ्यांवर असलेल्या 'कर्ब कट्स' पाहिल्या आहेत का? त्या मूळतः व्हीलचेअरसाठी डिझाइन केल्या गेल्या होत्या, पण आता त्या स्ट्रोलर्स असलेल्या लोकांना, डिलिव्हरी कामगारांना, प्रवाशांना आणि सायकलस्वारांनाही मदत करतात. प्रवेशयोग्य वेब डिझाइन नेमके असेच कार्य करते—ज्या उपाययोजना एका गटाला मदत करतात त्या अनेकदा सर्वांना फायदेशीर ठरतात. खूप छान, नाही का? या धड्यात, आपण अशा वेबसाइट्स तयार करण्याचा शोध घेणार आहोत ज्या प्रत्येकासाठी कार्य करतात, मग ते वेब कसेही ब्राउझ करत असले तरी. तुम्ही वेब मानकांमध्ये आधीच समाविष्ट असलेल्या व्यावहारिक तंत्रांचा शोध घेणार आहात, चाचणी साधनांसह प्रत्यक्ष अनुभव घेणार आहात आणि प्रवेशयोग्यता तुमच्या साइट्स सर्व वापरकर्त्यांसाठी अधिक वापरण्यायोग्य कशी बनवते ते पाहणार आहात. या धड्याच्या शेवटी, तुम्हाला प्रवेशयोग्यता तुमच्या विकास कार्यप्रवाहाचा नैसर्गिक भाग बनवण्याचा आत्मविश्वास मिळेल. विचारपूर्वक डिझाइन निवडी वेबला अब्जावधी वापरकर्त्यांसाठी कसे खुले करू शकतात हे शोधण्यासाठी तयार आहात? चला सुरुवात करूया! > तुम्ही हा धडा [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon) वर घेऊ शकता! ## सहाय्यक तंत्रज्ञान समजून घेणे कोडिंगमध्ये उडी मारण्यापूर्वी, वेगवेगळ्या क्षमतेच्या लोक वेबचा प्रत्यक्षात कसा अनुभव घेतात हे समजून घेण्यासाठी थोडा वेळ घ्या. हे फक्त सिद्धांत नाही—या वास्तविक नेव्हिगेशन पद्धती समजून घेणे तुम्हाला खूप चांगला विकसक बनवेल! सहाय्यक तंत्रज्ञान हे आश्चर्यकारक साधने आहेत जी अपंगत्व असलेल्या लोकांना वेबसाइट्सशी संवाद साधण्यास मदत करतात ज्यामुळे तुम्हाला आश्चर्य वाटेल. एकदा तुम्हाला या तंत्रज्ञानाचा उपयोग कसा करायचा हे समजले की, प्रवेशयोग्य वेब अनुभव तयार करणे अधिक अंतर्ज्ञानी होते. हे एखाद्याच्या डोळ्यांतून तुमचा कोड पाहण्यास शिकण्यासारखे आहे. ### स्क्रीन रीडर्स [स्क्रीन रीडर्स](https://en.wikipedia.org/wiki/Screen_reader) ही अत्यंत प्रगत तंत्रज्ञानाची साधने आहेत जी डिजिटल मजकूराचे भाषण किंवा ब्रेल आउटपुटमध्ये रूपांतर करतात. जरी ते प्रामुख्याने व्हिज्युअल अपंगत्व असलेल्या लोकांसाठी वापरले जात असले तरी, ते डिस्लेक्सिया सारख्या शिकण्याच्या अडचणी असलेल्या वापरकर्त्यांसाठी देखील खूप उपयुक्त आहेत. मी स्क्रीन रीडरला एखाद्या खूप हुशार कथाकथनकारासारखे समजतो जो तुम्हाला पुस्तक वाचून दाखवतो. ते मजकूर तार्किक क्रमाने मोठ्याने वाचते, "बटण" किंवा "लिंक" सारख्या संवादात्मक घटकांची घोषणा करते आणि पृष्ठाभोवती उडी मारण्यासाठी कीबोर्ड शॉर्टकट प्रदान करते. पण गोष्ट अशी आहे—स्क्रीन रीडर्स त्यांचे जादू फक्त तेव्हा करू शकतात जेव्हा आपण योग्य संरचना आणि अर्थपूर्ण सामग्रीसह वेबसाइट्स तयार करतो. येथे तुम्ही विकसक म्हणून मदत करू शकता! **प्लॅटफॉर्मवर लोकप्रिय स्क्रीन रीडर्स:** - **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (फ्री आणि सर्वाधिक लोकप्रिय), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (इन-बिल्ट) - **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (इन-बिल्ट आणि अत्यंत सक्षम) - **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (इन-बिल्ट) - **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (फ्री आणि ओपन-सोर्स) **स्क्रीन रीडर्स वेब सामग्री कशी नेव्हिगेट करतात:** स्क्रीन रीडर्स अनुभवी वापरकर्त्यांसाठी ब्राउझिंग कार्यक्षम बनवणाऱ्या अनेक नेव्हिगेशन पद्धती प्रदान करतात: - **क्रमिक वाचन**: शीर्ष ते तळापर्यंत सामग्री वाचते, जसे पुस्तकाचे अनुसरण करणे - **लँडमार्क नेव्हिगेशन**: पृष्ठ विभागांमध्ये उडी मारणे (हेडर, नेव्ह, मुख्य, फूटर) - **हेडिंग नेव्हिगेशन**: पृष्ठ संरचना समजण्यासाठी हेडिंग्जमध्ये उडी मारणे - **लिंक यादी**: जलद प्रवेशासाठी सर्व लिंकची यादी तयार करणे - **फॉर्म नियंत्रण**: इनपुट फील्ड आणि बटणांमध्ये थेट नेव्हिगेट करणे > 💡 **माझ्या मनाला धक्का देणारी गोष्ट**: 68% स्क्रीन रीडर वापरकर्ते मुख्यतः हेडिंग्जद्वारे नेव्हिगेट करतात ([WebAIM सर्वेक्षण](https://webaim.org/projects/screenreadersurvey9/#finding)). याचा अर्थ तुमची हेडिंग संरचना वापरकर्त्यांसाठी रोडमॅपसारखी आहे—जेव्हा तुम्ही ती योग्य प्रकारे तयार करता, तेव्हा तुम्ही लोकांना तुमच्या सामग्रीभोवती जलद मार्ग शोधण्यात मदत करत आहात! ### तुमचा चाचणी कार्यप्रवाह तयार करणे चांगली बातमी आहे—प्रभावी प्रवेशयोग्यता चाचणी करणे कठीण असण्याची गरज नाही! तुम्हाला स्वयंचलित साधने (ती स्पष्ट समस्या शोधण्यात उत्कृष्ट आहेत) काही प्रत्यक्ष चाचणीसह एकत्र करायची असतील. येथे एक प्रणालीबद्ध दृष्टिकोन आहे जो मी शोधलेला आहे जो सर्वाधिक समस्या पकडतो आणि तुमचा संपूर्ण दिवस वाया घालवत नाही: **आवश्यक मॅन्युअल चाचणी कार्यप्रवाह:** ```mermaid graph TD A[Start Testing] --> B{Keyboard Navigation} B --> C[Tab through all interactive elements] C --> D{Screen Reader Testing} D --> E[Test with NVDA/VoiceOver] E --> F{Zoom Testing} F --> G[Zoom to 200% and test functionality] G --> H{Color/Contrast Check} H --> I[Verify all text meets contrast ratios] I --> J{Focus Management} J --> K[Ensure focus indicators are visible] K --> L[Testing Complete] ``` **चाचणी तपासणीची चरण-दर-चरण यादी:** 1. **कीबोर्ड नेव्हिगेशन**: फक्त Tab, Shift+Tab, Enter, Space आणि Arrow की वापरा 2. **स्क्रीन रीडर चाचणी**: NVDA, VoiceOver किंवा Narrator सक्षम करा आणि डोळे बंद करून नेव्हिगेट करा 3. **झूम चाचणी**: 200% आणि 400% झूम स्तरांवर चाचणी करा 4. **रंग विरोधाभास सत्यापन**: सर्व मजकूर आणि UI घटक तपासा 5. **फोकस इंडिकेटर चाचणी**: सर्व संवादात्मक घटकांमध्ये दृश्यमान फोकस स्टेट्स आहेत याची खात्री करा ✅ **Lighthouse सह प्रारंभ करा**: तुमच्या ब्राउझरचे DevTools उघडा, Lighthouse प्रवेशयोग्यता ऑडिट चालवा आणि नंतर तुमच्या मॅन्युअल चाचणी फोकस क्षेत्रांचे मार्गदर्शन करण्यासाठी परिणाम वापरा. ### झूम आणि वाढीव साधने तुम्ही कधी तुमच्या फोनवर मजकूर खूप लहान असल्यावर झूम करण्यासाठी पिंच केले आहे का, किंवा उज्ज्वल सूर्यप्रकाशात तुमच्या लॅपटॉप स्क्रीनवर डोळे मिचकावले आहेत का? अनेक वापरकर्ते दररोज सामग्री वाचनीय बनवण्यासाठी वाढीव साधनांवर अवलंबून असतात. यामध्ये कमी दृष्टी असलेले लोक, वृद्ध व्यक्ती आणि कधीही बाहेर वेबसाइट वाचण्याचा प्रयत्न करणारे कोणीही समाविष्ट आहे. आधुनिक झूम तंत्रज्ञान फक्त गोष्टी मोठ्या करण्यापलीकडे विकसित झाले आहे. ही साधने कशी कार्य करतात हे समजून घेणे तुम्हाला प्रतिसादात्मक डिझाइन तयार करण्यात मदत करेल जे कोणत्याही वाढीव स्तरावर कार्यक्षम आणि आकर्षक राहील. **आधुनिक ब्राउझर झूम क्षमता:** - **पृष्ठ झूम**: सर्व सामग्री प्रमाणानुसार स्केल करते (मजकूर, प्रतिमा, लेआउट) - ही प्राधान्य दिलेली पद्धत आहे - **फक्त मजकूर झूम**: मूळ लेआउट राखून फॉन्ट आकार वाढवते - **पिंच-टू-झूम**: तात्पुरत्या वाढीसाठी मोबाइल इशारा समर्थन - **ब्राउझर समर्थन**: सर्व आधुनिक ब्राउझर 500% पर्यंत झूम समर्थन देतात ज्यामुळे कार्यक्षमता बिघडत नाही **विशेषीकृत वाढीव सॉफ्टवेअर:** - **Windows**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (इन-बिल्ट), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) - **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (इन-बिल्ट आणि प्रगत वैशिष्ट्यांसह) > ⚠️ **डिझाइन विचार**: WCAG आवश्यक आहे की सामग्री 200% पर्यंत झूम केल्यावर कार्यक्षम राहावी. या स्तरावर, आडव्या स्क्रोलिंग किमान असावी आणि सर्व संवादात्मक घटक प्रवेशयोग्य राहावेत. ✅ **तुमचा प्रतिसादात्मक डिझाइन तपासा**: तुमचा ब्राउझर 200% आणि 400% पर्यंत झूम करा. तुमचा लेआउट सुंदरपणे जुळतो का? तुम्ही अजूनही सर्व कार्यक्षमतेपर्यंत अतिरिक्त स्क्रोलिंगशिवाय पोहोचू शकता का? ## आधुनिक प्रवेशयोग्यता चाचणी साधने आता तुम्हाला सहाय्यक तंत्रज्ञानासह लोक वेब कसे नेव्हिगेट करतात हे समजले आहे, चला त्या साधनांचा शोध घेऊया जे तुम्हाला प्रवेशयोग्य वेबसाइट्स तयार करण्यात आणि चाचणी करण्यात मदत करतात. याचा विचार करा: स्वयंचलित साधने स्पष्ट समस्या (जसे की गहाळ alt मजकूर) पकडण्यात उत्कृष्ट आहेत, तर प्रत्यक्ष चाचणी तुम्हाला तुमची साइट वास्तविक जगात वापरण्यास चांगली वाटते याची खात्री करण्यास मदत करते. एकत्रितपणे, ते तुम्हाला तुमच्या साइट्स सर्वांसाठी कार्यक्षम आहेत याचा आत्मविश्वास देतात. ### रंग विरोधाभास चाचणी चांगली बातमी: रंग विरोधाभास ही सर्वात सामान्य प्रवेशयोग्यता समस्या आहे, पण ती सोडवणे सर्वात सोपे आहे. चांगला विरोधाभास सर्वांना फायदेशीर ठरतो—दृष्टीदोष असलेल्या वापरकर्त्यांपासून ते समुद्रकिनारी फोन वाचण्याचा प्रयत्न करणाऱ्या लोकांपर्यंत. **WCAG विरोधाभास आवश्यकता:** | मजकूर प्रकार | WCAG AA (किमान) | WCAG AAA (वाढीव) | |-----------|-------------------|---------------------| | **सामान्य मजकूर** (18pt पेक्षा कमी) | 4.5:1 विरोधाभास गुणोत्तर | 7:1 विरोधाभास गुणोत्तर | | **मोठा मजकूर** (18pt+ किंवा 14pt+ ठळक) | 3:1 विरोधाभास गुणोत्तर | 4.5:1 विरोधाभास गुणोत्तर | | **UI घटक** (बटणे, फॉर्म बॉर्डर्स) | 3:1 विरोधाभास गुणोत्तर | 3:1 विरोधाभास गुणोत्तर | **आवश्यक चाचणी साधने:** - [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - रंग पिकरसह डेस्कटॉप अ‍ॅप - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - वेब-आधारित त्वरित अभिप्रायासह - [Stark](https://www.getstark.co/) - Figma, Sketch, Adobe XD साठी डिझाइन टूल प्लगइन - [Accessible Colors](https://accessible-colors.com/) - प्रवेशयोग्य रंग पॅलेट शोधा ✅ **चांगले रंग पॅलेट तयार करा**: तुमच्या ब्रँड रंगांसह प्रारंभ करा आणि प्रवेशयोग्य भिन्नता तयार करण्यासाठी विरोधाभास तपासक वापरा. यांना तुमच्या डिझाइन सिस्टमच्या प्रवेशयोग्य रंग टोकन म्हणून दस्तऐवजीकरण करा. ### सर्वसमावेशक प्रवेशयोग्यता ऑडिटिंग सर्वात प्रभावी प्रवेशयोग्यता चाचणी अनेक दृष्टिकोन एकत्र करते. एकही साधन सर्वकाही पकडत नाही, त्यामुळे विविध पद्धतींसह चाचणी दिनचर्या तयार करणे व्यापक कव्हरेज सुनिश्चित करते. **ब्राउझर-आधारित चाचणी (DevTools मध्ये समाविष्ट):** - **Chrome/Edge**: Lighthouse प्रवेशयोग्यता ऑडिट + प्रवेशयोग्यता पॅनेल - **Firefox**: प्रवेशयोग्यता निरीक्षक तपशीलवार ट्री दृश्यासह - **Safari**: Web Inspector मधील ऑडिट टॅब VoiceOver सिम्युलेशनसह **व्यावसायिक चाचणी विस्तार:** - [axe DevTools](https://www.deque.com/axe/devtools/) - उद्योग-मानक स्वयंचलित चाचणी - [WAVE](https://wave.webaim.org/extension/) - त्रुटी हायलाइटिंगसह दृश्य अभिप्राय - [Accessibility Insights](https://accessibilityinsights.io/) - Microsoft चे सर्वसमावेशक चाचणी संच **कमांड-लाइन आणि CI/CD एकत्रीकरण:** - [axe-core](https://github.com/dequelabs/axe-core) - स्वयंचलित चाचणीसाठी JavaScript लायब्ररी - [Pa11y](https://pa11y.org/) - कमांड-लाइन प्रवेशयोग्यता चाचणी साधन - [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - स्वयंचलित प्रवेशयोग्यता स्कोअरिंग > 🎯 **चाचणी लक्ष्य**: 95+ चा Lighthouse प्रवेशयोग्यता स्कोअर तुमचा आधार म्हणून ठेवा. लक्षात ठेवा, स्वयंचलित साधने फक्त 30-40% प्रवेशयोग्यता समस्या पकडतात—मॅन्युअल चाचणी अजूनही आवश्यक आहे! ## सुरुवातीपासून प्रवेशयोग्यता तयार करणे प्रवेशयोग्यता यशाची गुरुकिल्ली म्हणजे पहिल्या दिवसापासून ती तुमच्या पाया मध्ये समाविष्ट करणे. मला माहित आहे की "मी नंतर प्रवेशयोग्यता जोडेन" असे विचार करणे मोहक आहे, पण ते आधीच बांधलेल्या घरात रॅम्प जोडण्याचा प्रयत्न करण्यासारखे आहे. शक्य आहे? होय. सोपे? फारसे नाही. प्रवेशयोग्यतेचा विचार घराच्या नियोजनासारखा करा—तुमच्या सुरुवातीच्या वास्तुशिल्प योजनांमध्ये व्हीलचेअर प्रवेशयोग्यता समाविष्ट करणे खूप सोपे आहे जे नंतर सर्वकाही बदलण्यापेक्षा. ### POUR तत्त्वे: तुमचा प्रवेशयोग्यता पाया वेब सामग्री प्रवेशयोग्यता मार्गदर्शक तत्त्वे (WCAG) चार मूलभूत तत्त्वांवर आधारित आहेत जी POUR असे लिहितात. काळजी करू नका—ही कठोर शैक्षणिक संकल्पना नाहीत! ती प्रत्यक्षात सर्वांसाठी कार्य करणारी सामग्री तयार करण्यासाठी व्यावहारिक मार्गदर्शक तत्त्वे आहेत. एकदा तुम्हाला POUR चा उपयोग कसा करायचा हे समजले की, प्रवेशयोग्यता निर्णय घेणे अधिक अंतर्ज्ञानी होते. हे तुमच्या डिझाइन निवडींना मार्गदर्शन करणारी मानसिक तपासणी यादी असल्यासारखे आहे. चला याचा तपशील पाहूया: **🔍 जाणवण्यायोग्य**: माहिती वापरकर्त्यांच्या उपलब्ध संवेदनांद्वारे जाणवण्यायोग्य असावी - नॉन-टेक्स्ट सामग्रीसाठी मजकूर पर्याय प्रदान करा (प्रतिमा, व्हिडिओ, ऑडिओ) - सर्व मजकूर आणि UI घटकांसाठी पुरेसा रंग विरोधाभास सुनिश्चित करा - मल्टीमीडिया सामग्रीसाठी कॅप्शन आणि रंग संवादासाठी प्रभावी आहे, परंतु महत्त्वाची माहिती देण्यासाठी तो एकमेव मार्ग असू नये. रंगाच्या पलीकडे डिझाइन करणे अधिक मजबूत, सर्वसमावेशक अनुभव निर्माण करते जे विविध परिस्थितींमध्ये कार्य करते. **रंग दृष्टिकोनातील फरकांसाठी डिझाइन करा:** सुमारे 8% पुरुष आणि 0.5% महिला काही प्रकारच्या रंग दृष्टिकोनातील फरक अनुभवतात (याला "रंग अंधत्व" असेही म्हणतात). सर्वात सामान्य प्रकार आहेत: - **ड्युटेरॅनोपिया**: लाल आणि हिरवा ओळखण्यात अडचण - **प्रोटॅनोपिया**: लाल रंग अधिक मंद दिसतो - **ट्रायटॅनोपिया**: निळा आणि पिवळा ओळखण्यात अडचण (दुर्मिळ) **सर्वसमावेशक रंग धोरणे:** ```css /* ❌ Bad: Using only color to indicate status */ .error { color: red; } .success { color: green; } /* ✅ Good: Color plus icons and context */ .error { color: #d32f2f; border-left: 4px solid #d32f2f; } .error::before { content: "⚠️"; margin-right: 8px; } .success { color: #2e7d32; border-left: 4px solid #2e7d32; } .success::before { content: "✅"; margin-right: 8px; } ``` **मूलभूत कॉन्ट्रास्ट आवश्यकता पलीकडे:** - रंग अंधत्व सिम्युलेटरसह तुमच्या रंग निवडींची चाचणी करा - रंग कोडिंगसह नमुने, पोत किंवा आकार वापरा - परस्परसंवादी स्थिती रंगाशिवाय ओळखण्यायोग्य ठेवा - उच्च कॉन्ट्रास्ट मोडमध्ये तुमचे डिझाइन कसे दिसते याचा विचार करा ✅ **तुमची रंग प्रवेशयोग्यता तपासा**: [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) सारख्या साधनांचा वापर करून तुमची साइट वेगवेगळ्या प्रकारच्या रंग दृष्टिकोन असलेल्या वापरकर्त्यांना कशी दिसते ते पहा. ### फोकस इंडिकेटर्स आणि परस्परसंवाद डिझाइन फोकस इंडिकेटर्स डिजिटल कर्सरप्रमाणे असतात—ते कीबोर्ड वापरकर्त्यांना पृष्ठावर कुठे आहेत हे दर्शवतात. चांगले डिझाइन केलेले फोकस इंडिकेटर्स प्रत्येकासाठी अनुभव अधिक स्पष्ट आणि अंदाजानुसार बनवतात. **आधुनिक फोकस इंडिकेटर सर्वोत्तम पद्धती:** ```css /* Enhanced focus styles that work across browsers */ button:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.25); } /* Remove focus outline for mouse users, preserve for keyboard users */ button:focus:not(:focus-visible) { outline: none; } /* Focus-within for complex components */ .card:focus-within { box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.5); border-color: #4A90A4; } /* Ensure focus indicators meet contrast requirements */ .custom-focus:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 6px #000000; } ``` **फोकस इंडिकेटर आवश्यकता:** - **दृश्यमानता**: सभोवतालच्या घटकांशी किमान 3:1 कॉन्ट्रास्ट गुणोत्तर असले पाहिजे - **रुंदी**: संपूर्ण घटकाभोवती किमान 2px जाडी असावी - **सततता**: फोकस दुसऱ्या ठिकाणी हलवले जाईपर्यंत दृश्यमान राहावे - **भिन्नता**: इतर UI स्थितींपेक्षा दृश्यात्मकदृष्ट्या वेगळे असले पाहिजे > 💡 **डिझाइन टिप**: उत्कृष्ट फोकस इंडिकेटर्स अनेकदा दृश्यता सुनिश्चित करण्यासाठी outline, box-shadow आणि रंग बदलांचा संयोजन वापरतात. ✅ **तुमचे फोकस इंडिकेटर्स तपासा**: तुमच्या वेबसाइटवर टॅब करा आणि कोणते घटक स्पष्ट फोकस इंडिकेटर्स आहेत ते नोंदवा. काही पाहणे कठीण आहे का किंवा पूर्णपणे गायब आहेत का? ### सेमॅंटिक HTML: प्रवेशयोग्यतेचा पाया सेमॅंटिक HTML म्हणजे तुमच्या वेबसाइटसाठी सहाय्यक तंत्रज्ञानांना GPS प्रणाली देणे. जेव्हा तुम्ही योग्य HTML घटक त्याच्या इच्छित उद्देशासाठी वापरता, तेव्हा तुम्ही स्क्रीन रीडर्स, कीबोर्ड्स आणि इतर साधनांना प्रभावीपणे नेव्हिगेट करण्यासाठी तपशीलवार रोडमॅप प्रदान करता. माझ्यासाठी खरोखर क्लिक केलेली एक उपमा येथे आहे: सेमॅंटिक HTML म्हणजे स्पष्ट श्रेणी आणि उपयुक्त चिन्हांसह चांगल्या प्रकारे आयोजित केलेल्या लायब्ररी आणि पुस्तके यादृच्छिकपणे विखुरलेल्या गोदामातील फरक. दोन्ही ठिकाणी समान पुस्तके आहेत, परंतु तुम्हाला त्यामध्ये काहीतरी शोधण्याचा प्रयत्न करायचा असेल तर तुम्ही कोणते ठिकाण निवडाल? अगदी! **प्रवेशयोग्य पृष्ठ संरचनेचे बांधकाम ब्लॉक्स:** ```html

Your Site Name

Article Title

Published on

First Section

Content that relates to this section...

Second Section

More related content...

``` **सेमॅंटिक HTML प्रवेशयोग्यतेला कसे बदलते:** | सेमॅंटिक घटक | उद्देश | स्क्रीन रीडर लाभ | |------------------|---------|----------------------| | `
` | पृष्ठ किंवा विभाग शीर्षलेख | "बॅनर लँडमार्क" - शीर्षस्थानी जलद नेव्हिगेशन | | `