ਵੈੱਬ ਪਹੁੰਚਯੋਗਤਾ ਕੀ ਹੈ? ਸਰਲ ਭਾਸ਼ਾ ਵਿੱਚ ਗਾਈਡ
ਵੈੱਬ ਪਹੁੰਚਯੋਗਤਾ ਦਾ ਮਤਲਬ ਹੈ ਵੈੱਬਸਾਈਟਾਂ ਅਤੇ ਐਪਾਂ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਬਣਾਉਣਾ ਕਿ ਅਪਾਹਜ ਲੋਕ ਉਨ੍ਹਾਂ ਨੂੰ ਵਰਤ ਸਕਣ — ਭਾਵੇਂ ਉਹ ਨੇਤਰਹੀਣ ਹੋਣ ਅਤੇ ਸਕਰੀਨ ਰੀਡਰ ਵਰਤਦੇ ਹੋਣ, ਮਾਊਸ ਨਾ ਵਰਤ ਸਕਦੇ ਹੋਣ, ਘੱਟ ਨਜ਼ਰ ਜਾਂ ਰੰਗ-ਅੰਨ੍ਹੇਪਣ ਵਾਲੇ ਹੋਣ, ਬੋਲੇ ਹੋਣ, ਜਾਂ ਬੋਧਾਤਮਕ ਜਾਂ ਸਿੱਖਣ ਸੰਬੰਧੀ ਅਪਾਹਜਤਾ ਵਾਲੇ ਹੋਣ। ਅਮਲ ਵਿੱਚ ਇਹ ਗੱਲਾਂ ਵਰਗੀਆਂ ਹਨ: ਤਸਵੀਰਾਂ ਲਈ ਟੈਕਸਟ ਵਿਕਲਪ, ਕਾਫ਼ੀ ਰੰਗ ਕੰਟਰਾਸਟ, ਸਹੀ ਲੇਬਲਾਂ ਵਾਲੇ ਫ਼ਾਰਮ, ਅਤੇ ਹਰ ਚੀਜ਼ ਦਾ ਸਿਰਫ਼ ਕੀਬੋਰਡ ਨਾਲ ਕੰਮ ਕਰਨਾ। ਇਸਦਾ ਅੰਤਰਰਾਸ਼ਟਰੀ ਮਿਆਰ WCAG ਹੈ, ਜੋ W3C ਦੀਆਂ Web Content Accessibility Guidelines ਹਨ।
ਪਹੁੰਚਯੋਗਤਾ ਨੂੰ ਅਕਸਰ a11y ਲਿਖਿਆ ਜਾਂਦਾ ਹੈ — "a", ਫਿਰ 11 ਅੱਖਰ, ਫਿਰ "y"।
AI ਨਾਲ ਬਣਾਉਂਦੇ ਸਮੇਂ ਪਹੁੰਚਯੋਗਤਾ ਕਿਉਂ ਅਹਿਮ ਹੈ
AI ਬਿਲਡਰ ਐਪਾਂ ਬਣਾਉਣ ਵਿੱਚ ਚੰਗੇ ਹਨ ਜੋ ਠੀਕ ਦਿਸਦੀਆਂ ਹਨ। ਪਹੁੰਚਯੋਗਤਾ ਜ਼ਿਆਦਾਤਰ ਉਸ ਬਾਰੇ ਹੈ ਜੋ ਸਕਰੀਨਸ਼ਾਟ ਵਿੱਚ ਨਹੀਂ ਦਿਸਦਾ: ਕੀ ਬਟਨ ਅਸਲ ਵਿੱਚ ਬਟਨ ਹੈ, ਕੀ ਇਨਪੁੱਟ ਕੋਲ ਅਜਿਹਾ ਲੇਬਲ ਹੈ ਜੋ ਸਕਰੀਨ ਰੀਡਰ ਐਲਾਨ ਸਕੇ, ਕੀ ਤੁਸੀਂ Tab ਕੁੰਜੀ ਨਾਲ ਮੇਨੂ ਤੱਕ ਪਹੁੰਚ ਸਕਦੇ ਹੋ।
ਇਸੇ ਲਈ ਪੁੱਛਣਾ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ:
- ਇਹ ਆਸਾਨੀ ਨਾਲ ਖੁੰਝ ਜਾਂਦਾ ਹੈ। ਇੱਕ ਕਸਟਮ-ਸਟਾਈਲ ਕੀਤਾ ਡ੍ਰੌਪਡਾਊਨ ਸੰਪੂਰਨ ਦਿਸ ਸਕਦਾ ਹੈ ਅਤੇ ਮਾਊਸ ਤੋਂ ਬਿਨਾਂ ਵਰਤਣਾ ਅਸੰਭਵ ਹੋ ਸਕਦਾ ਹੈ। ਜਦ ਤੱਕ ਤੁਸੀਂ ਜਾਂਚੋ ਨਹੀਂ, ਤੁਹਾਨੂੰ ਪਤਾ ਨਹੀਂ ਲੱਗੇਗਾ।
- ਸ਼ੁਰੂ ਵਿੱਚ ਠੀਕ ਕਰਨਾ ਸਸਤਾ ਹੈ। ਪਹਿਲੇ ਪ੍ਰੋਂਪਟ ਤੋਂ ਹੀ ਪਹੁੰਚਯੋਗ ਕੰਪੋਨੈਂਟ ਮੰਗਣ ਦਾ ਖ਼ਰਚਾ ਲਗਭਗ ਕੁਝ ਨਹੀਂ। ਮੁਕੰਮਲ ਐਪ ਵਿੱਚ ਬਾਅਦ ਵਿੱਚ ਜੋੜਨਾ ਹਰ ਸਕਰੀਨ ਛੂਹਣ ਵਰਗਾ ਹੈ।
- ਇਹ ਸਭ ਦੀ ਮਦਦ ਕਰਦਾ ਹੈ। ਕੈਪਸ਼ਨ ਰੌਲੇ ਵਾਲੀਆਂ ਥਾਵਾਂ ਉੱਤੇ ਲੋਕਾਂ ਦੀ ਮਦਦ ਕਰਦੇ ਹਨ, ਚੰਗਾ ਕੰਟਰਾਸਟ ਧੁੱਪ ਵਿੱਚ ਫ਼ੋਨ ਵਾਲਿਆਂ ਦੀ ਮਦਦ ਕਰਦਾ ਹੈ, ਅਤੇ ਸਾਫ਼ ਲੇਬਲ ਹਰ ਕਿਸੇ ਨੂੰ ਫ਼ਾਰਮ ਤੇਜ਼ੀ ਨਾਲ ਭਰਨ ਦਿੰਦੇ ਹਨ।
- ਇਹ SEO ਨਾਲ ਜੁੜਦਾ ਹੈ। ਸਹੀ ਸਿਰਲੇਖ, ਵਰਣਨਾਤਮਕ ਲਿੰਕ ਅਤੇ alt ਟੈਕਸਟ ਖੋਜ ਇੰਜਣਾਂ ਨੂੰ ਵੀ ਤੁਹਾਡੇ ਪੰਨੇ ਸਮਝਣ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ — ਵੇਖੋ AI ਨਾਲ ਬਣਾਈਆਂ ਵੈੱਬਸਾਈਟਾਂ ਲਈ SEO।
- ਇਹ ਲੋੜੀਂਦਾ ਹੋ ਸਕਦਾ ਹੈ। ਤੁਸੀਂ ਕਿੱਥੇ ਕੰਮ ਕਰਦੇ ਹੋ ਅਤੇ ਕਿਸ ਦੀ ਸੇਵਾ ਕਰਦੇ ਹੋ, ਇਸ ਅਨੁਸਾਰ ਪਹੁੰਚਯੋਗਤਾ ਕਾਨੂੰਨੀ ਜ਼ਿੰਮੇਵਾਰੀ ਹੋ ਸਕਦੀ ਹੈ।
ਰੋਜ਼ਾਨਾ ਦੀ ਇੱਕ ਮਿਸਾਲ
ਇੱਕ ਇਮਾਰਤ ਦੇ ਪ੍ਰਵੇਸ਼ ਦੁਆਰ ਬਾਰੇ ਸੋਚੋ।
ਪੌੜੀਆਂ ਬਹੁਤ ਲੋਕਾਂ ਲਈ ਠੀਕ ਕੰਮ ਕਰਦੀਆਂ ਹਨ। ਇੱਕ ਰੈਂਪ ਵ੍ਹੀਲਚੇਅਰ ਵਰਤਣ ਵਾਲਿਆਂ ਲਈ ਕੰਮ ਕਰਦਾ ਹੈ — ਅਤੇ ਪ੍ਰੈਮ ਵਾਲੇ ਮਾਪਿਆਂ, ਟਰਾਲੀ ਵਾਲੇ ਡਿਲੀਵਰੀ ਵਰਕਰਾਂ ਅਤੇ ਸੂਟਕੇਸ ਵਾਲੇ ਯਾਤਰੀਆਂ ਲਈ ਵੀ। ਆਟੋਮੈਟਿਕ ਦਰਵਾਜ਼ੇ, ਸਾਫ਼ ਸੰਕੇਤ, ਲਿਫ਼ਟ ਬਟਨਾਂ ਉੱਤੇ ਬ੍ਰੇਲ ਅਤੇ ਚੰਗੀ ਰੋਸ਼ਨੀ ਹਰ ਇੱਕ ਕਿਸੇ ਦੀ ਰੁਕਾਵਟ ਹਟਾਉਂਦੇ ਹਨ।
ਵੈੱਬ ਪਹੁੰਚਯੋਗਤਾ ਡਿਜੀਟਲ ਥਾਵਾਂ ਲਈ ਉਹੀ ਵਿਚਾਰ ਹੈ: ਤੁਹਾਡੀ ਐਪ ਦੇ ਰੈਂਪ, ਸੰਕੇਤ ਅਤੇ ਹੱਥ-ਫੜਨ ਵਾਲੇ ਹੈਂਡਰੇਲ। ਅਤੇ ਇਮਾਰਤ ਵਾਂਗ, ਰੈਂਪ ਨੂੰ ਯੋਜਨਾ ਵਿੱਚ ਰੱਖਣਾ ਕੰਕਰੀਟ ਸੁੱਕਣ ਤੋਂ ਬਾਅਦ ਜੋੜਨ ਨਾਲੋਂ ਕਿਤੇ ਆਸਾਨ ਹੈ।
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 ਟੈਕਸਟ, ਵੀਡੀਓ ਲਈ ਕੈਪਸ਼ਨ, ਕਾਫ਼ੀ ਕੰਟਰਾਸਟ |
| Operable (ਚਲਾਉਣ ਯੋਗ) | ਲੋਕ ਕੰਟਰੋਲ ਵਰਤ ਸਕਣ ਅਤੇ ਨੈਵੀਗੇਟ ਕਰ ਸਕਣ | ਕੀਬੋਰਡ ਪਹੁੰਚ, ਅਜਿਹੀਆਂ ਸਮਾਂ ਸੀਮਾਵਾਂ ਨਾ ਹੋਣ ਜੋ ਵਧਾਈਆਂ ਨਾ ਜਾ ਸਕਣ, ਦਿਸਣ ਵਾਲਾ ਫ਼ੋਕਸ |
| Understandable (ਸਮਝਣ ਯੋਗ) | ਸਮੱਗਰੀ ਅਤੇ ਵਿਹਾਰ ਦਾ ਅਰਥ ਬਣੇ | ਸਾਫ਼ ਲੇਬਲ, ਮਦਦਗਾਰ ਗਲਤੀ ਸੁਨੇਹੇ, ਇਕਸਾਰ ਨੈਵੀਗੇਸ਼ਨ |
| Robust (ਮਜ਼ਬੂਤ) | ਕਈ ਬ੍ਰਾਊਜ਼ਰਾਂ ਅਤੇ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਨਾਲ ਕੰਮ ਕਰੇ | ਠੀਕ HTML ਤੱਤ, ਕੰਟਰੋਲਾਂ ਲਈ ਸਹੀ ਨਾਮ ਅਤੇ ਭੂਮਿਕਾਵਾਂ |
ਹਰ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ ਦੇ ਤਿੰਨ ਪੱਧਰਾਂ ਉੱਤੇ ਜਾਂਚਯੋਗ ਸਫ਼ਲਤਾ ਮਾਪਦੰਡ ਹਨ:
- ਪੱਧਰ A — ਘੱਟੋ-ਘੱਟ। ਇਨ੍ਹਾਂ ਵਿੱਚ ਫੇਲ੍ਹ ਹੋਣਾ ਕੁਝ ਲੋਕਾਂ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਰੋਕ ਦਿੰਦਾ ਹੈ।
- ਪੱਧਰ AA — ਮਿਆਰੀ ਟੀਚਾ, ਅਤੇ ਉਹ ਪੱਧਰ ਜਿਸ ਵੱਲ ਜ਼ਿਆਦਾਤਰ ਕਾਨੂੰਨ ਅਤੇ ਨੀਤੀਆਂ ਇਸ਼ਾਰਾ ਕਰਦੀਆਂ ਹਨ।
- ਪੱਧਰ AAA — ਸਭ ਤੋਂ ਉੱਚਾ ਪੱਧਰ। ਕਈ ਥਾਵਾਂ ਉੱਤੇ ਟੀਚਾ ਰੱਖਣਾ ਲਾਹੇਵੰਦ ਹੈ, ਪਰ W3C ਪੂਰੀਆਂ ਸਾਈਟਾਂ ਲਈ ਇਸਦੀ ਲੋੜ ਦੀ ਸਿਫ਼ਾਰਸ਼ ਨਹੀਂ ਕਰਦਾ, ਕਿਉਂਕਿ ਕੁਝ ਸਮੱਗਰੀ ਇਸ ਉੱਤੇ ਪੂਰੀ ਨਹੀਂ ਉਤਰ ਸਕਦੀ।
WCAG 2.2 ਨੇ 2.1 ਵਿੱਚ ਨੌਂ ਸਫ਼ਲਤਾ ਮਾਪਦੰਡ ਜੋੜੇ, ਜਿਨ੍ਹਾਂ ਵਿੱਚ AA ਪੱਧਰ ਉੱਤੇ Target Size (Minimum) ਸ਼ਾਮਲ ਹੈ — ਕਲਿੱਕ ਕਰਨ ਯੋਗ ਟਾਰਗੇਟ ਆਮ ਤੌਰ 'ਤੇ ਘੱਟੋ-ਘੱਟ 24 ਗੁਣਾ 24 CSS ਪਿਕਸਲ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ, ਕੁਝ ਅਪਵਾਦਾਂ ਨਾਲ — ਅਤੇ Accessible Authentication (Minimum), ਜੋ ਯਾਦਦਾਸ਼ਤ ਜਾਂ ਪਹੇਲੀਆਂ ਉੱਤੇ ਨਿਰਭਰ ਲੌਗਇਨ ਕਦਮਾਂ ਨੂੰ ਸੀਮਤ ਕਰਦਾ ਹੈ, ਜਿਵੇਂ ਪਾਸਵਰਡ ਦੁਬਾਰਾ ਟਾਈਪ ਕਰਨਾ ਬਿਨਾਂ ਪੇਸਟ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦੇ। ਇਸਨੇ ਪੁਰਾਣਾ "Parsing" ਮਾਪਦੰਡ ਵੀ ਹਟਾ ਦਿੱਤਾ, ਕਿਉਂਕਿ ਉਹ ਹੁਣ ਪੁਰਾਣਾ ਹੈ।
ਇੱਕ ਕੰਮ ਕੀਤੀ ਮਿਸਾਲ: ਇੱਕ ਸਾਈਨ-ਅੱਪ ਫ਼ਾਰਮ
ਇੱਕ ਸਾਈਨ-ਅੱਪ ਫ਼ਾਰਮ ਵੇਖੋ ਜੋ ਇੱਕ AI ਬਣਾ ਸਕਦਾ ਹੈ, ਅਤੇ ਪਹੁੰਚਯੋਗਤਾ ਜਾਂਚ ਕੀ ਲੱਭਦੀ ਹੈ:
| ਸਮੱਸਿਆ | ਕਿਸ ਉੱਤੇ ਅਸਰ | ਹੱਲ |
|---|---|---|
| ਇਨਪੁੱਟ ਵਿੱਚ ਲੇਬਲ ਦੀ ਥਾਂ ਪਲੇਸਹੋਲਡਰ ਟੈਕਸਟ ("Email") ਵਰਤਿਆ ਹੈ | ਸਕਰੀਨ ਰੀਡਰ ਵਰਤਣ ਵਾਲੇ; ਕੋਈ ਵੀ ਜੋ ਟਾਈਪ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰਕੇ ਭੁੱਲ ਜਾਂਦਾ ਹੈ ਕਿ ਖੇਤਰ ਕੀ ਸੀ | ਹਰ ਇਨਪੁੱਟ ਨਾਲ ਜੁੜਿਆ ਦਿਸਦਾ <label> |
| ਚਿੱਟੇ ਪਿਛੋਕੜ ਉੱਤੇ ਹਲਕਾ ਸਲੇਟੀ ਟੈਕਸਟ, 4.5:1 ਤੋਂ ਕਿਤੇ ਹੇਠਾਂ ਕੰਟਰਾਸਟ | ਘੱਟ ਨਜ਼ਰ ਵਾਲੇ ਲੋਕ, ਬਾਹਰ ਹੋਣ ਵਾਲੇ ਲੋਕ | ਗੂੜ੍ਹਾ ਟੈਕਸਟ ਜੋ 4.5:1 ਕੰਟਰਾਸਟ ਅਨੁਪਾਤ ਪੂਰਾ ਕਰੇ |
| ਗਲਤੀਆਂ ਸਿਰਫ਼ ਲਾਲ ਬਾਰਡਰ ਵਜੋਂ ਦਿਖਾਈਆਂ ਜਾਂਦੀਆਂ ਹਨ | ਰੰਗ-ਅੰਨ੍ਹੇਪਣ ਵਾਲੇ ਲੋਕ, ਸਕਰੀਨ ਰੀਡਰ ਵਰਤਣ ਵਾਲੇ | ਖੇਤਰ ਦੇ ਨਾਲ ਲਿਖਤੀ ਸੁਨੇਹਾ, ਜੋ ਸਕਰੀਨ ਰੀਡਰਾਂ ਨੂੰ ਐਲਾਨਿਆ ਜਾਵੇ |
"Sign up" ਇੱਕ ਸਟਾਈਲ ਕੀਤਾ <div> ਹੈ, <button> ਨਹੀਂ | ਕੀਬੋਰਡ ਅਤੇ ਸਕਰੀਨ ਰੀਡਰ ਵਰਤਣ ਵਾਲੇ ਇਸਨੂੰ ਚਾਲੂ ਨਹੀਂ ਕਰ ਸਕਦੇ | ਅਸਲ <button> ਤੱਤ ਵਰਤੋ |
| ਖੇਤਰਾਂ ਵਿੱਚ Tab ਕਰਦੇ ਸਮੇਂ ਕੋਈ ਦਿਸਣ ਵਾਲੀ ਰੂਪਰੇਖਾ ਨਹੀਂ | ਕੀਬੋਰਡ ਵਰਤਣ ਵਾਲੇ ਆਪਣੀ ਥਾਂ ਗੁਆ ਦਿੰਦੇ ਹਨ | ਸਾਫ਼ ਫ਼ੋਕਸ ਸਟਾਈਲ |
| ਲੋਗੋ ਤਸਵੀਰ ਵਿੱਚ alt ਟੈਕਸਟ ਨਹੀਂ ਹੈ | ਸਕਰੀਨ ਰੀਡਰ ਵਰਤਣ ਵਾਲੇ ਫ਼ਾਈਲ ਦਾ ਨਾਮ ਸੁਣਦੇ ਹਨ | alt ਟੈਕਸਟ ਜਿਵੇਂ "Acme Bookings" |
ਇਹਨਾਂ ਵਿੱਚੋਂ ਕੋਈ ਵੀ ਠੀਕ ਕਰਨ ਨਾਲ ਫ਼ਾਰਮ ਦੀ ਦਿੱਖ ਬਹੁਤੀ ਨਹੀਂ ਬਦਲਦੀ। ਪਰ ਇਹ ਸਭ ਬਦਲਦੇ ਹਨ ਕਿ ਕੁਝ ਲੋਕ ਇਸਨੂੰ ਬਿਲਕੁਲ ਵਰਤ ਸਕਦੇ ਹਨ ਜਾਂ ਨਹੀਂ।
ਮੁੱਖ ਸ਼ਬਦ
| ਸ਼ਬਦ | ਮਤਲਬ |
|---|---|
| ਸਕਰੀਨ ਰੀਡਰ | ਸੌਫ਼ਟਵੇਅਰ ਜੋ ਸਕਰੀਨ ਨੂੰ ਉੱਚੀ ਜਾਂ ਬ੍ਰੇਲ ਡਿਸਪਲੇ ਉੱਤੇ ਪੜ੍ਹਦਾ ਹੈ, ਜਿਵੇਂ VoiceOver, NVDA ਜਾਂ JAWS। |
| Alt ਟੈਕਸਟ | ਤਸਵੀਰ ਦਾ ਟੈਕਸਟ ਵਰਣਨ, ਜੋ ਸਕਰੀਨ ਰੀਡਰ ਪੜ੍ਹਦੇ ਹਨ। ਸਜਾਵਟੀ ਤਸਵੀਰਾਂ ਨੂੰ ਖਾਲੀ alt ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ ਤਾਂ ਜੋ ਛੱਡੀਆਂ ਜਾਣ। |
| ਕੰਟਰਾਸਟ ਅਨੁਪਾਤ | ਟੈਕਸਟ ਅਤੇ ਪਿਛੋਕੜ ਦੇ ਰੰਗ ਕਿੰਨੇ ਵੱਖਰੇ ਹਨ, 1:1 ਤੋਂ 21:1 ਤੱਕ। |
| ਕੀਬੋਰਡ ਨੈਵੀਗੇਸ਼ਨ | ਮਾਊਸ ਦੀ ਥਾਂ Tab, Enter, Space ਅਤੇ ਤੀਰ ਕੁੰਜੀਆਂ ਨਾਲ ਸਾਈਟ ਵਰਤਣਾ। |
| ਫ਼ੋਕਸ ਇੰਡੀਕੇਟਰ | ਦਿਸਣ ਵਾਲੀ ਰੂਪਰੇਖਾ ਜੋ ਦੱਸਦੀ ਹੈ ਕਿ ਕੀਬੋਰਡ ਕਿਸ ਤੱਤ ਉੱਤੇ ਹੈ। |
| ਸੈਮੈਂਟਿਕ HTML | ਕੰਮ ਲਈ ਸਹੀ ਤੱਤ ਵਰਤਣਾ — <button>, <nav>, <h2> — ਤਾਂ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਅਤੇ ਸਹਾਇਕ ਤਕਨੀਕ ਪੰਨਾ ਸਮਝਣ। |
| ARIA | ਕਸਟਮ ਕੰਟਰੋਲਾਂ ਨੂੰ ਸਹਾਇਕ ਤਕਨੀਕ ਲਈ ਵਰਣਨ ਕਰਨ ਵਾਲੇ ਵਾਧੂ ਗੁਣ। ਘੱਟ ਵਰਤੋ; ਮੂਲ HTML ਤੱਤ ਪਹਿਲਾਂ ਆਉਂਦੇ ਹਨ। |
| ਸਹਾਇਕ ਤਕਨਾਲੋਜੀ | ਕੰਪਿਊਟਰਾਂ ਤੱਕ ਪਹੁੰਚ ਲਈ ਲੋਕਾਂ ਦੇ ਸੰਦ, ਸਕਰੀਨ ਰੀਡਰਾਂ ਤੋਂ ਲੈ ਕੇ ਸਵਿੱਚ ਡਿਵਾਈਸਾਂ ਅਤੇ ਵੌਇਸ ਕੰਟਰੋਲ ਤੱਕ। |
ਆਮ ਗ਼ਲਤਫ਼ਹਿਮੀਆਂ
- "ਪਹੁੰਚਯੋਗਤਾ ਸਿਰਫ਼ ਨੇਤਰਹੀਣ ਵਿਜ਼ਿਟਰਾਂ ਲਈ ਮਾਇਨੇ ਰੱਖਦੀ ਹੈ।" ਇਹ ਦ੍ਰਿਸ਼ਟੀ, ਮੋਟਰ, ਸੁਣਨ, ਬੋਲਣ ਅਤੇ ਬੋਧਾਤਮਕ ਅਪਾਹਜਤਾਵਾਂ ਨੂੰ ਕਵਰ ਕਰਦੀ ਹੈ, ਅਤੇ ਅਸਥਾਈ ਹਾਲਤਾਂ ਜਿਵੇਂ ਟੁੱਟੀ ਬਾਂਹ ਨੂੰ ਵੀ।
- "ਪਹੁੰਚਯੋਗ ਸਾਈਟਾਂ ਸਾਦੀਆਂ ਦਿਸਦੀਆਂ ਹਨ।" ਪਹੁੰਚਯੋਗਤਾ ਕੁਝ ਚੀਜ਼ਾਂ ਨੂੰ ਸੀਮਤ ਕਰਦੀ ਹੈ — ਕੰਟਰਾਸਟ, ਫ਼ੋਕਸ ਸਟਾਈਲ, ਟੈਕਸਟ ਦਾ ਆਕਾਰ — ਪਰ ਚੰਗੀਆਂ ਦਿਸਣ ਵਾਲੀਆਂ ਪਹੁੰਚਯੋਗ ਸਾਈਟਾਂ ਆਮ ਹਨ, ਅਪਵਾਦ ਨਹੀਂ।
- "ਇੱਕ ਆਟੋਮੇਟਿਡ ਚੈਕਰ 100 ਦਿਖਾਉਂਦਾ ਹੈ, ਇਸ ਲਈ ਅਸੀਂ ਮੁਕੰਮਲ ਹਾਂ।" ਆਟੋਮੇਟਿਡ ਟੂਲ ਕੁਝ ਹੀ ਸਮੱਸਿਆਵਾਂ ਫੜਦੇ ਹਨ। ਕੀ alt ਟੈਕਸਟ ਸੱਚਮੁੱਚ ਅਰਥਪੂਰਨ ਹੈ, ਜਾਂ ਕੀ ਕੋਈ ਪ੍ਰਵਾਹ ਸਕਰੀਨ ਰੀਡਰ ਨਾਲ ਸਮਝ ਆਉਂਦਾ ਹੈ, ਇਹ ਕਿਸੇ ਵਿਅਕਤੀ ਨੂੰ ਜਾਂਚਣਾ ਪੈਂਦਾ ਹੈ।
- "ਓਵਰਲੇ ਵਿਜੇਟ ਸਾਨੂੰ ਅਨੁਕੂਲ ਬਣਾ ਦੇਵੇਗਾ।" ਉੱਤੇ ਲਗਾਏ ਟੂਲਬਾਰ ਤੁਹਾਡੇ ਕੋਡ ਵਿੱਚ ਗਾਇਬ ਲੇਬਲ ਜਾਂ ਟੁੱਟੀ ਕੀਬੋਰਡ ਪਹੁੰਚ ਠੀਕ ਨਹੀਂ ਕਰ ਸਕਦੇ। ਸਰੋਤ ਠੀਕ ਕਰੋ।
- "ਸਾਡੇ ਕੋਲ ਕੋਈ ਅਪਾਹਜ ਉਪਭੋਗਤਾ ਨਹੀਂ।" ਤੁਹਾਨੂੰ ਸ਼ਾਇਦ ਪਤਾ ਨਾ ਹੋਵੇ। ਬਹੁਤ ਸਾਰੀਆਂ ਅਪਾਹਜਤਾਵਾਂ ਦਿਸਦੀਆਂ ਨਹੀਂ, ਅਤੇ ਜਿਹੜੇ ਲੋਕ ਰੁਕਾਵਟ ਨਾਲ ਟਕਰਾਉਂਦੇ ਹਨ ਉਹ ਆਮ ਤੌਰ 'ਤੇ ਬਸ ਚਲੇ ਜਾਂਦੇ ਹਨ।
ਆਪਣੇ AI ਬਿਲਡਰ ਤੋਂ ਕੀ ਮੰਗਣਾ ਹੈ
- "ਇਸਨੂੰ WCAG 2.2 ਪੱਧਰ AA ਪੂਰਾ ਕਰਨ ਲਈ ਬਣਾਓ।"
- "ਸੈਮੈਂਟਿਕ HTML ਵਰਤੋ: ਅਸਲ ਬਟਨ, ਲਿੰਕ, ਕ੍ਰਮ ਵਿੱਚ ਸਿਰਲੇਖ, ਅਤੇ ਹਰ ਫ਼ਾਰਮ ਖੇਤਰ ਲਈ ਲੇਬਲ।"
- "ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਹਰ ਇੰਟਰੈਕਟਿਵ ਤੱਤ ਸਿਰਫ਼ ਕੀਬੋਰਡ ਨਾਲ ਕੰਮ ਕਰੇ ਅਤੇ ਉਸਦੀ ਦਿਸਣ ਵਾਲੀ ਫ਼ੋਕਸ ਸਟਾਈਲ ਹੋਵੇ।"
- "ਸਾਰੇ ਟੈਕਸਟ ਅਤੇ ਆਈਕਨ ਰੰਗਾਂ ਦਾ ਕੰਟਰਾਸਟ ਜਾਂਚੋ — ਆਮ ਟੈਕਸਟ ਲਈ 4.5:1, ਵੱਡੇ ਟੈਕਸਟ ਅਤੇ ਆਈਕਨਾਂ ਲਈ 3:1।"
- "ਅਰਥਪੂਰਨ ਤਸਵੀਰਾਂ ਲਈ ਅਰਥਪੂਰਨ alt ਟੈਕਸਟ ਅਤੇ ਸਜਾਵਟੀ ਤਸਵੀਰਾਂ ਲਈ ਖਾਲੀ alt ਜੋੜੋ।"
- "ਫ਼ਾਰਮ ਦੀਆਂ ਗਲਤੀਆਂ ਲਿਖਤ ਵਜੋਂ ਦਿਖਾਓ, ਖੇਤਰ ਨਾਲ ਜੋੜ ਕੇ, ਸਿਰਫ਼ ਰੰਗ ਨਾਲ ਨਹੀਂ।"
- "ਐਨੀਮੇਸ਼ਨਾਂ ਲਈ ਉਪਭੋਗਤਾ ਦੀ reduced-motion ਸੈਟਿੰਗ ਦਾ ਆਦਰ ਕਰੋ।"
- "ਇੱਕ ਆਟੋਮੇਟਿਡ ਪਹੁੰਚਯੋਗਤਾ ਜਾਂਚ ਚਲਾਓ ਅਤੇ ਜੋ ਇਹ ਨਹੀਂ ਜਾਂਚ ਸਕਦੀ ਉਸਦੀ ਸੂਚੀ ਦਿਓ, ਤਾਂ ਜੋ ਮੈਂ ਉਹ ਹੱਥੀਂ ਜਾਂਚ ਸਕਾਂ।"
ਫਿਰ ਆਪ ਜਾਂਚੋ: ਮਾਊਸ ਪਾਸੇ ਰੱਖੋ ਅਤੇ ਸਿਰਫ਼ Tab, Shift+Tab, Enter ਅਤੇ Space ਨਾਲ ਆਪਣਾ ਮੁੱਖ ਪ੍ਰਵਾਹ ਪੂਰਾ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ਆਪਣੇ ਫ਼ੋਨ ਦੇ ਬਿਲਟ-ਇਨ ਸਕਰੀਨ ਰੀਡਰ ਨਾਲ ਮੁੱਖ ਪੰਨਾ ਸੁਣੋ। ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ 200% ਜ਼ੂਮ ਕਰਕੇ ਵੇਖੋ ਕਿ ਕੁਝ ਟੁੱਟਦਾ ਤਾਂ ਨਹੀਂ।
Mythex ਵਿੱਚ ਪਹੁੰਚਯੋਗਤਾ
Mythex ਵਿੱਚ ਕੋਈ ਸਮਰਪਿਤ ਪਹੁੰਚਯੋਗਤਾ ਜਾਂਚਕਰਤਾ ਸ਼ਾਮਲ ਨਹੀਂ ਹੈ, ਇਸ ਲਈ ਪਹੁੰਚਯੋਗਤਾ ਨੂੰ ਆਪਣੇ ਪ੍ਰੋਂਪਟਾਂ ਅਤੇ ਜਾਂਚ ਦਾ ਹਿੱਸਾ ਮੰਨੋ। ਪਹਿਲੇ ਪ੍ਰੋਂਪਟ ਤੋਂ ਹੀ WCAG 2.2 AA ਮੰਗੋ, ਨਤੀਜਾ Preview ਵਿੱਚ ਕੀਬੋਰਡ ਨਾਲ ਜਾਂਚੋ, ਅਤੇ ਪ੍ਰਕਾਸ਼ਿਤ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਏਜੰਟ ਨੂੰ ਆਪਣੇ ਮੁੱਖ ਪ੍ਰਵਾਹਾਂ ਵਿੱਚ ਕਲਿੱਕ ਕਰਵਾਉਣ ਲਈ /test ਵਰਤੋ — ਵੇਖੋ App Testing। SEO ਰੈਸਿਪੀ ਵੀ ਸੈਮੈਂਟਿਕ ਸਿਰਲੇਖ ਅਤੇ ਅਰਥਪੂਰਨ alt ਟੈਕਸਟ ਮੰਗਦੀ ਹੈ, ਜੋ ਦੋਵੇਂ ਟੀਚਿਆਂ ਦੀ ਸੇਵਾ ਕਰਦੇ ਹਨ।
ਇੱਕ ਹੱਥੀਂ ਚੈੱਕਲਿਸਟ ਲਈ, ਵੇਖੋ ਆਪਣੀ ਵੈੱਬਸਾਈਟ ਨੂੰ ਪਹੁੰਚਯੋਗ ਕਿਵੇਂ ਬਣਾਈਏ। ਡਿਜ਼ਾਈਨ ਲਈ, AI ਨਾਲ ਚੰਗੀ ਦਿੱਖ ਵਾਲੀ ਐਪ ਕਿਵੇਂ ਡਿਜ਼ਾਈਨ ਕਰੀਏ ਪੜ੍ਹੋ, ਅਤੇ ਲਾਂਚ ਤੋਂ ਪਹਿਲਾਂ, ਲਾਂਚ ਤੋਂ ਪਹਿਲਾਂ ਆਪਣੀ ਐਪ ਕਿਵੇਂ ਜਾਂਚੀਏ। W3C ਦਾ ਆਪਣਾ WCAG ਝਾਤ ਅਧਿਕਾਰਤ ਸਰੋਤ ਹੈ।
ਸਵਾਲ
ਸਰਲ ਸ਼ਬਦਾਂ ਵਿੱਚ ਵੈੱਬ ਪਹੁੰਚਯੋਗਤਾ ਕੀ ਹੈ?
ਵੈੱਬ ਪਹੁੰਚਯੋਗਤਾ ਦਾ ਮਤਲਬ ਹੈ ਵੈੱਬਸਾਈਟਾਂ ਅਤੇ ਐਪਾਂ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਡਿਜ਼ਾਈਨ ਅਤੇ ਬਣਾਉਣਾ ਕਿ ਅਪਾਹਜ ਲੋਕ ਉਨ੍ਹਾਂ ਨੂੰ ਵੇਖ, ਸਮਝ, ਨੈਵੀਗੇਟ ਅਤੇ ਵਰਤ ਸਕਣ। ਇਸ ਵਿੱਚ ਨੇਤਰਹੀਣ ਲੋਕ ਜੋ ਸਕਰੀਨ ਰੀਡਰ ਵਰਤਦੇ ਹਨ, ਜੋ ਮਾਊਸ ਨਹੀਂ ਵਰਤ ਸਕਦੇ, ਘੱਟ ਨਜ਼ਰ ਜਾਂ ਰੰਗ-ਅੰਨ੍ਹੇਪਣ ਵਾਲੇ, ਬੋਲੇ ਲੋਕ ਅਤੇ ਬੋਧਾਤਮਕ ਜਾਂ ਸਿੱਖਣ ਸੰਬੰਧੀ ਅਪਾਹਜਤਾ ਵਾਲੇ ਲੋਕ ਸ਼ਾਮਲ ਹਨ।
WCAG ਕੀ ਹੈ?
WCAG (Web Content Accessibility Guidelines) W3C ਵੱਲੋਂ ਪ੍ਰਕਾਸ਼ਿਤ ਵੈੱਬ ਪਹੁੰਚਯੋਗਤਾ ਲਈ ਅੰਤਰਰਾਸ਼ਟਰੀ ਮਿਆਰ ਹੈ। ਮੌਜੂਦਾ ਵਰਜ਼ਨ WCAG 2.2 ਹੈ, ਜੋ ਅਕਤੂਬਰ 2023 ਵਿੱਚ ਪਹਿਲੀ ਵਾਰ ਪ੍ਰਕਾਸ਼ਿਤ ਹੋਇਆ। ਇਸਦੇ ਸਫ਼ਲਤਾ ਮਾਪਦੰਡ ਪੱਧਰ A, AA ਅਤੇ AAA ਵਿੱਚ ਵੰਡੇ ਗਏ ਹਨ, ਅਤੇ AA ਪੱਧਰ ਉਹ ਟੀਚਾ ਹੈ ਜਿਸਦਾ ਜ਼ਿਕਰ ਜ਼ਿਆਦਾਤਰ ਸੰਸਥਾਵਾਂ ਅਤੇ ਕਾਨੂੰਨ ਕਰਦੇ ਹਨ।
WCAG ਕਿਹੜਾ ਰੰਗ ਕੰਟਰਾਸਟ ਮੰਗਦਾ ਹੈ?
AA ਪੱਧਰ ਉੱਤੇ, ਆਮ ਟੈਕਸਟ ਨੂੰ ਆਪਣੇ ਪਿਛੋਕੜ ਦੇ ਮੁਕਾਬਲੇ ਘੱਟੋ-ਘੱਟ 4.5:1 ਕੰਟਰਾਸਟ ਅਨੁਪਾਤ ਚਾਹੀਦਾ ਹੈ, ਅਤੇ ਵੱਡੇ ਟੈਕਸਟ (ਲਗਭਗ 18 ਪੌਇੰਟ, ਜਾਂ 14 ਪੌਇੰਟ ਬੋਲਡ) ਨੂੰ ਘੱਟੋ-ਘੱਟ 3:1। ਆਈਕਨਾਂ ਅਤੇ ਕੰਟਰੋਲਾਂ ਦੇ ਦਿਖਣ ਵਾਲੇ ਹਿੱਸਿਆਂ ਨੂੰ ਆਪਣੇ ਨਾਲ ਲੱਗਦੇ ਰੰਗ ਦੇ ਮੁਕਾਬਲੇ ਘੱਟੋ-ਘੱਟ 3:1 ਚਾਹੀਦਾ ਹੈ।
ਕੀ ਵੈੱਬ ਪਹੁੰਚਯੋਗਤਾ ਕਾਨੂੰਨੀ ਲੋੜ ਹੈ?
ਕਈ ਥਾਵਾਂ ਉੱਤੇ, ਕਈ ਸੰਸਥਾਵਾਂ ਲਈ, ਹਾਂ। ਕਾਨੂੰਨ ਦੇਸ਼ ਅਤੇ ਖੇਤਰ ਅਨੁਸਾਰ ਵੱਖਰੇ ਹਨ — ਉਦਾਹਰਣ ਲਈ, European Accessibility Act ਯੂਰਪੀ ਸੰਘ ਵਿੱਚ ਬਹੁਤ ਸਾਰੇ ਖਪਤਕਾਰ ਡਿਜੀਟਲ ਉਤਪਾਦਾਂ ਅਤੇ ਸੇਵਾਵਾਂ ਨੂੰ ਕਵਰ ਕਰਦਾ ਹੈ। ਆਪਣੇ ਉੱਤੇ ਲਾਗੂ ਹੁੰਦੇ ਨਿਯਮ ਜਾਂਚੋ, ਜਾਂ ਕਿਸੇ ਕਾਨੂੰਨੀ ਸਲਾਹਕਾਰ ਤੋਂ ਪੁੱਛੋ।
ਕੀ ਕੋਈ ਪਹੁੰਚਯੋਗਤਾ ਓਵਰਲੇ ਜਾਂ ਵਿਜੇਟ ਮੇਰੀ ਸਾਈਟ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾ ਸਕਦਾ ਹੈ?
ਇਕੱਲਾ ਨਹੀਂ। ਓਵਰਲੇ ਤੁਹਾਡੀ ਸਾਈਟ ਉੱਤੇ ਟੂਲਬਾਰ ਜੋੜਦੇ ਹਨ, ਪਰ ਹੇਠਲੀਆਂ ਸਮੱਸਿਆਵਾਂ ਜਿਵੇਂ ਗਾਇਬ ਲੇਬਲ, ਵਰਤਣ ਯੋਗ ਕੀਬੋਰਡ ਨੈਵੀਗੇਸ਼ਨ ਦੀ ਕਮੀ ਜਾਂ ਅਸਪਸ਼ਟ ਢਾਂਚਾ ਭਰੋਸੇਯੋਗ ਤਰੀਕੇ ਨਾਲ ਠੀਕ ਨਹੀਂ ਕਰ ਸਕਦੇ। ਭਰੋਸੇਯੋਗ ਤਰੀਕਾ ਸਾਈਟ ਦਾ ਕੋਡ ਅਤੇ ਸਮੱਗਰੀ ਠੀਕ ਕਰਨਾ ਹੈ।