ਆਪਣੀ ਵੈੱਬਸਾਈਟ ਨੂੰ ਪਹੁੰਚਯੋਗ ਕਿਵੇਂ ਬਣਾਈਏ: WCAG 2.2 ਸ਼ੁਰੂਆਤੀ ਗਾਈਡ

ਵੈੱਬਸਾਈਟ ਨੂੰ ਪਹੁੰਚਯੋਗ ਬਣਾਉਣ ਲਈ ਇਸ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਬਣਾਓ ਕਿ ਲੋਕ ਇਸ ਨੂੰ ਸਿਰਫ਼ ਮਾਊਸ ਨਾਲ ਨਹੀਂ, ਸਗੋਂ ਕੀਬੋਰਡ, ਸਕਰੀਨ ਰੀਡਰ, ਜ਼ੂਮ ਜਾਂ ਸਵਿੱਚ ਡਿਵਾਈਸ ਨਾਲ ਵੀ ਵਰਤ ਸਕਣ: ਬਟਨਾਂ, ਲਿੰਕਾਂ, ਹੈਡਿੰਗਾਂ ਅਤੇ ਫਾਰਮ ਲੇਬਲਾਂ ਲਈ ਅਸਲੀ HTML ਤੱਤ ਵਰਤੋ, ਤਸਵੀਰਾਂ ਨੂੰ ਅਰਥਪੂਰਨ alt ਟੈਕਸਟ ਦਿਓ, ਲਿਖਤ ਦਾ ਕੰਟ੍ਰਾਸਟ ਉੱਚਾ ਰੱਖੋ ਅਤੇ ਫੋਕਸ ਨੂੰ ਦਿਸਣਯੋਗ ਬਣਾਓ। ਜਿਸ ਮਿਆਰ ਦਾ ਟੀਚਾ ਰੱਖਣਾ ਹੈ ਉਹ WCAG 2.2 Level AA ਹੈ। ਆਟੋਮੈਟਿਕ ਚੈਕਰ ਸਮੱਸਿਆ ਦਾ ਹਿੱਸਾ ਫੜਦੇ ਹਨ; ਦਸ ਮਿੰਟ ਦੀ ਕੀਬੋਰਡ ਅਤੇ ਸਕਰੀਨ ਰੀਡਰ ਜਾਂਚ ਬਾਕੀ ਦਾ ਵੱਡਾ ਹਿੱਸਾ ਫੜ ਲੈਂਦੀ ਹੈ।

ਪਹੁੰਚਯੋਗ ਦਾ ਅਸਲ ਮਤਲਬ

ਪਹੁੰਚਯੋਗਤਾ ਲੋਕਾਂ ਬਾਰੇ ਹੈ: ਕੋਈ ਜੋ ਨੇਤਰਹੀਣ ਹੈ ਅਤੇ ਸਕਰੀਨ ਰੀਡਰ ਵਰਤਦਾ ਹੈ, ਕੋਈ ਜਿਸ ਦੇ ਹੱਥ ਕੰਬਦੇ ਹਨ ਅਤੇ ਕੀਬੋਰਡ ਨਾਲ ਨੈਵੀਗੇਟ ਕਰਦਾ ਹੈ, ਕੋਈ ਜਿਸ ਦੀ ਨਜ਼ਰ ਕਮਜ਼ੋਰ ਹੈ ਅਤੇ 200% ਤੱਕ ਜ਼ੂਮ ਕਰਦਾ ਹੈ, ਕੋਈ ਜੋ ਤੇਜ਼ ਧੁੱਪ ਵਿੱਚ ਪੜ੍ਹਦਾ ਹੈ, ਜਾਂ ਕੋਈ ਜਿਸ ਦਾ ਹੱਥ ਅਸਥਾਈ ਤੌਰ 'ਤੇ ਟੁੱਟਿਆ ਹੈ। ਚੰਗੀ ਪਹੁੰਚਯੋਗਤਾ ਅਕਸਰ ਸਭ ਲਈ ਸਾਈਟ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਂਦੀ ਹੈ: ਸਾਫ਼ ਬਣਤਰ, ਪੜ੍ਹਨਯੋਗ ਲਿਖਤ, ਅਤੇ ਫਾਰਮ ਜੋ ਆਪਣੀਆਂ ਗਲਤੀਆਂ ਸਮਝਾਉਂਦੇ ਹਨ।

