# ਵੈਬਪੇਜਾਂ ਨੂੰ ਸਹਿਜਗਮ ਬਣਾਉਣਾ ![ਸਹਿਜਗਮਤਾ ਬਾਰੇ ਸਭ ਕੁਝ](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.pa.png) > ਸਕੈਚਨੋਟ [ਟੋਮੋਮੀ ਇਮੁਰਾ](https://twitter.com/girlie_mac) ਦੁਆਰਾ ## ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼ [ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/) > ਵੈਬ ਦੀ ਤਾਕਤ ਇਸ ਦੀ ਵਿਸ਼ਵਵਿਆਪਕਤਾ ਵਿੱਚ ਹੈ। ਅਪੰਗਤਾ ਤੋਂ ਬਿਨਾਂ ਹਰ ਕਿਸੇ ਲਈ ਪਹੁੰਚ ਇੱਕ ਜ਼ਰੂਰੀ ਪਹਲੂ ਹੈ। > > \- ਸਰ ਟਿਮੋਥੀ ਬਰਨਰਜ਼-ਲੀ, W3C ਡਾਇਰੈਕਟਰ ਅਤੇ ਵਰਲਡ ਵਾਇਡ ਵੈਬ ਦੇ ਆਵਿਸ਼ਕਾਰਕ ਇਹ ਕਹਾਵਤ ਵੈਬਸਾਈਟਾਂ ਨੂੰ ਸਹਿਜਗਮ ਬਣਾਉਣ ਦੀ ਮਹੱਤਤਾ ਨੂੰ ਬਹੁਤ ਹੀ ਵਧੀਆ ਢੰਗ ਨਾਲ ਦਰਸਾਉਂਦੀ ਹੈ। ਇੱਕ ਐਪਲੀਕੇਸ਼ਨ ਜੋ ਹਰ ਕਿਸੇ ਲਈ ਪਹੁੰਚਯੋਗ ਨਹੀਂ ਹੈ, ਉਹ ਆਪਣੇ ਆਪ ਵਿੱਚ ਬਾਹਰ ਕੱਢਣ ਵਾਲੀ ਹੈ। ਵੈਬ ਡਿਵੈਲਪਰਾਂ ਵਜੋਂ ਸਾਨੂੰ ਹਮੇਸ਼ਾ ਸਹਿਜਗਮਤਾ ਨੂੰ ਧਿਆਨ ਵਿੱਚ ਰੱਖਣਾ ਚਾਹੀਦਾ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਸ਼ੁਰੂ ਤੋਂ ਹੀ ਇਸ 'ਤੇ ਧਿਆਨ ਦਿੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਦੇ ਰਾਹ 'ਤੇ ਹੋਵੋਗੇ ਕਿ ਹਰ ਕੋਈ ਤੁਹਾਡੇ ਬਣਾਏ ਪੇਜਾਂ ਨੂੰ ਪਹੁੰਚ ਸਕੇ। ਇਸ ਪਾਠ ਵਿੱਚ, ਤੁਸੀਂ ਉਹ ਸੰਦ ਸਿੱਖੋਗੇ ਜੋ ਤੁਹਾਨੂੰ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ ਕਿ ਤੁਹਾਡੇ ਵੈਬ ਐਸੈਟ ਸਹਿਜਗਮ ਹਨ ਅਤੇ ਸਹਿਜਗਮਤਾ ਨੂੰ ਧਿਆਨ ਵਿੱਚ ਰੱਖ ਕੇ ਕਿਵੇਂ ਬਣਾਉਣਾ ਹੈ। > ਤੁਸੀਂ ਇਹ ਪਾਠ [ਮਾਈਕਰੋਸਾਫਟ ਲਰਨ](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon) 'ਤੇ ਲੈ ਸਕਦੇ ਹੋ! ## ਵਰਤਣ ਲਈ ਸੰਦ ### ਸਕ੍ਰੀਨ ਰੀਡਰ ਸਹਿਜਗਮਤਾ ਦੇ ਸਭ ਤੋਂ ਪ੍ਰਸਿੱਧ ਸੰਦਾਂ ਵਿੱਚੋਂ ਇੱਕ ਸਕ੍ਰੀਨ ਰੀਡਰ ਹਨ। [ਸਕ੍ਰੀਨ ਰੀਡਰ](https://en.wikipedia.org/wiki/Screen_reader) ਆਮ ਤੌਰ 'ਤੇ ਉਹ ਕਲਾਇੰਟ ਹਨ ਜੋ ਦ੍ਰਿਸ਼ਟੀ ਦੀ ਅਪੰਗਤਾ ਵਾਲੇ ਲੋਕਾਂ ਦੁਆਰਾ ਵਰਤੇ ਜਾਂਦੇ ਹਨ। ਜਿਵੇਂ ਕਿ ਅਸੀਂ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਸਮਾਂ ਬਿਤਾਉਂਦੇ ਹਾਂ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਸਹੀ ਢੰਗ ਨਾਲ ਉਹ ਜਾਣਕਾਰੀ ਪੇਸ਼ ਕਰਦਾ ਹੈ ਜੋ ਅਸੀਂ ਸਾਂਝਾ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ, ਅਸੀਂ ਇਹ ਵੀ ਯਕੀਨੀ ਬਣਾਉਣਾ ਚਾਹੀਦਾ ਹੈ ਕਿ ਸਕ੍ਰੀਨ ਰੀਡਰ ਵੀ ਇਹ ਕੰਮ ਸਹੀ ਢੰਗ ਨਾਲ ਕਰਦਾ ਹੈ। ਸਕ੍ਰੀਨ ਰੀਡਰ ਬੁਨਿਆਦੀ ਤੌਰ 'ਤੇ ਪੇਜ ਨੂੰ ਉੱਪਰ ਤੋਂ ਹੇਠਾਂ ਆਵਾਜ਼ ਵਿੱਚ ਪੜ੍ਹਦਾ ਹੈ। ਜੇਕਰ ਤੁਹਾਡਾ ਪੇਜ ਸਿਰਫ਼ ਟੈਕਸਟ ਹੈ, ਤਾਂ ਰੀਡਰ ਜਾਣਕਾਰੀ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਸਮਾਨ ਢੰਗ ਨਾਲ ਪੇਸ਼ ਕਰੇਗਾ। ਬੇਸ਼ੱਕ, ਵੈਬ ਪੇਜਾਂ ਸ਼ੁੱਧ ਟੈਕਸਟ ਨਹੀਂ ਹੁੰਦੀਆਂ; ਉਹ ਲਿੰਕ, ਗ੍ਰਾਫਿਕਸ, ਰੰਗ ਅਤੇ ਹੋਰ ਦ੍ਰਿਸ਼ਟੀਗਤ ਤੱਤਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰਦੇ ਹਨ। ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਧਿਆਨ ਦਿੱਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ਕਿ ਇਹ ਜਾਣਕਾਰੀ ਸਕ੍ਰੀਨ ਰੀਡਰ ਦੁਆਰਾ ਸਹੀ ਢੰਗ ਨਾਲ ਪੜ੍ਹੀ ਜਾਵੇ। ਹਰ ਵੈਬ ਡਿਵੈਲਪਰ ਨੂੰ ਸਕ੍ਰੀਨ ਰੀਡਰ ਨਾਲ ਜਾਣੂ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਜਿਵੇਂ ਕਿ ਉੱਪਰ ਹਾਈਲਾਈਟ ਕੀਤਾ ਗਿਆ ਹੈ, ਇਹ ਤੁਹਾਡੇ ਉਪਭੋਗਤਾਵਾਂ ਦੁਆਰਾ ਵਰਤਿਆ ਜਾਣ ਵਾਲਾ ਕਲਾਇੰਟ ਹੈ। ਜਿਵੇਂ ਤੁਸੀਂ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਕੰਮ ਕਰਨ ਦੇ ਢੰਗ ਨਾਲ ਜਾਣੂ ਹੋ, ਤੁਸੀਂ ਸਕ੍ਰੀਨ ਰੀਡਰ ਦੇ ਕੰਮ ਕਰਨ ਦੇ ਢੰਗ ਨਾਲ ਵੀ ਜਾਣੂ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਖੁਸ਼ਕਿਸਮਤੀ ਨਾਲ, ਜ਼ਿਆਦਾਤਰ ਆਪਰੇਟਿੰਗ ਸਿਸਟਮਾਂ ਵਿੱਚ ਸਕ੍ਰੀਨ ਰੀਡਰ ਸ਼ਾਮਲ ਹੁੰਦੇ ਹਨ। ਕੁਝ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਵੀ ਅੰਦਰੂਨੀ ਸੰਦ ਅਤੇ ਐਕਸਟੈਂਸ਼ਨ ਹੁੰਦੇ ਹਨ ਜੋ ਟੈਕਸਟ ਨੂੰ ਉੱਚਾਰਨ ਕਰ ਸਕਦੇ ਹਨ ਜਾਂ ਕੁਝ ਬੁਨਿਆਦੀ ਨੈਵੀਗੇਸ਼ਨਲ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਪ੍ਰਦਾਨ ਕਰ ਸਕਦੇ ਹਨ, ਜਿਵੇਂ ਕਿ [ਇਹ ਸਹਿਜਗਮਤਾ-ਕੇਂਦਰਤ ਐਜ ਬ੍ਰਾਊਜ਼ਰ ਸੰਦ](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features)। ਇਹ ਵੀ ਮਹੱਤਵਪੂਰਨ ਸਹਿਜਗਮਤਾ ਸੰਦ ਹਨ, ਪਰ ਇਹ ਸਕ੍ਰੀਨ ਰੀਡਰ ਟੈਸਟਿੰਗ ਸੰਦਾਂ ਨਾਲ ਗਲਤ ਨਹੀਂ ਸਮਝੇ ਜਾਣੇ ਚਾਹੀਦੇ। ✅ ਸਕ੍ਰੀਨ ਰੀਡਰ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਟੈਕਸਟ ਰੀਡਰ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। Windows 'ਤੇ [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) ਡਿਫਾਲਟ ਰੂਪ ਵਿੱਚ ਸ਼ਾਮਲ ਹੈ, ਅਤੇ [JAWS](https://webaim.org/articles/jaws/) ਅਤੇ [NVDA](https://www.nvaccess.org/about-nvda/) ਨੂੰ ਵੀ ਇੰਸਟਾਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। macOS ਅਤੇ iOS 'ਤੇ, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) ਡਿਫਾਲਟ ਰੂਪ ਵਿੱਚ ਸ਼ਾਮਲ ਹੈ। ### ਜ਼ੂਮ ਦ੍ਰਿਸ਼ਟੀ ਦੀ ਅਪੰਗਤਾ ਵਾਲੇ ਲੋਕਾਂ ਦੁਆਰਾ ਆਮ ਤੌਰ 'ਤੇ ਵਰਤਿਆ ਜਾਣ ਵਾਲਾ ਇੱਕ ਹੋਰ ਸੰਦ ਜ਼ੂਮ ਹੈ। ਜ਼ੂਮਿੰਗ ਦਾ ਸਭ ਤੋਂ ਬੁਨਿਆਦੀ ਕਿਸਮ ਸਟੈਟਿਕ ਜ਼ੂਮ ਹੈ, ਜੋ `Control + plus sign (+)` ਦੁਆਰਾ ਜਾਂ ਸਕ੍ਰੀਨ ਰਿਜ਼ੋਲੂਸ਼ਨ ਨੂੰ ਘਟਾ ਕੇ ਕੰਟਰੋਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਜ਼ੂਮ ਦੀ ਇਹ ਕਿਸਮ ਪੂਰੇ ਪੇਜ ਨੂੰ ਰੀਸਾਈਜ਼ ਕਰਦੀ ਹੈ, ਇਸ ਲਈ [ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) ਵਰਤਣਾ ਮਹੱਤਵਪੂਰਨ ਹੈ ਤਾਂ ਜੋ ਵਧੇ ਹੋਏ ਜ਼ੂਮ ਪੱਧਰਾਂ 'ਤੇ ਚੰਗਾ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਪ੍ਰਦਾਨ ਕੀਤਾ ਜਾ ਸਕੇ। ਜ਼ੂਮਿੰਗ ਦੀ ਇੱਕ ਹੋਰ ਕਿਸਮ ਵਿਸ਼ੇਸ਼ ਸਾਫਟਵੇਅਰ 'ਤੇ ਨਿਰਭਰ ਕਰਦੀ ਹੈ ਜੋ ਸਕ੍ਰੀਨ ਦੇ ਇੱਕ ਖੇਤਰ ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ ਅਤੇ ਪੈਨ ਕਰਦਾ ਹੈ, ਬਿਲਕੁਲ ਇੱਕ ਅਸਲੀ ਵਧਾਈ ਗਲਾਸ ਵਰਗੇ। 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 ਦਾ ਰੰਗ ਚੈੱਕਰ](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon) ਦੀ ਮਦਦ ਨਾਲ। ਤੁਹਾਨੂੰ ਕੀ ਸਿੱਖਣ ਨੂੰ ਮਿਲਦਾ ਹੈ? ### ਲਾਈਟਹਾਊਸ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਡਿਵੈਲਪਰ ਟੂਲ ਖੇਤਰ ਵਿੱਚ, ਤੁਹਾਨੂੰ ਲਾਈਟਹਾਊਸ ਸੰਦ ਮਿਲੇਗਾ। ਇਹ ਸੰਦ ਇੱਕ ਵੈਬਸਾਈਟ ਦੀ ਸਹਿਜਗਮਤਾ (ਜਿਵੇਂ ਕਿ ਹੋਰ ਵਿਸ਼ਲੇਸ਼ਣ) ਦੀ ਪਹਿਲੀ ਝਲਕ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਜਦੋਂ ਕਿ ਸਿਰਫ਼ ਲਾਈਟਹਾਊਸ 'ਤੇ ਨਿਰਭਰ ਕਰਨਾ ਮਹੱਤਵਪੂਰਨ ਨਹੀਂ ਹੈ, 100% ਸਕੋਰ ਇੱਕ ਬੇਸਲਾਈਨ ਵਜੋਂ ਬਹੁਤ ਮਦਦਗਾਰ ਹੈ। ✅ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਡਿਵੈਲਪਰ ਟੂਲ ਪੈਨਲ ਵਿੱਚ ਲਾਈਟਹਾਊਸ ਲੱਭੋ ਅਤੇ ਕਿਸੇ ਵੀ ਸਾਈਟ 'ਤੇ ਵਿਸ਼ਲੇਸ਼ਣ ਚਲਾਓ। ਤੁਹਾਨੂੰ ਕੀ ਪਤਾ ਲੱਗਦਾ ਹੈ? ## ਸਹਿਜਗਮਤਾ ਲਈ ਡਿਜ਼ਾਈਨ ਕਰਨਾ ਸਹਿਜਗਮਤਾ ਇੱਕ ਵੱਡਾ ਵਿਸ਼ਾ ਹੈ। ਤੁਹਾਡੀ ਮਦਦ ਕਰਨ ਲਈ, ਬਹੁਤ ਸਾਰੇ ਸਰੋਤ ਉਪਲਬਧ ਹਨ। - [ਐਕਸੈਸਿਬਲ ਯੂ - ਮਿਨੇਸੋਟਾ ਯੂਨੀਵਰਸਿਟੀ](https://accessibility.umn.edu/your-role/web-developers) ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹਿਜਗਮ ਸਾਈਟਾਂ ਬਣਾਉਣ ਦੇ ਹਰ ਪਹਲੂ ਨੂੰ ਕਵਰ ਕਰਨ ਦੇ ਯੋਗ ਨਹੀਂ ਹੋਵਾਂਗੇ, ਹੇਠਾਂ ਕੁਝ ਮੁੱਖ ਸਿਧਾਂਤ ਹਨ ਜੋ ਤੁਸੀਂ ਲਾਗੂ ਕਰਨਾ ਚਾਹੋਗੇ। ਸ਼ੁਰੂ ਤੋਂ ਹੀ ਇੱਕ ਸਹਿਜਗਮ ਪੇਜ ਡਿਜ਼ਾਈਨ ਕਰਨਾ **ਹਮੇਸ਼ਾ** ਮੌਜੂਦਾ ਪੇਜ ਨੂੰ ਸਹਿਜਗਮ ਬਣਾਉਣ ਲਈ ਵਾਪਸ ਜਾਣ ਤੋਂ ਆਸਾਨ ਹੁੰਦਾ ਹੈ। ## ਚੰਗੇ ਡਿਸਪਲੇ ਸਿਧਾਂਤ ### ਰੰਗ ਸੁਰੱਖਿਅਤ ਪੈਲੇਟ ਲੋਕ ਸੰਸਾਰ ਨੂੰ ਵੱਖ-ਵੱਖ ਢੰਗ ਨਾਲ ਦੇਖਦੇ ਹਨ, ਅਤੇ ਇਸ ਵਿੱਚ ਰੰਗ ਵੀ ਸ਼ਾਮਲ ਹਨ। ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੀ ਸਾਈਟ ਲਈ ਰੰਗ ਸਕੀਮ ਚੁਣਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਚਾਹੀਦਾ ਹੈ ਕਿ ਇਹ ਸਭ ਲਈ ਪਹੁੰਚਯੋਗ ਹੈ। ਇੱਕ ਵਧੀਆ [ਰੰਗ ਪੈਲੇਟ ਬਣਾਉਣ ਦਾ ਸੰਦ Color Safe](http://colorsafe.co/) ਹੈ। ✅ ਇੱਕ ਵੈਬਸਾਈਟ ਦੀ ਪਛਾਣ ਕਰੋ ਜੋ ਰੰਗ ਦੇ ਵਰਤਣ ਵਿੱਚ ਬਹੁਤ ਸਮੱਸਿਆਜਨਕ ਹੈ। ਕਿਉਂ? ### ਸਹੀ HTML ਵਰਤੋ CSS ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨਾਲ, ਕਿਸੇ ਵੀ ਤੱਤ ਨੂੰ ਕਿਸੇ ਵੀ ਕਿਸਮ ਦੇ ਕੰਟਰੋਲ ਵਾਂਗ ਬਣਾਉਣਾ ਸੰਭਵ ਹੈ। `` ਨੂੰ `