ਹਵਾਲੇ ਦਾ ਮਿਆਰ W3C ਦੀਆਂ Web Content Accessibility Guidelines (WCAG) ਹਨ। ਸਤੰਬਰ 2026 ਤੱਕ ਮੌਜੂਦਾ ਵਰਜਨ WCAG 2.2 ਹੈ (ਅਕਤੂਬਰ 2023 ਵਿੱਚ ਪ੍ਰਕਾਸ਼ਿਤ, ਦਸੰਬਰ 2024 ਵਿੱਚ ਅੱਪਡੇਟ); WCAG 3 ਸ਼ੁਰੂਆਤੀ ਡਰਾਫਟ ਹੈ। WCAG ਚਾਰ ਸਿਧਾਂਤਾਂ ਦੇ ਦੁਆਲੇ ਬਣਿਆ ਹੈ: ਸਮੱਗਰੀ ਨੂੰ ਮਹਿਸੂਸਯੋਗ, ਚਲਾਉਣਯੋਗ, ਸਮਝਣਯੋਗ ਅਤੇ ਮਜ਼ਬੂਤ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ, ਅਤੇ ਇਸ ਦੇ ਤਿੰਨ ਅਨੁਕੂਲਤਾ ਪੱਧਰ ਹਨ:

ਕਈ ਥਾਵਾਂ 'ਤੇ ਕਾਨੂੰਨ WCAG ਦਾ ਹਵਾਲਾ ਦਿੰਦੇ ਹਨ, ਉਦਾਹਰਨ ਲਈ European Accessibility Act, ਜੋ ਜੂਨ 2025 ਤੋਂ EU ਵਿੱਚ ਬਹੁਤ ਸਾਰੀਆਂ ਖਪਤਕਾਰ ਡਿਜੀਟਲ ਸੇਵਾਵਾਂ 'ਤੇ ਲਾਗੂ ਹੋ ਰਿਹਾ ਹੈ। ਕਿਹੜੇ ਨਿਯਮ ਤੁਹਾਡੇ 'ਤੇ ਲਾਗੂ ਹੁੰਦੇ ਹਨ, ਇਹ ਇਸ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਕਿੱਥੇ ਕੰਮ ਕਰਦੇ ਹੋ ਅਤੇ ਕੀ ਵੇਚਦੇ ਹੋ; ਜੇ ਅਨਿਸ਼ਚਿਤ ਹੋ, ਤਾਂ ਕਿਸੇ ਸਲਾਹਕਾਰ ਨਾਲ ਗੱਲ ਕਰੋ। ਇਹ ਗਾਈਡ ਵਿਹਾਰਕ ਕੰਮ ਨੂੰ ਕਵਰ ਕਰਦੀ ਹੈ।

ਉੱਥੇ ਪਹੁੰਚਣ ਦੇ ਤਰੀਕੇ

ਜ਼ਿਆਦਾਤਰ ਛੋਟੀਆਂ ਸਾਈਟਾਂ ਲਈ ਪਹਿਲੀਆਂ ਦੋ ਕਾਫ਼ੀ ਹਨ: AI ਨੂੰ ਸ਼ੁਰੂ ਤੋਂ ਪਹੁੰਚਯੋਗ ਬਣਾਉਣ ਲਈ ਕਹੋ, ਫਿਰ ਲਾਂਚ ਤੋਂ ਪਹਿਲਾਂ ਆਡਿਟ ਕਰੋ।

ਸਭ ਤੋਂ ਵੱਧ ਮਾਇਨੇ ਰੱਖਣ ਵਾਲੇ ਫਿਕਸ

ਸਹੀ HTML ਤੱਤ ਵਰਤੋ

ਜ਼ਿਆਦਾਤਰ ਪਹੁੰਚਯੋਗਤਾ ਸਹੀ HTML ਨਾਲ ਮੁਫ਼ਤ ਮਿਲਦੀ ਹੈ। <button> ਫੋਕਸ ਹੋ ਸਕਦਾ ਹੈ, Enter ਅਤੇ Space ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ, ਅਤੇ ਬਟਨ ਵਜੋਂ ਐਲਾਨਿਆ ਜਾਂਦਾ ਹੈ। ਕਲਿੱਕ ਹੈਂਡਲਰ ਵਾਲਾ <div> ਇਹ ਕੁਝ ਵੀ ਨਹੀਂ ਕਰਦਾ। AI ਦਾ ਲਿਖਿਆ ਕੋਡ ਕਈ ਵਾਰ ਹਰ ਚੀਜ਼ ਲਈ ਸਟਾਈਲ ਵਾਲੇ div ਵਰਤਦਾ ਹੈ; ਸੈਮੈਂਟਿਕ ਤੱਤ ਮੰਗੋ:

• ਕਾਰਵਾਈਆਂ ਲਈ <button>, ਨੈਵੀਗੇਸ਼ਨ ਲਈ <a href>
• ਹਰ ਪੰਨੇ 'ਤੇ ਇੱਕ <h1>, ਫਿਰ ਕ੍ਰਮ ਵਿੱਚ <h2>, <h3> — ਸਕਰੀਨ ਰੀਡਰ ਯੂਜ਼ਰ ਹੈਡਿੰਗਾਂ ਵਿਚਕਾਰ ਛਾਲ ਮਾਰਦੇ ਹਨ
• ਲੈਂਡਮਾਰਕ: <header>, <nav>, <main>, <footer>
• ਹਰ ਫਾਰਮ ਖੇਤਰ ਨਾਲ ਜੁੜਿਆ <label>
• <html lang="en"> ਵਿੱਚ ਪੰਨੇ ਦੀ ਭਾਸ਼ਾ

ARIA ਗੁਣ ਸਿਰਫ਼ ਉਦੋਂ ਵਰਤੋ ਜਦੋਂ ਕੋਈ ਮੂਲ ਤੱਤ ਠੀਕ ਨਾ ਬੈਠੇ, ਜਿਵੇਂ ਕਸਟਮ ਟੈਬ ਸੈੱਟ ਜਾਂ combobox ਲਈ। ਗਲਤ ARIA ਕੋਈ ਵੀ ਨਾ ਹੋਣ ਨਾਲੋਂ ਬੁਰੀ ਹੈ।

ਕੀਬੋਰਡ ਪਹੁੰਚ ਅਤੇ ਦਿਸਣਯੋਗ ਫੋਕਸ

ਜੋ ਵੀ ਤੁਸੀਂ ਮਾਊਸ ਨਾਲ ਕਰ ਸਕਦੇ ਹੋ, ਉਹ ਸਿਰਫ਼ ਕੀਬੋਰਡ ਨਾਲ ਵੀ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ (WCAG 2.1.1)। ਪੰਨੇ 'ਤੇ Tab ਦਬਾਓ: ਹਰ ਲਿੰਕ, ਬਟਨ ਅਤੇ ਖੇਤਰ ਤੱਕ ਤਰਕਸੰਗਤ ਕ੍ਰਮ ਵਿੱਚ ਪਹੁੰਚ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ, ਅਤੇ ਫੋਕਸ ਕਿੱਥੇ ਹੈ ਇਹ ਹਮੇਸ਼ਾਂ ਦਿਖਣਾ ਚਾਹੀਦਾ ਹੈ (2.4.7 Focus Visible)। WCAG 2.2 ਨੇ ਜੋੜਿਆ ਹੈ ਕਿ ਫੋਕਸ ਵਾਲਾ ਤੱਤ ਸਟਿੱਕੀ ਹੈਡਰ ਜਾਂ ਕੂਕੀ ਬੈਨਰ ਦੇ ਪਿੱਛੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਲੁਕਿਆ ਨਹੀਂ ਹੋਣਾ ਚਾਹੀਦਾ (2.4.11, Level AA)।

ਆਮ ਨੁਕਸ: ਸਿਰਫ਼ ਹੋਵਰ 'ਤੇ ਖੁੱਲ੍ਹਣ ਵਾਲੇ ਮੀਨੂ, ਮੋਡਲ ਜੋ ਫੋਕਸ ਨਹੀਂ ਰੋਕਦੇ ਜਾਂ Escape ਨਾਲ ਬੰਦ ਨਹੀਂ ਹੁੰਦੇ, ਅਤੇ CSS ਵਿੱਚ outline: none ਬਿਨਾਂ ਬਦਲ ਦੇ।

ਟੈਕਸਟ ਵਿਕਲਪ

ਹਰ ਅਰਥਪੂਰਨ ਤਸਵੀਰ ਨੂੰ ਅਜਿਹਾ alt ਟੈਕਸਟ ਚਾਹੀਦਾ ਹੈ ਜੋ ਸੰਦਰਭ ਵਿੱਚ ਦੱਸੇ ਕਿ ਉਹ ਕੀ ਦਿਖਾਉਂਦੀ ਹੈ ("ਸ਼ੈੱਫ ਟੇਸਟਿੰਗ ਮੀਨੂ ਸਜਾਉਂਦਾ ਹੋਇਆ", "image1.jpg" ਨਹੀਂ)। ਸਜਾਵਟੀ ਤਸਵੀਰਾਂ ਨੂੰ ਖਾਲੀ alt="" ਮਿਲਦਾ ਹੈ ਤਾਂ ਜੋ ਸਕਰੀਨ ਰੀਡਰ ਉਨ੍ਹਾਂ ਨੂੰ ਛੱਡ ਦੇਣ। ਸਿਰਫ਼ ਆਈਕਨ ਵਾਲੇ ਬਟਨਾਂ ਦਾ ਪਹੁੰਚਯੋਗ ਨਾਮ ਚਾਹੀਦਾ ਹੈ ("ਬੰਦ ਕਰੋ", "ਖੋਜੋ")। ਵੀਡੀਓ ਨੂੰ ਕੈਪਸ਼ਨ ਅਤੇ ਆਡੀਓ ਨੂੰ ਟ੍ਰਾਂਸਕ੍ਰਿਪਟ ਚਾਹੀਦਾ ਹੈ।

ਰੰਗ ਅਤੇ ਕੰਟ੍ਰਾਸਟ

WCAG 2.2 AA ਆਮ ਟੈਕਸਟ ਲਈ ਘੱਟੋ-ਘੱਟ 4.5:1 ਅਤੇ ਵੱਡੇ ਟੈਕਸਟ ਲਈ 3:1 ਮੰਗਦਾ ਹੈ (1.4.3), ਅਤੇ ਇਨਪੁਟ ਬਾਰਡਰ ਅਤੇ ਅਰਥ ਵਾਲੇ ਆਈਕਨ ਵਰਗੇ ਇੰਟਰਫੇਸ ਹਿੱਸਿਆਂ ਲਈ 3:1 (1.4.11)। ਹਲਕੇ ਸਲੇਟੀ ਪਲੇਸਹੋਲਡਰ ਟੈਕਸਟ ਅਤੇ ਫਿੱਕੇ ਬਟਨ ਆਮ ਤੌਰ 'ਤੇ ਨਾਕਾਮ ਹੁੰਦੇ ਹਨ। ਨਾਲ ਹੀ, ਅਰਥ ਸਿਰਫ਼ ਰੰਗ ਨਾਲ ਕਦੇ ਨਾ ਦੱਸੋ: ਗਲਤ ਖੇਤਰ 'ਤੇ ਲਾਲ ਬਾਰਡਰ ਦੇ ਨਾਲ ਗਲਤੀ ਸੁਨੇਹਾ ਵੀ ਚਾਹੀਦਾ ਹੈ।

ਆਕਾਰ ਬਦਲਣਾ ਅਤੇ ਰੀਫਲੋ

ਟੈਕਸਟ 200% ਜ਼ੂਮ 'ਤੇ ਵਰਤੋਂਯੋਗ ਰਹਿਣਾ ਚਾਹੀਦਾ ਹੈ (1.4.4), ਅਤੇ ਸਮੱਗਰੀ 320 CSS ਪਿਕਸਲ ਚੌੜਾਈ 'ਤੇ ਬਿਨਾਂ ਪਾਸੇ ਸਕ੍ਰੋਲ ਕੀਤੇ ਕੰਮ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ (1.4.10)। ਇੱਕ ਸਹੀ ਰਿਸਪਾਂਸਿਵ ਲੇਆਉਟ ਜ਼ਿਆਦਾਤਰ ਇਹ ਸੰਭਾਲ ਲੈਂਦਾ ਹੈ।

ਟਾਰਗੇਟ, ਫਾਰਮ ਅਤੇ ਗਲਤੀਆਂ

• ਟਾਰਗੇਟ ਆਕਾਰ: WCAG 2.2 AA ਪੁਆਇੰਟਰ ਟਾਰਗੇਟਾਂ ਲਈ ਘੱਟੋ-ਘੱਟ 24 ਗੁਣਾ 24 CSS ਪਿਕਸਲ ਮੰਗਦਾ ਹੈ, ਜਾਂ ਛੋਟਿਆਂ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਕਾਫ਼ੀ ਥਾਂ (2.5.8)। ਫ਼ੋਨ 'ਤੇ ਵੱਡਾ ਹੋਣਾ ਵੱਧ ਦਿਆਲੂ ਹੈ।
• ਫਾਰਮ: ਦਿਸਣ ਵਾਲੇ ਲੇਬਲ (ਸਿਰਫ਼ ਪਲੇਸਹੋਲਡਰ ਨਹੀਂ), ਸਾਫ਼ ਹਦਾਇਤਾਂ, ਅਤੇ ਗਲਤੀ ਸੁਨੇਹੇ ਜੋ ਦੱਸਣ ਕਿ ਕੀ ਗਲਤ ਹੈ ਅਤੇ ਕਿਵੇਂ ਠੀਕ ਕਰਨਾ ਹੈ, ਖੇਤਰ ਦੇ ਕੋਲ।
• ਲੌਗਇਨ: ਲੋਕਾਂ ਨੂੰ ਬੁਝਾਰਤ ਹੱਲ ਕਰਨ ਜਾਂ ਕੋਡ ਲਿਖਣ ਲਈ ਮਜਬੂਰ ਨਾ ਕਰੋ ਬਿਨਾਂ ਬਦਲ ਦੇ; ਪਾਸਵਰਡ ਮੈਨੇਜਰ ਅਤੇ ਪੇਸਟ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿਓ (3.3.8 Accessible Authentication)।

ਕੰਮ ਕਰਨ ਵਾਲੇ ਪ੍ਰੰਪਟ

ਇਸ ਸਾਈਟ ਨੂੰ WCAG 2.2 Level AA ਅਨੁਸਾਰ ਬਣਾਓ: ਸੈਮੈਂਟਿਕ HTML ਲੈਂਡਮਾਰਕ, ਹਰ ਪੰਨੇ 'ਤੇ ਇੱਕ h1 ਅਤੇ ਹੈਡਿੰਗ ਕ੍ਰਮ ਵਿੱਚ, ਅਸਲੀ button ਅਤੇ link ਤੱਤ, ਹਰ ਫਾਰਮ ਖੇਤਰ 'ਤੇ ਲੇਬਲ, ਦਿਸਣ ਵਾਲੇ ਫੋਕਸ ਸਟਾਈਲ, ਘੱਟੋ-ਘੱਟ 4.5:1 ਟੈਕਸਟ ਕੰਟ੍ਰਾਸਟ, ਅਰਥਪੂਰਨ ਤਸਵੀਰਾਂ 'ਤੇ alt ਟੈਕਸਟ ਅਤੇ ਸਜਾਵਟੀ 'ਤੇ alt="", ਅਤੇ html lang ਸੈੱਟ।

/signup ਅਤੇ /checkout ਪੰਨਿਆਂ ਦੀ ਪਹੁੰਚਯੋਗਤਾ ਜਾਂਚੋ। ਸਿਰਫ਼ ਕੀਬੋਰਡ ਨਾਲ ਵਰਤੋਂ, ਫੋਕਸ ਕ੍ਰਮ, ਦਿਸਣ ਵਾਲਾ ਫੋਕਸ, ਲੇਬਲ, ਗਲਤੀ ਸੁਨੇਹੇ, ਕੰਟ੍ਰਾਸਟ ਅਤੇ ਆਈਕਨ ਬਟਨਾਂ ਦੇ ਸਕਰੀਨ ਰੀਡਰ ਨਾਮ ਚੈੱਕ ਕਰੋ। ਹਰ ਸਮੱਸਿਆ WCAG ਮਾਪਦੰਡ ਸਮੇਤ ਸੂਚੀਬੱਧ ਕਰੋ, ਫਿਰ ਬਿਨਾਂ ਡਿਜ਼ਾਈਨ ਨੂੰ ਲੋੜ ਤੋਂ ਵੱਧ ਬਦਲੇ ਠੀਕ ਕਰੋ।

ਮੋਬਾਈਲ ਮੀਨੂ ਕੀਬੋਰਡ ਨਾਲ ਵਰਤਿਆ ਨਹੀਂ ਜਾ ਸਕਦਾ। ਇਸ ਨੂੰ aria-expanded ਵਾਲਾ ਬਟਨ ਬਣਾਓ, ਖੁੱਲ੍ਹਣ 'ਤੇ ਫੋਕਸ ਮੀਨੂ ਵਿੱਚ ਲੈ ਜਾਓ, Escape ਨਾਲ ਬੰਦ ਕਰੋ ਅਤੇ ਫੋਕਸ ਬਟਨ 'ਤੇ ਵਾਪਸ ਕਰੋ।

ਕਦਮ-ਦਰ-ਕਦਮ

1. ਆਟੋਮੈਟਿਕ ਜਾਂਚ ਚਲਾਓ। Chrome DevTools ਵਿੱਚ Lighthouse ਦਾ Accessibility ਭਾਗ, ਜਾਂ axe ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ, ਮੁੱਖ ਪੰਨਿਆਂ 'ਤੇ। ਜੋ ਵੀ ਦੱਸੇ ਠੀਕ ਕਰੋ।
2. ਮਾਊਸ ਹਟਾਓ। ਹਰ ਪੰਨੇ 'ਤੇ Tab ਦਬਾਓ ਅਤੇ ਹਰ ਮੁੱਖ ਕੰਮ ਪੂਰਾ ਕਰੋ: ਸਾਈਨ ਅੱਪ, ਖੋਜ, ਚੈੱਕਆਉਟ। ਜੋ ਤੱਕ ਨਹੀਂ ਪਹੁੰਚਦਾ, ਜਿੱਥੇ ਫੋਕਸ ਨਹੀਂ ਦਿਸਦਾ, ਜਾਂ ਜਿੱਥੋਂ ਨਿਕਲ ਨਹੀਂ ਸਕਦੇ, ਨੋਟ ਕਰੋ।
3. 200% ਜ਼ੂਮ ਕਰੋ ਅਤੇ ਵਿੰਡੋ ਨੂੰ ਫ਼ੋਨ ਚੌੜਾਈ ਤੱਕ ਸੰਕੋਚੋ। ਕੁਝ ਵੀ ਕੱਟਿਆ ਨਹੀਂ ਜਾਣਾ ਚਾਹੀਦਾ ਜਾਂ ਪਾਸੇ ਸਕ੍ਰੋਲ ਨਹੀਂ ਚਾਹੀਦਾ।
4. ਸਕਰੀਨ ਰੀਡਰ ਅਜ਼ਮਾਓ, ਦਸ ਮਿੰਟ ਲਈ: Mac ਅਤੇ iPhone 'ਤੇ VoiceOver, Android 'ਤੇ TalkBack, ਜਾਂ Windows 'ਤੇ NVDA (ਮੁਫ਼ਤ)। ਹੈਡਿੰਗਾਂ, ਲਿੰਕਾਂ ਅਤੇ ਫਾਰਮ ਖੇਤਰਾਂ ਨੂੰ ਸੁਣੋ। ਬਿਨਾਂ ਨਾਮ ਵਾਲਾ "ਬਟਨ", ਜਾਂ "link, click here", ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਕੰਮ ਬਾਕੀ ਹੈ।
5. ਕੰਟ੍ਰਾਸਟ ਜਾਂਚੋ ਟੈਕਸਟ, ਬਟਨਾਂ ਅਤੇ ਇਨਪੁਟਾਂ ਲਈ ਕੰਟ੍ਰਾਸਟ ਚੈਕਰ ਨਾਲ।
6. ਠੀਕ ਕਰੋ, ਫਿਰ ਉਹੀ ਕੰਮ ਦੁਬਾਰਾ ਚੈੱਕ ਕਰੋ।
7. ਪਹੁੰਚਯੋਗਤਾ ਬਿਆਨ ਪ੍ਰਕਾਸ਼ਿਤ ਕਰੋ ਜੋ ਦੱਸੇ ਕਿ ਤੁਸੀਂ ਕਿਹੜਾ ਮਿਆਰ ਟੀਚਾ ਰੱਖਦੇ ਹੋ ਅਤੇ ਸਮੱਸਿਆਵਾਂ ਕਿਵੇਂ ਰਿਪੋਰਟ ਕਰਨੀਆਂ ਹਨ, ਅਤੇ ਉਨ੍ਹਾਂ ਰਿਪੋਰਟਾਂ ਦਾ ਜਵਾਬ ਦਿਓ।

ਆਮ ਗਲਤੀਆਂ

• ਕੋਡ ਠੀਕ ਕਰਨ ਦੀ ਥਾਂ ਓਵਰਲੇ ਵਿਜੇਟ 'ਤੇ ਨਿਰਭਰ ਕਰਨਾ।
• ਫੋਕਸ ਆਉਟਲਾਈਨ ਹਟਾਉਣਾ ਕਿਉਂਕਿ ਉਹ ਅਣਸੁਥਰੇ ਲੱਗਦੇ ਹਨ, ਬਿਨਾਂ ਬਦਲ ਦੇ।
• ਸਿਰਫ਼ ਪਲੇਸਹੋਲਡਰ ਟੈਕਸਟ ਨੂੰ ਲੇਬਲ ਵਜੋਂ ਵਰਤਣਾ। ਲਿਖਣਾ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹੀ ਇਹ ਗਾਇਬ ਹੋ ਜਾਂਦਾ ਹੈ ਅਤੇ ਅਕਸਰ ਕੰਟ੍ਰਾਸਟ ਘੱਟ ਹੁੰਦਾ ਹੈ।
• "Click here" ਅਤੇ "Read more" ਲਿੰਕ। ਸੰਦਰਭ ਤੋਂ ਬਾਹਰ, ਸਕਰੀਨ ਰੀਡਰ ਯੂਜ਼ਰ ਇੱਕੋ ਜਿਹੇ ਲਿੰਕਾਂ ਦੀ ਸੂਚੀ ਸੁਣਦੇ ਹਨ।
• Alt ਟੈਕਸਟ ਵਿੱਚ ਕੀਵਰਡ ਭਰਨਾ। Alt ਟੈਕਸਟ ਲੋਕਾਂ ਲਈ ਹੈ; ਤਸਵੀਰ ਦਾ ਵਰਣਨ ਕਰੋ।
• ਇੱਕ ਵਾਰ ਜਾਂਚਣਾ। ਹਰ ਨਵਾਂ ਫੀਚਰ ਕੀਬੋਰਡ ਪਹੁੰਚ ਤੋੜ ਸਕਦਾ ਹੈ। ਆਪਣੀ ਲਾਂਚ ਤੋਂ ਪਹਿਲਾਂ ਦੀ ਟੈਸਟਿੰਗ ਵਿੱਚ ਕੀਬੋਰਡ ਪਾਸ ਸ਼ਾਮਲ ਕਰੋ।

ਪਹੁੰਚਯੋਗਤਾ ਚੈੱਕਲਿਸਟ

• ਮੁੱਖ ਪੰਨਿਆਂ 'ਤੇ ਆਟੋਮੈਟਿਕ ਜਾਂਚ (Lighthouse ਜਾਂ axe) ਸਾਫ਼
• ਹਰ ਕੰਮ ਸਿਰਫ਼ ਕੀਬੋਰਡ ਨਾਲ ਪੂਰਾ ਹੋ ਸਕਦਾ ਹੈ
• ਫੋਕਸ ਹਮੇਸ਼ਾਂ ਦਿਸਦਾ ਹੈ ਅਤੇ ਸਟਿੱਕੀ ਤੱਤਾਂ ਦੇ ਪਿੱਛੇ ਕਦੇ ਨਹੀਂ ਲੁਕਦਾ
• ਸੈਮੈਂਟਿਕ ਹੈਡਿੰਗ, ਲੈਂਡਮਾਰਕ, ਬਟਨ ਅਤੇ ਲਿੰਕ; lang ਸੈੱਟ
• ਅਰਥਪੂਰਨ alt ਟੈਕਸਟ; ਸਜਾਵਟੀ ਤਸਵੀਰਾਂ ਲਈ alt=""; ਵੀਡੀਓ 'ਤੇ ਕੈਪਸ਼ਨ
• ਟੈਕਸਟ ਕੰਟ੍ਰਾਸਟ ≥ 4.5:1 (ਵੱਡਾ ਟੈਕਸਟ ≥ 3:1); UI ਹਿੱਸੇ ≥ 3:1
• 200% ਜ਼ੂਮ ਅਤੇ 320 px ਚੌੜਾਈ 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ
• ਹਰ ਫਾਰਮ ਖੇਤਰ 'ਤੇ ਦਿਸਣ ਵਾਲਾ ਲੇਬਲ ਅਤੇ ਸਾਫ਼ ਗਲਤੀ ਸੁਨੇਹੇ
• ਪਹੁੰਚਯੋਗਤਾ ਬਿਆਨ, ਨਾਲ ਸਮੱਸਿਆਵਾਂ ਰਿਪੋਰਟ ਕਰਨ ਦਾ ਤਰੀਕਾ

ਇਨ੍ਹਾਂ ਦੇ ਪਿੱਛੇ ਦੀਆਂ ਧਾਰਨਾਵਾਂ ਲਈ, ਵੈੱਬ ਪਹੁੰਚਯੋਗਤਾ ਕੀ ਹੈ ਪੜ੍ਹੋ। ਪਹੁੰਚਯੋਗ ਡਿਜ਼ਾਈਨ ਅਤੇ ਚੰਗਾ ਡਿਜ਼ਾਈਨ ਕਾਫ਼ੀ ਮਿਲਦੇ ਹਨ; ਦ੍ਰਿਸ਼ਟੀਗਤ ਪਾਸੇ ਲਈ AI ਨਾਲ ਚੰਗਾ ਦਿਸਣ ਵਾਲਾ ਐਪ ਕਿਵੇਂ ਡਿਜ਼ਾਈਨ ਕਰੀਏ ਵੇਖੋ।

Mythex 'ਤੇ ਪਹੁੰਚਯੋਗਤਾ

Mythex ਉਹ ਮਿਆਰ ਵਰਤ ਕੇ ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਤੁਸੀਂ ਮੰਗਦੇ ਹੋ, ਇਸ ਲਈ "WCAG 2.2 AA" ਆਪਣੇ ਪਹਿਲੇ ਪ੍ਰੰਪਟ ਵਿੱਚ ਅਤੇ ਬਾਅਦ ਦੇ ਸੁਨੇਹਿਆਂ ਵਿੱਚ ਲਿਖੋ। ਛੋਟੀਆਂ ਸਕਰੀਨਾਂ ਜਾਂਚਣ ਲਈ ਤੁਸੀਂ Preview ਦਾ ਫ਼ੋਨ-ਆਕਾਰ ਫ੍ਰੇਮ ਵਰਤ ਸਕਦੇ ਹੋ (Preview and Code)। ਪਰ ਕੀਬੋਰਡ, ਜ਼ੂਮ ਅਤੇ ਸਕਰੀਨ ਰੀਡਰ ਟੈਸਟ ਪ੍ਰਕਾਸ਼ਿਤ URL 'ਤੇ ਜਾਂ ਵੱਖਰੇ ਟੈਬ ਵਿੱਚ ਖੋਲ੍ਹੀ ਪ੍ਰੀਵਿਊ 'ਤੇ ਸਭ ਤੋਂ ਵਧੀਆ ਕੰਮ ਕਰਦੇ ਹਨ। ਏਜੰਟ ਨੂੰ ਕਿਸੇ ਪੰਨੇ ਦਾ ਆਡਿਟ ਕਰਨ, ਜੋ ਮਿਲੇ ਉਹ ਠੀਕ ਕਰਨ ਲਈ ਕਹੋ, ਫਿਰ ਠੀਕ ਕੀਤੇ ਹਿੱਸੇ ਆਪ ਪਰਖੋ। ਆਟੋਮੈਟਿਕ ਪਾਸ ਸ਼ੁਰੂਆਤ ਹੈ, ਮਨਜ਼ੂਰੀ ਨਹੀਂ।

ਸਵਾਲ