React ਅਤੇ Flutter UI ਸਮੀਖਿਆ ਲਈ ਪਹੁੰਚਯੋਗਤਾ ਪ੍ਰਾਂਪਟ

ਲੋਕ ਕੀ ਛੱਡ ਜਾਂਦੇ ਹਨ ਜਦੋਂ ਉਹ UI ਨੂੰ ਪਹੁੰਚਯੋਗ ਬਣਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਨ

ਅਧਿਕਤਰ ਐਕਸੈਸਬਿਲਿਟੀ ਸਮੱਸਿਆਵਾਂ “ਵੱਡੇ ਰੀਡਿਜ਼ਾਈਨ” ਵਾਲੀਆਂ ਨਹੀਂ ਹੁੰਦੀਆਂ। ਇਹ ਛੋਟੇ-ਛੋਟੇ ਵੇਰਵੇ ਹੁੰਦੇ ਹਨ ਜੋ ਫੈਸਲਾ karde ਹਨ ਕਿ ਕੋਈ ਵਿਅਕਤੀ ਤੁਹਾਡੀ UI ਵਰਤ ਸਕੇਗਾ ਜਾਂ ਨਹੀਂ।

ਅਕਸਰ ਸਭ ਤੋਂ ਪਹਿਲਾਂ ਜੋ ਟੁੱਟਦਾ ਹੈ ਉਹ ਇੱਕ ਜਿਹੇ ਰੂਪ ਵਿੱਚ ਮਿਲਦਾ ਹੈ। ਇੱਕ ਪੰਨਾ ਠੀਕ ਲੱਗ ਸਕਦਾ ਹੈ, ਇੱਕ ਤੇਜ਼ ਨਜ਼ਰੀਆ ਚੈੱਕ ਪਾਸ ਕਰ ਸਕਦਾ ਹੈ, ਫਿਰ ਵੀ ਕੀਬੋਰਡ ਜਾਂ ਸਕ੍ਰੀਨ ਰੀਡਰ ਨਾਲ ਵਰਤਣ ਵਿੱਚ ਮੁਸ਼ਕਲ ਹੋ ਸਕਦਾ ਹੈ।

ਇੱਥੇ ਉਹ ਮੁੱਖ ਥਾਂਵਾਂ ਹਨ ਜਿੱਥੇ UI ਆਮ ਤੌਰ 'ਤੇ ਫੇਲ ਹੁੰਦਾ ਹੈ:

• ਕੀਬੋਰਡ ਐਕਸੈਸ: ਮੁੱਖ ਕੰਟਰੋਲ ਤੱਕ ਨਹੀਂ ਪਹੁੰਚ ਸਕਦੇ, ਜਾਂ ਮੋਡਲ ਵਿੱਚ ਫਸ ਜਾਂਦੇ ਹੋ।
• ਫੋਕਸ ਆਰਡਰ ਅਤੇ ਫੋਕਸ ਸਟੇਟਸ: ਫੋਕਸ ਉੱਪਰ-ਨੀਵੇਂ ਜਾਂਦਾ ਹੈ, ਜਾਂ ਤੁਹਾਨੂੰ ਪਤਾ ਨਹੀਂ ਚਲਦਾ ਕਿ ਤੁਸੀਂ ਕਿੱਥੇ ਹੋ।
• ਲੇਬਲ ਅਤੇ ਨਾਮ: ਇਨਪੁੱਟਸ ਅਤੇ ਬਟਨ ਦੇ ਐਕਸੈਸਬਿਲਿਟੀ ਨਾਮ ਅਸਪਸ਼ਟ ਜਾਂ ਗਾਇਬ ਹੁੰਦੇ ਹਨ।
• ਐਲਾਨ: ਡਾਇਨਾਮਿਕ ਅਪਡੇਟ ਹੁੰਦੀਆਂ ਹਨ ਪਰ ਸਕ੍ਰੀਨ ਰੀਡਰ ਨੂੰ ਨਹੀਂ ਦੱਸਿਆ ਜਾਂਦਾ।
• ਕਾਂਟਰਾਸਟ ਅਤੇ ਸਪਸ਼ਟਤਾ: ਟੈਕਸਟ, ਆਈਕਾਨ ਅਤੇ ਏਰਰ ਸਟੇਟਸ ਦੇਖਣ ਵਿੱਚ ਮੁਸ਼ਕਲ ਹੁੰਦੇ ਹਨ।

ਮੁਸ਼ਕਲ ਗੱਲ ਇਹ ਹੈ ਕਿ ਰਿੱਗਰੈਸ਼ਨ ਕਰਨਾ ਕਿੰਨਾ ਆਸਾਨ ਹੈ। ਇੱਕ “ਛੋਟੀ” تبدیلی ਜਿਵੇਂ ਕਿ ਇੱਕ ਬਟਨ ਦੀ ਥਾਂ ਇਕ ਆਈਕਾਨ ਰੱਖਣਾ, ਕਾਰਡ ਨੂੰ gesture handler ਨਾਲ ਵ੍ਰੈਪ ਕਰਨਾ, ਜਾਂ ਇਕ ਕਸਟਮ ਡ੍ਰੌਪਡਾਊਨ ਜੋੜਨਾ ਕੀਬੋਰਡ ਸਹਾਇਤਾ ਹਟਾ ਸਕਦਾ ਹੈ, ਫੋਕਸ ਆਰਡਰ ਟੁੱਟ ਸਕਦਾ ਹੈ, ਜਾਂ ਕੋਈ ਲੇਬਲ ਗੁੰਮ ਹੋ ਸਕਦੀ ਹੈ ਬਿਨਾਂ ਕਿਸੇ ਨੂੰ ਨਜ਼ਰ ਆਏ।

ਇੱਕ ਆਮ ਸਿਨਾਰਿਓ: ਇੱਕ React ਫਾਰਮ ਵਿੱਚ ਇਕ ਨਵੀਂ “ਕਲੀਅਰ” ਆਈਕਾਨ ਇਨਪੁੱਟ ਦੇ ਅੰਦਰ ਆ ਜਾਂਦੀ ਹੈ। ਇਹ ਲਾਭਦਾਇਕ ਲੱਗਦੀ ਹੈ, ਪਰ ਆਈਕਾਨ ਫੋਕਸਯੋਗ ਨਹੀਂ ਹੁੰਦਾ, ਕੋਈ ਨਾਮ ਨਹੀਂ ਹੁੰਦਾ, ਅਤੇ ਕਲਿੱਕ ਘਟਨਾਵਾਂ ਚੁੱਕ ਲੈਂਦਾ ਹੈ। ਹੁਣ ਕੀਬੋਰਡ ਉਪਭੋਗਤਾ ਇਸਨੂੰ ਐਕਟੀਵੇਟ ਨਹੀਂ ਕਰ ਸਕਦੇ, ਅਤੇ ਸਕ੍ਰੀਨ ਰੀਡਰ ਉਪਭੋਗਤਾ ਇੱਕ ਬੇਲਾਬਲ ਕੰਟਰੋਲ ਸੁਣਦੇ ਹਨ।

ਇਹ ਪੋਸਟ ਤੁਹਾਨੂੰ ਦੋ ਚੀਜ਼ਾਂ ਦੇਵੇਗਾ: ਕਾਪੀ ਕਰਨ ਯੋਗ ਪ੍ਰਾਂਪਟ ਜੋ ਤੁਸੀਂ ਆਪਣੀ UI ਕੋਡ (React ਅਤੇ Flutter) ਨਾਲ ਵਰਤ ਸਕਦੇ ਹੋ, ਅਤੇ ਇੱਕ ਦੁਹਰਾਏ ਜਾਣ ਯੋਗ ਸਮੀਖਿਆ ਫਲੋ ਜੋ ਤੁਸੀਂ ਮਿੰਟਾਂ ਵਿੱਚ ਚਲਾਉ ਸਕਦੇ ਹੋ। ਮਕਸਦ ਪਹਿਲੇ ਦਿਨ ਤੇ ਪਰਫੈਕਸ਼ਨ ਨਹੀਂ, ਬਲਕਿ ਉਹ ਮੁੱਦੇ ਫੜਨਾ ਹੈ ਜੋ ਹਕੀਕਤੀ ਉਪਭੋਗਤਿਆਂ ਨੂੰ ਬਲਾਕ ਕਰਦੇ ਹਨ।

ਜੇਕਰ ਤੁਸੀਂ ਪ੍ਰੋਡਕਟ ਸਕ੍ਰੀਨ ਬਣਾਉਂਦੇ ਹੋ ਪਰ ਐਕਸੈਸਬਿਲਿਟੀ ਮਾਹਰ ਨਹੀਂ ਹੋ, ਤਾਂ ਇਹ ਤੁਹਾਡੇ ਲਈ ਹੈ। ਇਹ ਉਨ੍ਹਾਂ ਟੀਮਾਂ ਲਈ ਵੀ ਫਿੱਟ ਹੁੰਦਾ ਹੈ ਜੋ vibe-coding ਟੂਲ ਜਿਵੇਂ Koder.ai ਵਰਤਦੀਆਂ ਹਨ, ਜਿੱਥੇ UI ਬਦਲਾਅ ਤੇਜ਼ੀ ਨਾਲ ਹੁੰਦੇ ਹਨ ਅਤੇ ਤੁਹਾਨੂੰ ਤੇਜ਼, ਸਥਿਰ ਚੈੱਕਾਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਜੇ ਤੁਸੀਂ ਇੱਕ ਪ੍ਰਯੋਗਿਕ ਸ਼ੁਰੂਆਤ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਹ React ਅਤੇ Flutter UI ਸਮੀਖਿਆ ਲਈ ਪਹੁੰਚਯੋਗਤਾ ਪ੍ਰਾਂਪਟ ਹਰ ਵਾਰੀ ਜਦੋਂ ਤੁਸੀਂ UI ਜਾਰੀ ਕਰੋ ਦੁਹਰਾਏ ਜਾਣ ਲਈ ਬਣਾਏ ਗਏ ਹਨ।

ਉਹ 5 ਚੈੱਕ ਜੋ ਜ਼ਿਆਦਾਤਰ ਮੁੱਦੀਆਂ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਫੜ ਲੈਂਦੇ ਹਨ

ਜੇ ਤੁਹਾਡੇ ਕੋਲ ਕਿਸੇ ਸਕ੍ਰੀਨ ਦੀ ਸਮੀਖਿਆ ਲਈ ਸਿਰਫ 15 ਮਿੰਟ ਹਨ, ਇਹ ਚੈੱਕ ਉਹ ਮੁੱਦੇ ਲੱਭ ਲੈਂਦੇ ਹਨ ਜੋ ਸਭ ਤੋਂ ਜ਼ਿਆਦਾ ਲੋਕਾਂ ਨੂੰ ਰੋਕਦੇ ਹਨ। ਇਹ React ਅਤੇ Flutter ਦੋਵਾਂ ਲਈ ਕੰਮ ਕਰਦੇ ਹਨ।

1) ਕੀ ਤੁਸੀਂ ਸਿਰਫ ਕੀਬੋਰਡ ਨਾਲ ਇਸਨੂੰ ਵਰਤ ਸਕਦੇ ਹੋ?

ਪੇਜ਼ ਤੇ ਮੁਸਾ ਨਾ ਵਰਤ ਕੇ ਅੱਗੇ ਵਧ ਕੇ ਕੋਸ਼ਿਸ਼ ਕਰੋ। Tab ਅਤੇ Shift+Tab ਨਾਲ ਹਿੱਲੋ, Enter ਅਤੇ Space ਨਾਲ ਐਕਟੀਵੇਟ ਕਰੋ, ਅਤੇ ਜਿੱਥੇ ਵਿਜੇਟ ਮੀਨੂੰ, ਟੈਬ, ਜਾਂ ਲਿਸਟ ਵਾਂਗ ਲੱਗੇ ਉਥੇ ਐਰੋ ਕੀਜ਼ ਵਰਤੋ।

ਇੱਕ ਤੇਜ਼ ਇਸ਼ਾਰਾ: ਜੇ ਤੁਸੀਂ ਮੋਡਲ ਵਿੱਚ ਫਸ ਜਾਂਦੇ ਹੋ, ਜਾਂ ਕਿਸੇ ਮੁੱਖ ਕੰਟਰੋਲ (ਜਿਵੇਂ “Close”) ਤੱਕ ਪਹੁੰਚ ਨਹੀਂ ਹੁੰਦੀ, ਤਾਂ ਕੁਝ ਗਲਤ ਹੈ।

2) ਕੀ ਫੋਕਸ ਆਰਡਰ ਸੂਝਵਾਨ ਹੈ ਅਤੇ ਫੋਕਸ ਦਿੱਖਦਾ ਹੈ?

ਜਿਵੇਂ ਜਿਵੇਂ ਤੁਸੀਂ ਟੈਬ ਕਰੋ, ਫੋਕਸ ਨੂੰ ਵਿਜ਼ੂਅਲ ਲੇਆਉਟ (ਉੱਪਰ-ਨੀਂਵੇਂ, ਖੱਬੇ ਤੋਂ ਸੱਜੇ) ਦੇ ਅਨੁਸਾਰ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਵਿਚੁਕਣਾ ਖੇਤਰਾਂ ਤੇ ਨਹੀਂ ਜਾਣਾ ਚਾਹੀਦਾ। ਫੋਕਸ ਸਾਫ਼-ਸੁਥਰਾ ਹੋਣਾ ਵੀ ਜ਼ਰੂਰੀ ਹੈ। ਜੇ ਡਿਜ਼ਾਈਨ ਵਿੱਚ ਸੰਕੁਚਿਤ ਆਊਟਲਾਈਨ ਹਨ, ਤਾਂ ਪੱਕਾ ਕਰੋ ਕਿ ਉਹ ਲਾਈਟ ਅਤੇ ਡਾਰਕ ਬੈਕਗਰਾਉਂਡ 'ਤੇ ਵੀ ਦਿੱਖਦੇ ਹਨ।

3) ਕੀ ਕੰਟਰੋਲਾਂ ਦੇ ਸਪਸ਼ਟ ਨਾਮ ਹਨ?

ਹਰ ਇੰਟਰੈਕਟਿਵ ਐਲਮੈਂਟ ਲਈ ਸਕ੍ਰੀਨ ਰੀਡਰ ਇੱਕ ਉਪਯੋਗੀ ਨਾਮ ਐਲਾਨ ਕਰੇ। “Button” ਕਾਫ਼ੀ ਨਹੀਂ। ਆਈਕਾਨਾਂ ਨੂੰ ਇੱਕ ਐਕਸੈਸਬਿਲਿਟੇ ਲੇਬਲ ਚਾਹੀਦਾ ਹੈ, ਅਤੇ ਫਾਰਮ ਫੀਲਡਸ ਨੂੰ ਇੱਕ ਲੇਬਲ ਚਾਹੀਦਾ ਹੈ ਜੋ ਪਲੇਸਹੋਲਡਰ ਮਿਟ ਜਾਣ 'ਤੇ ਵੀ ਜੁੜਿਆ ਰਹੇ।

4) ਕੀ ਕਾਂਟਰਾਸਟ ਅਤੇ ਟੈਕਸਟ ਆਕਾਰ ਠੀਕ ਹਨ?

ਛੋਟੇ ਟੈਕਸਟ, ਡਿਸੇਬਲਡ ਟੈਕਸਟ, ਅਤੇ ਰੰਗੀ ਬਟਨਾਂ 'ਤੇ ਟੈਕਸਟ ਚੈੱਕ ਕਰੋ। ਜ਼ੂਮ ਵੀ ਟੈਸਟ ਕਰੋ: ਫੋਂਟ ਆਕਾਰ ਵਧਾਓ ਅਤੇ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਲੇਆਉਟ ਓਵਰਲੈਪ ਜਾਂ ਮੁੱਖ ਸਮੱਗਰੀ ਕੱਟ ਨਹੀਂ ਹੋ ਰਹੀ।

5) ਕੀ ਬਦਲਾਅ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਐਲਾਨ ਕੀਤੇ ਜਾਂਦੇ ਹਨ?

ਜਦੋਂ ਕੁਝ ਬਦਲਦਾ ਹੈ (ਏਰਰ, ਲੋਡਿੰਗ, ਸਫਲਤਾ), ਉਪਭੋਗਤਿਆਂ ਨੂੰ ਅਨੁਮਾਨ ਲਗਾਉਣਾ ਨਹੀਂ ਚਾਹੀਦਾ। ਫੀਲਡ ਦੇ ਨੇੜੇ inline error text ਵਰਤੋਂ, ਫਾਰਮ ਏਰਰ ਐਲਾਨ ਕਰੋ, ਅਤੇ ਲੋਡਿੰਗ ਸਟੇਟਸ ਸਪਸ਼ਟ ਬਣਾਓ।

ਜੇ ਤੁਸੀਂ Koder.ai ਵਿੱਚ ਸਕ੍ਰੀਨ ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ ਇਹ ਪੁੱਛੋ: “ਇਸ ਪੇਜ਼ ਲਈ ਕੀਬੋਰਡ-ਓਨਲੀ ਫਲੋ, ਫੋਕਸ ਆਰਡਰ, ਅਤੇ ਸਕ੍ਰੀਨ ਰੀਡਰ ਲੇਬਲ ਦੀ ਪੁਸ਼ਟੀ ਕਰੋ,” ਫਿਰ ਉਪਰ ਦਿੱਤੇ ਕਦਮਾਂ ਨਾਲ ਨਤੀਜੇ ਦੀ ਸਮੀਖਿਆ ਕਰੋ।

UI ਬਦਲਾਅ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਆਪਣੀ ਸਮੀਖਿਆ ਦਾ ਦਾਇਰਾ ਸੈੱਟ ਕਰੋ

ਜਦੋਂ ਤੁਸੀਂ ਕੋਈ ਕੰਪੋਨੈਂਟ ਛੇੜਦੇ ਹੋ ਤਾਂ ਪਹਿਲਾਂ ਇਹ ਨਿਰਧਾਰਿਤ ਕਰਨ ਨਾਲ ਐਕਸੈਸਬਿਲਿਟੀ ਕੰਮ ਤੇਜ਼ੀ ਨਾਲ ਹੁੰਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਕੀ ਸਮੀਖਿਆ ਕਰ ਰਹੇ ਹੋ ਅਤੇ “ਕਾਫ਼ੀ ਚੰਗਾ” ਦਾ ਕੀ ਮਤਲਬ ਹੈ। ਇੱਕ ਤੰਗ ਸਕੋਪ ਵੀ accessibility prompts for React and Flutter UI reviews ਨੂੰ ਹੋਰ ਉਪਯੋਗੀ ਬਣਾਉਂਦਾ ਹੈ, ਕਿਉਂਕਿ ਮਾਡਲ ਅਸਲ ਸਕ੍ਰੀਨਾਂ ਅਤੇ ਅਸਲ ਇੰਟਰੈਕਸ਼ਨਾਂ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰ ਸਕਦੀ ਹੈ।

ਉਹ ਯਾਤਰਾਵਾਂ ਚੁਣੋ ਜੋ ਮਾਇਨੇ ਰੱਖਦੀਆਂ ਹਨ

ਪੂਰੇ ਪ੍ਰੋਡਕਟ ਦੀ ਬਜਾਏ 2 ਤੋਂ 4 ਅਹੰਕਾਰਪੂਰਣ ਯਾਤਰਾਵਾਂ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ। ਵਧੀਆ ਚੋਣ ਉਹ ਹਨ ਜੋ ਲੋਕਾਂ ਲਈ ਮੁੱਲ ਪੂਰਾ ਕਰਨ ਲਈ ਲਾਜ਼ਮੀ ਹਨ, ਅਤੇ ਜਿਹੜੀਆਂ ਫੇਲ ਹੋਣ ਤੇ ਉਪਭੋਗਤਿਆਂ ਨੂੰ ਬਾਹਰ ਰੱਖ ਸਕਦੀਆਂ ਹਨ।

ਅਕਸਰ ਐਪਸ ਲਈ, ਇਹ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਹੁੰਦਾ ਹੈ: ਲੌਗਿਨ, ਇੱਕ ਪ੍ਰਾਇਮਰੀ “ਬਣਾਓ ਜਾਂ ਖਰੀਦੋ” ਫਲੋ (ਚੈਕਆਉਟ, ਬੁਕਿੰਗ, ਸਬਮਿਟ), ਅਤੇ ਇੱਕ ਇੱਕाउंट ਹਿੱਸਾ ਜਿਵੇਂ ਸੈਟਿੰਗਸ ਜਾਂ ਪ੍ਰੋਫਾਈਲ।

ਫਿਰ ਹਰ ਯਾਤਰਾ ਵਿੱਚ ਮੌਜੂਦ ਨਿਰਧਾਰਤ ਸਕ੍ਰੀਨਾਂ ਨੂੰ ਲਿਖੋ (ਭਾਵੇਂ ਸਿਰਫ 5 ਤੋਂ 8 ਸਕ੍ਰੀਨ)। “درمیانی” ਸਟੇਟਸ ਵੀ ਸ਼ਾਮਲ ਕਰੋ: ਏਰਰ ਸੁਨੇਹੇ, ਖਾਲੀ ਸਟੇਟਸ, ਲੋਡਿੰਗ ਸਟੇਟਸ, ਅਤੇ ਪੁਸ਼ਟੀ ਡਾਇਲੌਗ। ਇਹ ਹਨ ਜਿੱਥੇ ਫੋਕਸ ਅਤੇ ਸਕ੍ਰੀਨ ਰੀਡਰ ਆਉਟਪੁੱਟ ਅਕਸਰ ਟੁੱਟਦੇ ਹਨ।

ਇੱਕ ਮਿਸਾਲ: ਜੇ ਤੁਸੀਂ ਇੱਕ ਛੋਟੀ CRM ਸਕ੍ਰੀਨ Koder.ai ਵਿੱਚ ਬਣਾ ਰਹੇ ਹੋ, ਤਾਂ ਇਸਨੂੰ ਸਕੋਪ ਕਰੋ: “sign in -> open Contacts -> add contact -> save -> see success message.” ਇਹ ਇੱਕ ਹੀ ਫਲੋ ਫਾਰਮਸ, ਵੈਰੀਫਿਕੇਸ਼ਨ, ਡਾਇਲੌਗ ਅਤੇ ਐਲਾਨਾਂ ਨੂੰ ਛੁਹਦਾ ਹੈ।

“ਪਾਸ” ਦਾ ਮਤਲਬ ਕੀ ਹੈ, ਫੈਸਲਾ ਕਰੋ

ਇਹ ਪ੍ਰਾਇਕਟਿਕ ਰੱਖੋ। WCAG AA ਸ਼ੈਲੀ ਉਮੀਦਾਂ ਦੀ ਤਰ੍ਹਾਂ ਲਕਿਰੀ ਰੱਖੋ, ਪਰ ਉਹਨਾਂ ਨੂੰ ਸਧਾਰਨ ਚੈਕਾਂ ਵਿੱਚ ਤਬਦੀਲ ਕਰੋ ਜੋ ਤੁਸੀਂ ਫਾਸਟ ਲਾਗੂ ਕਰ ਸਕੋ: ਕੀਬੋਰਡ ਸPure end-to-end ਕੰਮ ਕਰਦਾ ਹੈ, ਫੋਕਸ ਦਿੱਖਦਾ ਅਤੇ ਲਾਜ਼ਮੀ ਹੈ, ਨਾਮ ਅਤੇ ਲੇਬਲ ਮੱਤਵਪੂਰਨ ਹਨ, ਅਤੇ ਕਾਂਟਰਾਸਟ ਪਾਠਯੋਗ ਹੈ।

ਸਾਦਾ ਪਾਸ/ਫੇਲ ਨੋਟ ਫਾਰਮੈਟ ਵਰਤੋ ਤਾਂ ਤੁਸੀਂ ਸਮਾਂ ਗੱਲਬਾਤ ਵਿੱਚ ਗੁਆ ਨਹੀਂ ਸਕੋ। ਹਰ ਸਕ੍ਰੀਨ ਲਈ ਇਹ ਬਨਾਓ:

• Check: (keyboard, focus order, labels, contrast, announcements)
• Result: Pass or Fail
• Evidence: ਇੱਕ ਵਾਕ੍ਯ ਜੋ ਵਰਣਨ ਕਰੇ ਕਿ ਕੀ ਹੋਇਆ
• Fix guess: ਕੀ ਬਦਲਣ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ (ਕੰਪੋਨੈਂਟ, prop, ਸ਼ੈਲਿੰਗ)
• Retest: ਫਿਕਸ ਦੇ ਬਾਅਦ ਕੀ ਜ਼ਰਾ ਟੈਸਟ ਕਰਨਾ ਹੈ

ਇਹ React ਅਤੇ Flutter ਦੋਵਾਂ ਵਿੱਚ ਸਮੀਖਿਆ ਨੂੰ ਇੱਕਸਾਰ ਰੱਖਦਾ ਹੈ, ਅਤੇ ਇਹ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਕਿਸੇ ਹੋਰ ਨੂੰ ਮੁੱਦੇ ਸੌਂਪਣ ਸਮੇਂ ਮੁੜ-ਵਿਆਖਿਆ ਨਾ ਕਰਨੀ ਪਵੇ।

React ਕੰਪੋਨੈਂਟਾਂ ਲਈ ਕਾਪੀ-ਕਰਨ ਯੋਗ ਪ੍ਰਾਂਪਟ (ਕੀਬੋਰਡ, ਲੇਬਲ, ਰੋਲ)

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

ਜੇ ਤੁਸੀਂ ਚੈਟ-ਆਧਾਰਿਤ ਬਿਲਡਰ ਜਿਵੇਂ Koder.ai ਵਰਤ ਰਹੇ ਹੋ, ਤਾਂ ਸਕ੍ਰੀਨ ਜਾਂ ਕੰਪੋਨੈਂਟ ਬਣਾਉਣ ਤੋਂ ਬਾਅਦ ਉਸ ਪ੍ਰਾਂਪਟ ਨੂੰ ਜੋੜੋ ਤਾਂ ਕਿ ਮੁੱਦੇ ਫੈਲਣ ਤੋਂ ਪਹਿਲਾਂ ਠੀਕ ਹੋ ਜਾਣ।

Review this React component for keyboard navigation issues. 
- Can every interactive element be reached with Tab and activated with Enter/Space?
- List the exact problems you see in the code.
- Propose fixes with small code edits.

Check focus order and focus visibility.
- Describe the expected focus order for a keyboard-only user.
- Point out where focus could get lost (modals, menus, drawers).
- Tell me exactly where to add :focus-visible styles (which elements, which CSS).

Find missing accessible names.
- Identify inputs, buttons, and icons without clear labels.
- Suggest label + htmlFor, aria-label, aria-labelledby, or visible text.
- If there is helper/error text, connect it with aria-describedby.

Identify interactive elements that are not buttons/links.
- Find div/span with onClick, custom dropdowns, and clickable cards.
- Suggest correct semantics (button/a) or add role, tabIndex, and keyboard handlers.

List screen reader announcements that will be confusing.
- Predict what a screen reader will announce for key controls.
- Rewrite UI text to be shorter and clearer.
- Suggest aria-live usage for status changes (loading, errors, saved).

ਪ੍ਰਾਂਪਟ ਭੇਜਣ ਤੋਂ ਪਹਿਲਾਂ ਇਹ ਵੇਰਵੇ ਸ਼ਾਮਲ ਕਰੋ ਤਾਂ ਕਿ ਤੁਹਾਨੂੰ ਜਨਰਲ ਸਲਾਹ ਨਹੀਂ, ਬਲਕਿ ਵਰਤੋਂਯੋਗ ਠੀਕ-ਥੀਕ ਫਿਕਸ ਮਿਲਣ:

• ਕੰਪੋਨੈਂਟ ਕੀ ਹੈ (ਉਦਾਹਰਨ: “login form”, “pricing toggle”, “settings modal”).
• ਉਪਭੋਗਤਾ ਦੀ ਕੀਬੋਰਡ ਪਾਥ (ਸ਼ੁਰੂ ਅਤੇ ਅੰਤ ਸਥਾਨ).
• ਕੋਈ UI ਲਾਇਬ੍ਰੇਰੀ ਵਰਤੀ ਜਾ ਰਹੀ ਹੈ (MUI, Chakra, Radix, custom components).
• ਟੈਸਟ ਕਰਨ ਲਈ ਸਟੇਟਸ (loading, error, disabled, empty results).
• ਇੱਕ ਨਿਰਧਾਰਤ ਉਪਭੋਗਤਾ ਲਕਸ਼ (ਉਦਾਹਰਨ: “change plan and confirm”).

Flutter ਵਿਕੇਟਸ ਲਈ ਕਾਪੀ-ਕਰਨ ਯੋਗ ਪ੍ਰਾਂਪਟ (Semantics, ਫੋਕਸ, ਜੈਸਚਰ)

ਜੇ ਤੁਸੀਂ ਲਗਾਤਾਰ ਨਤੀਜੇ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ widget snippet (ਜਾਂ ਪੂਰੀ ਸਕ੍ਰੀਨ) ਪੇਸਟ ਕਰੋ ਅਤੇ ਖ਼ਾਸ ਚੈਕ ਮੰਗੋ। ਇਹ ਪ੍ਰਾਂਪਟ ਸਭ ਤੋਂ ਵਧੀਆ ਕੰਮ ਕਰਦੇ ਹਨ ਜਦੋਂ ਤੁਸੀਂ widget tree, ਸਕ੍ਰੀਨ ਤੱਕ ਪਹੁੰਚਾਉਣ ਦਾ ਤਰੀਕਾ, ਅਤੇ ਕੋਈ ਕਸਟਮ ਜੈਸਚਰ ਸ਼ਾਮਲ ਕਰੋ।

ਪ੍ਰਾਂਪਟ ਜੋ ਤੁਸੀਂ ਸਮੀਖਿਆ ਵਿੱਚ ਪੇਸਟ ਕਰ ਸਕਦੇ ਹੋ

Review this Flutter widget tree for keyboard navigation and focus traversal.
Call out focus traps, missing focus order, and places where Tab/Shift+Tab will feel confusing.
Suggest exact widget changes (Focus, FocusTraversalGroup, Shortcuts, Actions).

Check this screen for missing Semantics labels, hints, and tap targets.
Point to the exact widgets that need Semantics(label/hint), tooltip, or exclusion.
Also flag controls under 48x48 logical pixels and suggest fixes.

Find custom gestures that break accessibility (GestureDetector/Listener).
Replace them with accessible widgets or add keyboard + semantics support.
If a gesture is required, describe how a keyboard user triggers the same action.

Audit error messages and validation on this form.
What should be announced to a screen reader, and when?
Suggest how to expose errors via Semantics and focus movement after submit.

Propose a consistent focus highlight style across screens.
It should be obvious on dark/light themes and work with keyboard navigation.
Show a small code example using FocusTheme/ThemeData.

ਤੇਜ਼ ਫਿਕਸ ਜੋ ਅਸਿਸਟੈਂਟ ਸੁਝਾਵੇ

ਉਮੀਦ ਕਰੋ ਕਿ ਉੱਤਰ ਕੁਝ ਸਪਸ਼ਟ ਪੈਟਰਨ ਦੀ ਗੱਲ ਕਰਨਗੇ:

• ਮੁੱਖ ਸਮੱਗਰੀ ਨੂੰ FocusTraversalGroup ਵਿੱਚ ਰੈਪ ਕਰੋ ਅਤੇ ਜ਼ਰੂਰਤ ਪੈਂਦੀ ਹੋਵੇ ਤਾਂ FocusTraversalOrder ਸੈੱਟ ਕਰੋ।
• ਸੰਯੁਕਤ ਕੰਟਰੋਲਾਂ ਲਈ Semantics (ਜਾਂ MergeSemantics) ਵਰਤੋਂ, ਅਤੇ ਡੁੱਪਲਿਕੇਟ ਲੇਬਲ ਤੋਂ ਬਚੋ।
• GestureDetector ਦੀ ਥਾਂ InkWell, IconButton, ListTile, SwitchListTile ਵਰਗੇ ਨੈਟਿਵ/ਐਕਸੈਸਬਲ ਵਿਜੈਟਸ ਵਰਤੋਂ।
• ਗੈਰ-ਟੈਕਸਟ ਇਨਪੁੱਟ ਲਈ Shortcuts + Actions ਜੋੜੋ (ਉਦਾਹਰਨ: ਐਕਟੀਵੇਟ ਕਰਨ ਲਈ Enter, ਬੰਦ ਕਰਨ ਲਈ Escape)।

ਇੱਕ ਘੱਟੋ-ਘੱਟ ਉਦਾਹਰਨ ਜਿਹੜੀ ਇਕ ਕਸਟਮ ਕਾਰਡ ਨੂੰ ਬਟਨ ਵਾਂਗ ਵਰਤਣਯੋਗ ਬਣਾਉਂਦੀ ਹੈ:

Semantics(
  button: true,
  label: 'Add payment method',
  hint: 'Opens the add card screen',
  child: Focus(
    child: InkWell(
      onTap: onPressed,
      child: Card(child: child),
    ),
  ),
)

ਕਦਮ-ਦਰ-ਕਦਮ: ਇੱਕ ਸਧਾਰਨ ਕੀਬੋਰਡ ਅਤੇ ਫੋਕਸ ਸਮੀਖਿਆ ਫਲੋ

ਇੱਕ ਤੇਜ਼ ਕੀਬੋਰਡ ਅਤੇ ਫੋਕਸ ਸਮੀਖਿਆ ਉਹ ਸਮੱਸਿਆਵਾਂ ਲੱਭ ਲੈਂਦੀ ਹੈ ਜੋ ਸਕ੍ਰੀਨ ਰੀਡਰ ਅਤੇ ਸਵਿੱਚ ਡਿਵਾਈਸਾਂ ਨੂੰ ਵੀ ਪ੍ਰਭਾਵਿਤ ਕਰਦੀਆਂ ਹਨ। ਇਸਨੂੰ ਇੱਕ ਅਸਲ ਪੇਜ਼ ਫਲੋ 'ਤੇ ਕਰੋ (ਇੱਕ ਸਿੰਗਲ ਬਟਨ ਨਹੀਂ), ਅਤੇ ਜਦੋਂ ਤੁਸੀਂ ਜਾਂਦੇ ਹੋ ਨੋਟ ਰੱਖੋ ਤਾਂ ਕਿ ਤੁਸੀਂ ਬਾਅਦ ਵਿੱਚ ਇਕੋ ਰਾਸਤਾ ਦੁਬਾਰਾ ਜਾਂਚ ਸਕੋ।

5-ਕਦਮੀ ਫਲੋ

ਇਕ “ਹੈਪੀ ਪਾਥ” ਚੁਣ ਕੇ ਸ਼ੁਰੂ ਕਰੋ ਜੋ ਉਪਭੋਗਤਾ ਲੈਂਦਾ: ਜਿਵੇਂ ਸਾਇਨ ਇਨ, ਸੈਟਿੰਗਸ ਸਕ੍ਰੀਨ ਖੋਲ੍ਹਨਾ, ਅਤੇ ਸੇਵ ਕਰਨਾ।

1. ਸਾਰੇ ਫਲੋ ਨੂੰ ਸਿਰਫ ਕੀਬੋਰਡ ਨਾਲ ਕਰੋ। ਮਾਊਸ ਰੱਖੋ। Tab ਅਤੇ Shift+Tab ਨਾਲ ਹਿੱਲੋ, Enter ਅਤੇ Space ਨਾਲ ਐਕਟੀਵੇਟ ਕਰੋ, ਅਤੇ ਜਿੱਥੇ ਲਾਜ਼ਮੀ ਹੋਏ ਐਰੋ ਕੀਜ਼ ਵਰਤੋ। ਜੇ ਕੁਝ ਵੀ ਕਲਿੱਕ ਜਾਂ ਸਵਾਈਪ ਦੀ ਲੋੜ ਰੱਖਦਾ ਹੋਵੇ ਤਾਂ ਨੋਟ ਕਰੋ।
2. ਸੁਨਿਸ਼ਚਿਤ ਕਰੋ ਕਿ ਫੋਕਸ ਹਮੇਸ਼ਾ ਸਪਸ਼ਟ ਹੈ। ਹਰ ਵਾਰੀ ਜਦੋਂ ਫੋਕਸ ਹਿਲਦਾ ਹੈ, ਤੁਹਾਨੂੰ ਤੁਰੰਤ ਪਤਾ ਲੱਗਣਾ ਚਾਹੀਦਾ ਹੈ ਕਿ ਇਹ ਕਿੱਥੇ ਹੈ। ਬਹੁਤ ਪਤਲੇ ਆਊਟਲਾਈਨ ਜਾਂ CSS ਵੱਲੋਂ ਖਤਮ ਕੀਤੇ ਗਏ ਰਿੰਗਾਂ ਲਈ ਦੇਖੋ, ਜਾਂ Flutter ਵਿਜੈਟਸ ਜੋ “ਐਕਟਿਵ” ਲੱਗਦੇ ਹਨ ਪਰ ਫੋਕਸ ਨਹੀਂ ਦਿਖਾਉਂਦੇ।
3. ਚੈੱਕ ਕਰੋ ਕਿ ਅਜਿਹੀ ਆਰਡਰ ਜੋ ਤੁਸੀਂ ਵੇਖਦੇ ਹੋ ਨਾਲ ਮਿਲਦੀ ਹੈ। ਫੋਕਸ ਨੂੰ ਵਿਜ਼ੂਅਲ ਲੇਆਉਟ ਅਤੇ ਰੀਡਿੰਗ ਆਰਡਰ ਦੇ ਅਨੁਸਾਰ ਮਨਾਇਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਆਮ ਸੰਕੇਤ: ਫੁੱਟਰ ਤੱਕ ਛਾਲ, sidebar ਵਿੱਚ ਫਸਣਾ, ਜਾਂ ਇੱਕ ਫੀਲਡ ਨੂੰ ਛੱਡ ਦੇਣਾ ਕਿਉਂਕਿ ਉਹ ਫੋਕਸਯੋਗ ਨਹੀਂ।
4. ਓਵਰਲੇਜ਼ ਨੂੰ ਸਟ੍ਰੈੱਸ-ਟੈਸਟ ਕਰੋ। ਮੀਨੂ, ਡਾਇਲੌਗ ਅਤੇ ਡ੍ਰੌਅਰ ਖੋਲ੍ਹੋ। ਫੋਕਸ ਨੂੰ ਓਵਰਲੇ ਵਿੱਚ ਚੱਲਣਾ ਚਾਹੀਦਾ ਹੈ, ਜਦ ਤੱਕ ਇਹ ਖੁੱਲ੍ਹਾ ਹੈ ਅੰਦਰ ਰਹਿਣਾ ਚਾਹੀਦਾ ਹੈ, ਅਤੇ ਬੰਦ ਹੋਣ 'ਤੇ ਇੱਕ ਸਮਝਦਾਰ ਸਥਾਨ ਤੇ ਵਾਪਸ ਆਉਣਾ ਚਾਹੀਦਾ ਹੈ। Escape ਨੂੰ ਜਿੱਥੇ ਯੋਗ ਹੋਵੇ ਓਵਰਲੇ ਬੰਦ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ।
5. ਹਰ ਬਦਲਾਅ ਤੋਂ ਬਾਅਦ ਮੁੜ-ਟੈਸਟ ਕਰੋ। ਇੱਕ ਮੁੱਦਾ ਠੀਕ ਕਰੋ, ਫਿਰ ਉਕਤ ਰਾਹ ਨੂੰ ਫਿਰ ਚਲਾਓ। ਜੋ ਸੁਧਾਰ ਹੋਇਆ ਅਤੇ ਜੋ ਖਰਾਬ ਹੋਇਆ ਉਸ ਨੂੰ ਨੋਟ ਕਰੋ, ਖ਼ਾਸ ਕਰਕੇ ਫੋਕਸ ਆਰਡਰ ਵਿੱਚ ਬਦਲਾਅ ਅਤੇ ਨਵੀਆਂ “ਮਰੇ ਹੋਏ ਅੰਤ” ਨੂੰ।

ਜਦੋਂ ਤੁਸੀਂ ਜਾਂਦੇ ਹੋ ਤਾਂ ਕੀ ਰਿਕਾਰਡ ਕਰਨਾ ਹੈ

ਇਸਨੂੰ ਸਧਾਰਨ ਰੱਖੋ: ਪੇਜ਼ ਦਾ ਨਾਮ, ਤੁਸੀਂ ਕੀ ਦਬਾਇਆ, ਕੀ ਹੋਇਆ, ਅਤੇ ਤੁਸੀਂ ਕੀ ਉਮੀਦ ਕੀਤੀ। ਇਹ ਛੋਟਾ ਲੋਗ React ਰੀਫੈਕਟਰ ਜਾਂ Flutter ਵਿਜੈਟ ਸਵੈਪ ਨੇ ਕੀਬੋਰਡ ਐਕਸੈਸ ਗੁਆ ਨਹੀਂ ਕੀਤਾ ਇਹ ਪੁਸ਼ਟੀ ਕਰਨ ਵਿੱਚ ਆਸਾਨੀ ਬਣਾਉਂਦਾ ਹੈ।

ਸਕ੍ਰੀਨ ਰੀਡਰ-ਫ੍ਰੈਂਡਲੀ ਨਾਮ, ਲੇਬਲ ਅਤੇ ਐਲਾਨ

ਸਕ੍ਰੀਨ ਰੀਡਰ ਤੁਹਾਡੀ UI ਨੂੰ “ਦੇਖ” ਨਹੀਂ ਸਕਦੇ। ਉਹ ਨਾਮ, ਭੂਮਿਕਾ, ਅਤੇ ਛੋਟੇ ਸੁਨੇਹਿਆਂ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ ਜੋ ਦੱਸਦੇ ਹਨ ਕਿ ਕੀ ਬਦਲਿਆ। ਜੇ ਨਾਮ ਗਾਇਬ ਜਾਂ ਅਸਪਸ਼ਟ ਹੈ, ਤਾਂ ਐਪ ਅਨੁਮਾਨ ਬਣ ਜਾਂਦੀ ਹੈ।

ਫਾਰਮ ਫੀਲਡਸ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ। ਹਰ ਇਨਪੁੱਟ ਨੂੰ ਇੱਕ ਅਸਲੀ ਲੇਬਲ ਚਾਹੀਦਾ ਹੈ ਜੋ ਫੀਲਡ ਭਰ ਜਾਣ 'ਤੇ ਵੀ ਸacha ਰਹੇ। ਪਲੇਸਹੋਲਡਰ ਹਿੰਟ ਹਨ, ਲੇਬਲ ਨਹੀਂ, ਅਤੇ ਜਦੋਂ ਉਪਭੋਗਤਾ ਟਾਈਪ ਕਰਦਾ ਹੈ ਤਾਂ ਆਮ ਤੌਰ ’ਤੇ ਗਾਇਬ ਹੋ ਜਾਂਦੇ ਹਨ।

ਆਈਕਾਨ-ਕੇਵਲ ਕਾਰਵਾਈਆਂ ਇਕ ਹੋਰ ਆਮ ਗਲਤੀ ਹਨ। ਇੱਕ ਟ੍ਰੈਸ਼ ਆਈਕਾਨ, ਇੱਕ ਪੈਂਸਿਲ, ਜਾਂ ਤਿੰਨ-ਡਾਟ ਮੀਨੂ ਨੂੰ ਇੱਕ ਮਾਇਨੇਦਾਰ ਨਾਮ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਜੋ ਨਤੀਜੇ ਨੂੰ ਦਰਸਾਵੇ, ਨਾ ਕਿ ਆਕਾਰ ਨੂੰ। “Delete project” “Button” ਜਾਂ “Trash” ਨਾਲੋਂ ਵਧੀਆ ਹੈ।

ਸਰੋਤ ਅਤੇ ਸੈਕਸ਼ਨ ਲੇਬਲ ਮਹੱਤਵਪੂਰਨ ਹਨ ਕਿਉਂਕਿ ਉਹ ਪੇਜ਼ ਦੇ ਆਉਟਲਾਈਨ ਬਣ ਜਾਂਦੇ ਹਨ। ਹੈਡਿੰਗਜ਼ ਨੂੰ ਸਰਚਨਾਤਮਕਤਾ ਪ੍ਰਗਟ ਕਰਨ ਲਈ ਵਰਤੋਂ, ਸਿਰਫ਼ ਸਟਾਇਲਿੰਗ ਲਈ ਨਹੀਂ। ਇੱਕ ਸਕ੍ਰੀਨ ਰੀਡਰ ਉਪਭੋਗਤਾ “Billing” ਜਾਂ “Team members” ਵਰਗੀਆਂ ਹੈਡਿੰਗਜ਼ 'ਤੇ ਕੂਦ ਕੇ ਲੱਭ ਸਕਦਾ ਹੈ, ਇਸਲਈ ਉਹ ਲੇਬਲ ਉਹੀ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ ਜੋ ਸੈਕਸ਼ਨ ਵਿੱਚ ਹਨ।

ਏਰਰ ਸੁਨੇਹੇ ਵਿਸ਼ੇਸ਼ ਅਤੇ ਕਾਰਗਰ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ। “Invalid input” ਕਾਫ਼ੀ ਨਹੀਂ। ਦੱਸੋ ਕਿ ਕੀ ਗਲਤ ਹੋਇਆ ਅਤੇ ਅਗਲਾ ਕਦਮ ਕੀ ਹੈ, ਜਿਵੇਂ “Password must be at least 12 characters” ਜਾਂ “Email address is missing the @ sign”。

ਕਾਪੀ-ਕਰਨ ਯੋਗ ਸਮੀਖਿਆ ਪ੍ਰਾਂਪਟ (React ਅਤੇ Flutter)

ਜਦੋਂ ਤੁਸੀਂ ਸਕ੍ਰੀਨ ਸਮੀਖਿਆ ਕਰ ਰਹੇ ਹੋ (ਜਾਂ ਜਦੋਂ ਤੁਸੀਂ Koder.ai ਵਰਗੇ ਟੂਲ ਨੂੰ अपडेट ਮੰਗਦੇ ਹੋ), ਇਹ ਪ੍ਰਾਂਪਟ ਵਰਤੋਂ:

• “ਇਸ ਸਕ੍ਰੀਨ ਨੂੰ ਦੇਖੋ ਅਤੇ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਹਰ ਟੈਕਸਟ ਇਨਪੁੱਟ ਦਾ ਇੱਕ ਦੁਰੁਸਤ ਲੇਬਲ ਹੈ, ਅਤੇ ਐਕਸੇਸਬਿਲਿਟੀ ਨਾਮ ਨਾਲ ਮਿਲਦਾ ਹੈ (React: label + htmlFor, aria-labelledby; Flutter: InputDecoration.labelText).”
• “ਆਈਕਾਨ-ਕੇਵਲ ਬਟਨਾਂ ਨੂੰ ਲੱਭੋ ਅਤੇ ਹਰ ਇੱਕ ਨੂੰ ਐਕਸੈਸਬਿਲਿਟੀ ਨਾਮ ਦਿਓ ਜੋ ਕਾਰਵਾਈ ਨੂੰ ਵੱਖਰੇ ਤੌਰ ਤੇ ਵੇਖਾਏ (React: aria-label; Flutter: Tooltip ਜਾਂ Semantics(label: ...)).”
• “ਹੈਡਿੰਗਜ਼ ਚੈੱਕ ਕਰੋ: React ਵਿੱਚ ਠੀਕ ਹੈਡਿੰਗ ਸਤਰਾਂ ਵਰਤੋਂ, ਅਤੇ Flutter ਵਿੱਚ ਸਾਫ਼ ਸੈਕਸ਼ਨ ਸਿਰਲੇਖ ਤਾਂ ਜੋ ਸੰਰਚਨਾ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਪੜ੍ਹੀ ਜਾਵੇ।”
• “ਵੈਰੀਫਾਈ ਕਰੋ ਕਿ ਵੈਧਤਾ ਏਰਰਾਂ ਨੂੰ ਦੁਬਾਰਾ ਲਿਖੋ ਤਾਂ ਉਹ ਦੱਸਣ ਕਿ ਕੀ ਹੋਇਆ ਅਤੇ ਕਿਵੇਂ ਠੀਕ ਕੀਤਾ ਜਾਵੇ, ਅਤੇ ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਏਰਰ ਤੁਹਾਡੇ ਦਿਖਾਏ ਜਾਣ ਤੇ ਐਲਾਨ ਹੁੰਦਾ ਹੈ।”

ਡਾਇਨਾਮਿਕ ਅਪਡੇਟਾਂ ਲਈ ਐਲਾਨ

ਬਹੁਤ ਸਾਰੀਆਂ ਸਕ੍ਰੀਨਾਂ ਪੇਜ਼ ਰੀਲੋਡ ਬਿਨਾ ਬਦਲਦੀਆਂ ਹਨ: ਪ੍ਰੋਫਾਈਲ ਸੇਵ ਕਰਨਾ, ਆਈਟਮ ਜੋੜਣਾ, ਨਤੀਜੇ ਲੋਡ ਹੋਣਾ। ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਉਹ ਅਪਡੇਟਾਂ ਐਲਾਨ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ।

React ਲਈ, aria-live ਖੇਤਰ ਵਰਤੋਂ (polite “Saved” ਲਈ, assertive ਸੰਕਟਮਈ ਏਰਰ ਲਈ)। Flutter ਲਈ, Semantics ਵਰਤੋਂ ਅਤੇ ਸਥਿਤੀ ਸੁਨੇਹੇ ਵਿਜ਼ੂਅਲ ਬਣਾਓ (ਉਦਾਹਰਨ: ਬੈਨਰ ਜਾਂ SnackBar) ਤਾਂ ਕਿ ਉਹ ਪੜ੍ਹੇ ਜਾਣ। ਇੱਕ ਤੇਜ਼ ਚੈੱਕ: “Save” ਟ੍ਰਿਗਰ ਕਰੋ, ਅਤੇ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਇੱਕ ਛੋਟਾ ਸੁਨੇਹਾ ਸੁਣਦੇ ਹੋ ਜਿਵੇਂ “Changes saved” ਬਿਨਾਂ ਫੋਕਸ ਨੂੰ ਬਦਲਿਆ।

ਕਾਂਟਰਾਸਟ ਅਤੇ ਵਿਜੂਅਲ ਸਪਸ਼ਟਤਾ ਚੈੱਕ ਜੋ ਜ਼ਿਆਦਾ ਸਮਾਂ ਨਹੀਂ ਲੈਂਦੇ

ਜੇ ਤੁਸੀਂ ਉਹ ਥਾਵਾਂ 'ਤੇ ਧਿਆਨ ਦਿਓ ਜਿੱਥੇ ਲੋਕ ਸਭ ਤੋਂ ਜ਼ਿਆਦਾ ਮੁਸ਼ਕਲ ਮਹਿਸੂਸ ਕਰਦੇ ਹਨ — ਛੋਟਾ ਟੈਕਸਟ, ਆਈਕਾਨ, ਫੋਕਸ ਰਿੰਗ, ਅਤੇ ਸਥਿਤੀ ਰੰਗ — ਤਾਂ ਤੁਸੀਂ ਕੁਝ ਮਿੰਟਾਂ ਵਿੱਚ ਜ਼ਿਆਦਾਤਰ ਕਾਂਟਰਾਸਟ ਸਮੱਸਿਆਵਾਂ ਫੜ ਸਕਦੇ ਹੋ। ਇਹ React ਅਤੇ Flutter UI ਸਮੀਖਿਆ ਲਈ ਪ੍ਰਾਇਕਟਿਕ ਹਿੱਸਾ ਹੈ ਕਿਉਂਕਿ ਇਹ ਸੌਖਾ ਜਾਂਚਣ ਅਤੇ ਠੀਕ ਕਰਨ ਵਾਲਾ ਹੈ।

10-ਮਿੰਟ ਦਾ ਕਾਂਟਰਾਸਟ ਪਾਸ

ਇੱਕ ਸਕ੍ਰੀਨ ਨੂੰ 100% ਜ਼ੂਮ 'ਤੇ ਅਤੇ ਫਿਰ 200% 'ਤੇ ਸਕੈਨ ਕਰੋ। ਜੇ ਕੁਝ ਪੜ੍ਹਨ ਵਿੱਚ ਮੁਸ਼ਕਲ ਹੋ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਅਕਸਰ ਇਹ ਕਾਂਟਰਾਸਟ, ਵਜ਼ਨ, ਜਾਂ ਸਪੇਸਿੰਗ ਜਿਹਾ ਹੁੰਦਾ ਹੈ, ਨਾ ਕਿ “ਉਪਭੋਗਤਾ ਦੀ ਗਲਤੀ”।

ਪਹਿਲਾਂ ਇਹ ਪੰਜ ਥਾਵਾਂ ਚੈੱਕ ਕਰੋ:

• ਬਾਡੀ ਟੈਕਸਟ, ਕੈਪਸ਼ਨ ਅਤੇ ਸਹਾਇਕ ਟੈਕਸਟ (ਖ਼ਾਸ ਕਰਕੇ ਸਫੈਦ ਤੇ ਹਲਕੇ ਸਲੇਟੀ)
• ਡਿਸੇਬਲਡ ਸਟੇਟਸ (ਡਿਸੇਬਲਡ ਦਿਖਾਈ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ, ਪਰ ਫਿਰ ਵੀ ਪਾਠਯੋਗ)
• ਲੇਬਲ ਰਹਿਤ ਆਈਕਾਨ (ਫੈੱਟ ਆਈਕਾਨ ਕਈ ਉਪਭੋਗਤਿਆਂ ਲਈ ਲਗਭਗ ਅਦ੍ਰਸ਼ਯ ਹੈ)
• ਫੋਕਸ ਇੰਡਿਕੇਟਰ (ਰਿੰਗ/ਆਊਟਲਾਈਨ ਬੈਕਗਰਾਉਂਡ ਤੋਂ ਵੱਖਰਾ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ)
• ਏਰਰ ਅਤੇ ਸਫਲਤਾ ਸੁਨੇਹੇ (ਟੈਕਸਟ ਅਤੇ ਆਈਕਾਨ, ਸਿਰਫ਼ ਰੰਗ ਨਹੀਂ)

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

ਫੋਕਸ ਦਿੱਖ ਅਕਸਰ ਛੱਡ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ। ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਫੋਕਸ ਆਊਟਲਾਈਨ ਕਾਫ਼ੀ ਗੋਢੀ ਹੈ ਅਤੇ ਬੈਕਗਰਾਉਂਡ ਦੇ ਬਰਾਬਰ ਨਹੀਂ ਹੈ। ਜੇ ਤੁਹਾਡੇ ਕੋਲ ਲਿਸਟ ਵਿੱਚ “ਚੁਣਿਆ” ਸਟੇਟ ਹੈ, ਤਾਂ ਇਹ ਗ੍ਰੇਸਕੇਲ ਵਿੱਚ ਵੀ ਵੱਖਰਾ ਦਿਖਾਈ ਦੇਵੇ, ਉਦਾਹਰਨ ਲਈ ਇੱਕ ਆਈਕਾਨ, ਅੰਡਰਲਾਈਨ, ਜਾਂ ਇੱਕ ਸਾਫ਼ ਬਾਰਡਰ ਸ਼ਾਮਲ ਕਰਕੇ।

ਮੋਬਾਈਲ ਸਪਸ਼ਟਤਾ: ਟਾਰਗੇਟ ਅਤੇ ਥੀਮ

ਮੋਬਾਈਲ 'ਤੇ ਵਿਜ਼ੂਅਲ ਸਪਸ਼ਟਤਾ ਛੂਹਣ ਲਈ ਵੀ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਬਟਨਾਂ ਅਤੇ ਆਈਕਾਨ-ਕੇਵਲ ਕਾਰਵਾਈਆਂ ਲਈ ਵਿਅਾਪਕ ਟੈਪ ਟਾਰਗੇਟ ਅਤੇ ਖਾਲੀ ਥਾਂ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ ਤਾਂ ਜੋ ਉਪਭੋਗਤਾ ਗਲਤ ਕੰਟਰੋਲ ਤੇ ਨਾ ਛੂਹੇ।

ਇੱਕ ਤੇਜ਼ ਥੀਮ ਸਕੈਨ ਕਰੋ: ਡਾਰਕ ਮੋਡ ਟੌਗਲ ਕਰੋ, ਅਤੇ ਜੇ ਤੁਹਾਡੀ ਐਪ ਇਸਨੂੰ ਸਪੋਰਟ ਕਰਦੀ ਹੈ ਤਾਂ ਹਾਈ-ਕਾਂਟਰਾਸਟ ਸੈਟਿੰਗਜ਼ ਵੀ ਜਾਂਚੋ। ਸਤਹਾਂ, ਡਿਵਾਈਡਰ ਅਤੇ ਫੋਕਸ ਰਿੰਗ 'ਤੇ ਟੈਕਸਟ ਦੁਬਾਰਾ ਚੈੱਕ ਕਰੋ। ਆਮ ਬੱਗ: ਡਾਰਕ ਮੋਡ ਵਿੱਚ ਫੋਕਸ ਰਿੰਗ ਗਾਇਬ ਹੋ ਜਾਂਦੀ ਹੈ ਜਾਂ “ਇਨਏਕਟਿਵ” ਆਈਕਾਨ ਪਿਛੋਕੜ ਦੇ ਬਰਾਬਰ ਰੰਗ ਦਾ ਹੋ ਜਾਂਦਾ ਹੈ।

ਜੇ ਤੁਸੀਂ Koder.ai ਵਰਗੇ ਟੂਲ ਵਿੱਚ ਤੇਜ਼ੀ ਨਾਲ UI ਜਨਰੇਟ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਇੱਕ ਅਤਿਰਿਕਤ ਸਮੀਖਿਆ ਕਦਮ ਸ਼ਾਮਲ ਕਰੋ: ਪਹਿਲੇ ਲੇਆਉਟ ਤੋਂ ਬਾਅਦ “ਕਾਂਟਰਾਸਟ ਅਤੇ ਫੋਕਸ ਰਿੰਗ ਪਾਸ” ਮੰਗੋ, ਵਿਜ਼ੂਅਲ ਪੋਲਿਸ਼ ਤੋਂ ਪਹਿਲਾਂ।

ਵਾਪਸ-ਵਾਰੰਟ ਮੁੱਦੇ ਜੋ ਮੁੜ-ਮੁੜ ਆਉਂਦੇ ਰਹਿੰਦੇ ਹਨ

ਅਧਿਕਤਰ ਐਕਸੈਸਬਿਲਿਟੀ ਬੱਗ ਇਸ ਲਈ ਦੁਹਰਾਏ ਜਾਂਦੇ ਹਨ ਕਿਉਂਕਿ ਉਹ ਛੋਟੇ UI ਸੋਧ ਵਾਂਗ ਮਹਿਸੂਸ ਹੁੰਦੇ ਹਨ, ਨ ਕਿ ਪ੍ਰੋਡਕਟ ਵਿਹਾਰ ਵਾਂਗ। ਜਦੋਂ ਤੁਸੀਂ React ਅਤੇ Flutter UI ਸਮੀਖਿਆ ਲਈ ਪ੍ਰਾਂਪਟ ਚਲਾਉਂਦੇ ਹੋ, ਤਾਂ ਇਹ ਨਮੂਨੇ ਪਹਿਲਾਂ ਵੇਖੋ।

ਪਲੇਸਹੋਲਡਰ ਟੈਕਸਟ ਲੇਬਲ ਨਹੀਂ ਹੁੰਦਾ। ਪਲੇਸਹੋਲਡਰ ਜਿਵੇਂ ਹੀ ਉਪਭੋਗਤਾ ਟਾਈਪ ਕਰਦਾ ਹੈ ਗਾਇਬ ਹੋ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਕਈ ਸਕ੍ਰੀਨ ਰੀਡਰ ਇਸਨੂੰ ਫੀਲਡ ਨਾਮ ਵਜੋਂ ਨਹੀਂ ਮੰਨਦੇ। ਹਕੀਕਤੀ ਦਿਖਾਈ ਦੇਣ ਵਾਲਾ ਲੇਬਲ (ਜਾਂ ਵਿਸ਼ੇਸ਼ ਐਕਸੈਸਬਿਲਟੀ ਨਾਮ) ਵਰਤੋਂ ਤਾਂ ਕਿ ਇਨਪੁੱਟ ਖਾਲੀ, ਭਰਿਆ ਹੋਇਆ, ਜਾਂ ਏਰਰ ਦਿਖਾਉਂਦੇ ਸਮੇਂ ਸਮਝ ਆਵੇ।

ਫੋਕਸ ਸ਼ੈਲੀਆਂ ਹਟਾਈਆਂ ਜਾਂਦੀਆਂ ਹਨ ਕਿਉਂਕਿ ਉਹ “ਰੁਪ ਵਿੱਚ ਖ਼ਰਾਬ” ਲੱਗਦੀਆਂ ਹਨ। ਇਹ ਆਮ ਤੌਰ 'ਤੇ ਕੀਬੋਰਡ ਉਪਭੋਗਤਿਆਂ ਨੂੰ ਭੁੱਲਾ ਦੇਂਦਾ ਹੈ। ਜੇ ਤੁਸੀਂ ਡਿਫੌਲਟ ਆਊਟਲਾਈਨ ਬਦਲਦੇ ਹੋ, ਤਾਂ ਕੁਝ ਉਤਨਾ ਹੀ ਸਪਸ਼ਟ ਰੱਖੋ: ਇੱਕ ਮਜ਼ਬੂਤ ਰਿੰਗ, ਬੈਕਗਰਾਉਂਡ ਬਦਲਾਅ, ਅਤੇ ਪੇਜ਼ ਨਾਲ ਕਾਂਟਰਾਸਟ।

ਹੋਰ ਇੱਕ ਦੁਹਰਾਉਂਣ ਵਾਲਾ ਮੁੱਦਾ ਫਕੇ ਬਟਨ ਹਨ। React ਵਿੱਚ div ਨਾਲ onClick ਵਰਤਣਾ ਆਸਾਨ ਲੱਗਦਾ ਹੈ, ਅਤੇ Flutter ਵਿੱਚ Container ਨਾਲ GestureDetector। ਬਿਨਾਂ ਠੀਕ semantics ਦੇ, ਕੀਬੋਰਡ ਸਹਾਇਤਾ ਅਤੇ ਸਕ੍ਰੀਨ ਰੀਡਰ ਖ਼ਰਾਬ ਹੁੰਦੇ ਹਨ। ਨੈਟਿਵ ਕੰਟਰੋਲ (button, a, TextButton, ElevatedButton) ਤੁਹਾਨੂੰ ਫੋਕਸ, ਰੋਲ, ਡਿਸੇਬਲਡ ਸਟੇਟ, ਅਤੇ ਐਕਟੀਵੇਸ਼ਨ ਵਿਹਾਰ ਮੁਫ਼ਤ ਵਿੱਚ ਦਿੰਦੇ ਹਨ।

ਡਾਇਲੌਗ ਅਤੇ ਫਾਰਮ ਫੋਕਸ ਬੱਗ ਸੁੱਖਮ ਪਰ ਦਰਦਨਾਕ ਹਨ। ਮੋਡਲ ਬੰਦ ਕਰਨ ਤੋਂ ਬਾਅਦ ਜਾਂ ਫਾਰਮ ਸੇਵ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਅਕਸਰ ਫੋਕਸ ਪੇਜ਼ ਦੇ ਸਿਰੇ ਤੇ ਜਾਂ ਗਾਇਬ ਹੋ ਜਾਂਦਾ ਹੈ। ਇਹ ਉਸ ਵੇਲੇ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਫੋਕਸ ਨੂੰ ਦੁਬਾਰਾ ਉਸ ਕੰਟਰੋਲ ਨੂੰ ਨਹੀਂ ਦਿੱਤਾ ਜਾਂਦਾ ਜਿਸਨੇ ਡਾਇਲੌਗ ਖੋਲ੍ਹਿਆ ਸੀ, ਜਾਂ ਜਦੋਂ ਸੇਵ ਕਰਦਾ ਵੇਲੇ ਸਕ੍ਰੀਨ ਰੀ-ਰੈਂਡਰ ਹੋ ਜਾਂਦੀ ਹੈ ਅਤੇ ਫੋਕਸ ਡ੍ਰਾਪ ਹੋ ਜਾਂਦਾ ਹੈ। ਉਪਭੋਗਤਾ ਫਿਰ ਦੁਬਾਰਾ ਲੱਭਣ ਲਈ ਸ਼ੁਰੂ ਕਰਨਾ ਪੈਂਦਾ ਹੈ।

ARIA (ਜਾਂ Flutter Semantics) ਦਾ ਬੇਸਮਝ ਉਪਯੋਗ ਵੀ ਚੀਜ਼ਾਂ ਨੂੰ ਖਰਾਬ ਕਰ ਸਕਦਾ ਹੈ। ਹਰ ਥਾਂ roles ਅਤੇ labels ਜੋੜਨ ਨਾਲ ਨੈਟਿਵ ਐਲਿਮੈਂਟ ਜੋ ਪਹਿਲਾਂ ਹੀ ਸਹਾਇਤਾ ਦਿੰਦਾ ਹੈ ਨਾਲ ਟਕਰਾਅ ਹੋ ਸਕਦਾ ਹੈ, ਜਿਵੇਂ ਡਬਲ ਐਲਾਨ ਜਾਂ ਗਲਤ ਨਾਮ।

ਸਮੀਖਿਆ ਦੌਰਾਨ ਪੁੱਛਣ ਲਈ ਇੱਕ ਤੇਜ਼ “ਦੋਹਰਾਉਂਣ-ਮੁੱਦੇ” ਚੈੱਕ:

• ਪ੍ਰਮਾਣਿਤ ਕਰੋ ਕਿ ਹਰ ਇਨਪੁੱਟ ਦਾ ਇੱਕ ਸਥਾਈ ਲੇਬਲ ਹੈ, ਸਿਰਫ਼ ਪਲੇਸਹੋਲਡਰ ਨਹੀਂ
• ਪ੍ਰਮਾਣਿਤ ਕਰੋ ਕਿ ਹਰ ਇੰਟਰਐਕਟਿਵ ਐਲਮੈਂਟ ਇੱਕ ਅਸਲੀ ਕੰਟਰੋਲ ਹੈ ਅਤੇ ਸਹੀ ਰੋਲ ਰੱਖਦਾ ਹੈ
• ਪ੍ਰਮਾਣਿਤ ਕਰੋ ਕਿ ਫੋਕਸ ਹਮੇਸ਼ਾ ਦਿੱਖਦਾ ਹੈ ਅਤੇ ਬਿਨਾਂ ਬਦਲਾਅ ਤੋਂ ਹਟਾਇਆ ਨਹੀਂ ਗਿਆ
• ਪ੍ਰਮਾਣਿਤ ਕਰੋ ਕਿ ਡਾਇਲੌਗ, ਟੋਸਟ, ਅਤੇ ਸੇਵਾਂ ਤੋਂ ਬਾਅਦ ਫੋਕਸ ਟ੍ਰਿਗਰ ਨੂੰ ਵਾਪਸ ਮਿਲਦਾ ਹੈ
• ਪ੍ਰਮਾਣਿਤ ਕਰੋ ਕਿ ARIA/Semantics ਸਿਰਫ਼ ਉਹੀ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ ਜੋ ਨੈਟਿਵ ਕੰਟਰੋਲ ਨਹੀਂ ਦੇ ਸਕਦੇ

ਜੇ ਤੁਸੀਂ ਚੈਟ ਤੋਂ UI ਜਨਰੇਟ ਕਰਦੇ ਹੋ (ਉਦਾਹਰਨ Koder.ai), ਤਾਂ ਇਹਨਾਂ ਨੂੰ acceptance criteria ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ਤਾਂ ਕਿ ਪਹਿਲੀ ਡਰਾਫਟ ਹੀ ਆਮ ਜਾਲਾਂ ਤੋਂ ਬਚੇ।

ਉਦਾਹਰਨ ਵਾਕ-ਥਰੂ: ਇੱਕ ਸਕ੍ਰੀਨ, ਐਂਡ-ਟੂ-ਐਂਡ

ਇੱਕ ਸਧਾਰਨ Settings ਸਕ੍ਰੀਨ ਕਲਪਨਾ ਕਰੋ: ਪ੍ਰੋਫਾਈਲ ਫਾਰਮ (Name, Email), ਦੋ ਟੌਗਲ (Email notifications, Dark mode), ਇੱਕ “Save changes” ਬਟਨ, ਅਤੇ ਸੇਵ ਕਰਨ ਤੋਂ ਬਾਅਦ ਇੱਕ ਟੋਸਟ।

ਕੀਬੋਰਡ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ। ਉਮੀਦ ਕੀਤੀ ਫੋਕਸ ਆਰਡਰ ਵਿਜ਼ੂਅਲ ਆਰਡਰ ਨੂੰ ਮਿਲਣਾ ਚਾਹੀਦਾ ਹੈ: ਉੱਪਰ-ਤੋਂ-ਨੀਵੇਂ। ਟੈਬਿੰਗ ਕਦੇ ਵੀ ਟੋਸਟ ਖੇਤਰ, ਫੁੱਟਰ, ਜਾਂ ਛੁਪੇ ਮੀਨੂ ਵਿੱਚ ਛਾਲ ਨਹੀਂ ਮਾਰਨੀ ਚਾਹੀਦੀ।

ਇੱਕ ਤੇਜ਼ ਪਾਸ ਜੋ ਬਹੁਤ ਸਾਰੀਆਂ accessibility prompts for React and Flutter UI reviews ਲਈ ਕੰਮ ਕਰਦੀ ਹੈ:

• ਉੱਪਰ ਤੋਂ ਟੈਬ ਦਬਾਓ: ਫੋਕਸ Name ਤੇ ਆਉਂਦਾ ਹੈ, ਫਿਰ Email, ਫਿਰ Email notifications ਟੌਗਲ, ਫਿਰ Dark mode ਟੌਗਲ, ਫਿਰ Save changes.
• Shift+Tab ਨਾਲ ਵਾਪਸ ਜਾਣ ਅਤੇ ਪੱਕਾ ਕਰੋ ਕਿ ਇਹ ਸਾਫ਼-ਸਾਫ਼ ਉਲਟ ਹੁੰਦਾ ਹੈ।
• ਟੌਗਲਾਂ ਤੇ Space ਨਾਲ ਟੌਗਲ ਹੋ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਐਰੋ ਕੀਜ਼ ਫੋਕਸ ਫਸਾਉਣ ਨਹੀਂ ਚਾਹੀਦੇ।
• Save changes ਤੇ Enter ਨਾਲ submit ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ, ਅਤੇ ਸੇਵ ਕਰਨ ਤੋਂ ਬਾਅਦ ਫੋਕਸ ਗਾਇਬ ਨਹੀਂ ਹੋਣਾ ਚਾਹੀਦਾ।
• ਜਦੋਂ ਟੋਸਟ ਦਿਖਦਾ ਹੈ, ਫੋਕਸ ਉਥੇ ਰਹਿਣਾ ਚਾਹੀਦਾ ਹੈ ਜਿੱਥੇ ਇਹ ਸੀ ਜਦ ਤੱਕ ਟੋਸਟ ਵਿੱਚ ਕਾਰਵਾਈ (ਜਿਵੇਂ “Undo”) ਨਹੀਂ ਹੁੰਦੀ।

ਹੁਣ ਚੈੱਕ ਕਰੋ ਕਿ ਸਕ੍ਰੀਨ ਰੀਡਰ ਕੀ ਐਲਾਨ ਕਰਦਾ ਹੈ। ਹਰ ਕੰਟਰੋਲ ਨੂੰ ਇੱਕ ਸਾਫ਼ ਨਾਮ, ਭੂਮਿਕਾ, ਅਤੇ ਸਥਿਤੀ ਦੀ ਲੋੜ ਹੈ। ਉਦਾਹਰਨ: “Name, text field, required” ਅਤੇ “Email notifications, switch, on”。 ਜੇ Email ਫੀਲਡ ਵਿੱਚ ਏਰਰ ਹੈ, ਤਾਂ ਇਹ ਫੋਕਸ ਵਿੱਚ ਦਾਖਲ ਹੋਣ ਤੇ ਅਤੇ ਏਰਰ ਆਉਣ ਤੇ ਐਲਾਨ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ (ਉਦਾਹਰਨ: “Email, text field, invalid, Enter a valid email address”)। Save ਬਟਨ ਨੂੰ “Save changes, button” ਵਜੋਂ ਪੜ੍ਹਨਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਜਦੋਂ ਇਹ disabled ਹੋਵੇ ਤਾਂ ਕਾਰਨ ਵੀ ਦਸਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।

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

ਆਪਣੀਆਂ ਖੋਜਾਂ ਨੂੰ ਇੱਕ ਛੋਟੀ ਫਿਕਸ ਸੂਚੀ ਵਿੱਚ ਤਬਦੀਲ ਕਰੋ:

• ਫੋਕਸ ਆਰਡਰ ਠੀਕ ਕਰੋ ਤਾਂ ਜੋ ਇਹ ਲੇਆਉਟ ਨਾਲ ਮਿਲੇ।
• ਟੌਗਲਾਂ ਅਤੇ ਆਈਕਾਨਾਂ ਲਈ ਗੁੰਮ ਲੇਬਲ ਜੋੜੋ।
• ਏਰਰਾਂ ਨੂੰ ਫੀਲਡ ਨਾਲ ਐਲਾਨ ਕਰੋ (ਸਿਰਫ਼ ਬੈਨਰ ਨਹੀਂ)।
• ਫੋਕਸ ਸ਼ੈਲੀਆਂ ਅਤੇ ਘੱਟ-ਕਾਂਟਰਾਸਟ ਪਲੇਸਹੋਲਡ/ਏਰਰ ਟੈਕਸਟ ਸੁਧਾਰੋ।
• ਟੋਸਟ ਨੂੰ ਨਾਨ-ਬਲਾਕਿੰਗ ਬਣਾਓ, ਜਾਂ ਸਿਰਫ਼ ਉਸ ਵੇਲੇ ਫੋਕਸਯੋਗ ਬਣਾਓ ਜਦੋਂ ਇਸ ਵਿੱਚ ਕਾਰਵਾਈਆਂ ਹੋਣ।

ਜੇ ਤੁਸੀਂ Koder.ai ਵਿੱਚ ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ ਇਸ ਸਕ੍ਰੀਨ ਵਰਣਨ ਅਤੇ ਆਪਣੇ ਨਤੀਜਿਆਂ ਨੂੰ ਚੈਟ ਵਿੱਚ ਪੇਸਟ ਕਰੋ ਅਤੇ ਪੁੱਛੋ ਕਿ React ਜਾਂ Flutter UI ਨੂੰ ਉਮੀਦ ਕੀਤੀ ਕੀਬੋਰਡ ਅਤੇ ਸਕ੍ਰੀਨ ਰੀਡਰ ਵਿਹਾਰ ਦੇ ਅਨੁਸਾਰ ਅਪਡੇਟ ਕਰੇ।

ਅਗਲੇ ਕਦਮ: ਇਸ ਚੈੱਕਲਿਸਟ ਨੂੰ ਦੁਹਰਾਓ ਅਤੇ ਆਪਣੇ ਵਰਕਫਲੋ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ

ਜੇ ਤੁਸੀਂ React ਅਤੇ Flutter UI ਸਮੀਖਿਆ ਲਈ ਪ੍ਰਾਂਪਟਾਂ ਦਾ ਲੰਬੇ ਸਮੇਂ ਲਾਭ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਉਨ੍ਹਾਂ ਨੂੰ ਇੱਕ ਦੁਹਰਾਏ ਜਾਣ ਵਾਲੀ ਆਦਤ ਸਮਝੋ, ਨਾ ਕਿ ਇੱਕ ਵਾਰ ਦੀ ਸਫਾਈ। ਮਕਸਦ ਹਰ ਵਾਰੀ ਜਦੋਂ ਤੁਸੀਂ ਨਵੀਂ ਸਕ੍ਰੀਨ ਜਾਂ ਕੰਪੋਨੈਂਟ ਜੋੜਦੇ ਹੋ ਇੱਕੋ ਛੋਟੇ ਸੈੱਟ ਚੈਕਾਂ ਚਲਾਉਣਾ ਹੈ।

ਇਕ ਇਕਲੌਤਾ “definition of done” ਰੱਖੋ UI ਬਦਲਾਅ ਲਈ। ਕੁਝ ਵੀ ਸ਼ਿਪ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਕੀਬੋਰਡ, ਫੋਕਸ, ਨਾਮ, ਅਤੇ ਕਾਂਟਰਾਸਟ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਚੈੱਕ ਕਰੋ। ਇਹ ਅਕਸਰ ਕਰਨ ਨਾਲ ਮਿੰਟਾਂ ਲੈਂਦਾ ਹੈ।

ਇਹ ਇੱਕ ਤੇਜ਼ ਚੈੱਕਲਿਸਟ ਹੈ ਜੋ ਤੁਸੀਂ ਲਗਭਗ ਕਿਸੇ ਵੀ UI 'ਤੇ ਚਲਾ ਸਕਦੇ ਹੋ:

• ਕੀਬੋਰਡ: ਕੀ ਤੁਸੀਂ ਹਰ ਇੰਟਰਐਕਟਿਵ ਐਲਮੈਂਟ ਤਕ ਪਹੁੰਚ ਸਕਦੇ ਹੋ ਅਤੇ ਬਿਨ੍ਹਾਂ ਮਾਊਸ ਦੇ ਇਸਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ?
• ਫੋਕਸ: ਕੀ ਫੋਕਸ ਦਿੱਖਦਾ ਹੈ ਅਤੇ ਇੱਕ ਲਾਜ਼ਮੀ ਕ੍ਰਮ ਵਿੱਚ ਹਿਲਦਾ ਹੈ?
• ਲੇਬਲ: ਕੀ ਹਰ ਫੀਲਡ ਅਤੇ ਬਟਨ ਦਾ ਸਪਸ਼ਟ ਨਾਮ ਹੈ (ਆਈਕਾਨ ਸਮੇਤ)?
• ਐਲਾਨ: ਕੀ ਸਥਿਤੀ ਬਦਲਾਅ ਐਲਾਨ ਕੀਤੇ ਜਾਂਦੇ ਹਨ (ਏਰਰ, ਲੋਡਿੰਗ, ਸਫਲਤਾ)?
• ਕਾਂਟਰਾਸਟ: ਕੀ ਟੈਕਸਟ ਪਾਠਯੋਗ ਹੈ ਅਤੇ ਡਿਸੇਬਲਡ ਸਟੇਟਸ ਵੀ ਸਮਝਣਯੋਗ ਹਨ?

ਆਪਣੀਆਂ ਸਭ ਤੋਂ ਚੰਗੀਆਂ ਪ੍ਰਾਂਪਟਾਂ ਨੂੰ ਟੈਂਪਲੇਟ ਵਜੋਂ ਸੇਵ ਕਰੋ। ਇੱਕ ਸਧਾਰਨ ਤਰੀਕਾ ਇਹ ਹੈ ਕਿ ਹਰ ਬਦਲਾਅ ਰਿਕਵੇਸਟ ਦੇ ਅਖੀਰ ਵਿੱਚ ਇੱਕ “React review prompt” ਅਤੇ ਇੱਕ “Flutter review prompt” ਪੇਸਟ ਕਰਨ ਲਈ ਰੱਖੋ। ਫਿਰ ਇੱਕ ਛੋਟਾ ਲਾਈਨ ਸ਼ਾਮਲ ਕਰੋ ਜੋ ਨਵੇਂ ਕੰਪੋਨੈਂਟ ਦਾ ਵਰਣਨ ਅਤੇ ਕੋਈ ਖ਼ਾਸ ਵਿਹਾਰ (modal, stepper, infinite scroll ਵਾਲੀ ਲਿਸਟ) ਨੂੰ ਦੱਸੇ।

ਹਰ ਨਵੀਂ ਕੰਪੋਨੈਂਟ ਤੇ ਰਿਲੀਜ਼ ਤੋਂ ਪਹਿਲਾਂ ਇੱਕੋ ਚੈੱਕ ਮੁੜ-ਚਲਾਓ, ਭਾਵੇਂ ਇਹ ਦੋਹਰਾਉਣ ਵਾਲਾ ਲੱਗੇ। ਐਕਸੈਸਬਿਲਿਟੀ ਮੁੱਦੇ ਅਕਸਰ ਛੋਟੇ ਸੋਧਾਂ ਨਾਲ ਆਉਂਦੇ ਹਨ: ਨਵਾਂ ਆਈਕਾਨ-ਕੇਵਲ ਬਟਨ, ਇੱਕ ਕਸਟਮ ਡ੍ਰੌਪਡਾਊਨ, ਇੱਕ ਟੋਸਟ ਸੁਨੇਹਾ, ਜਾਂ ਡਾਇਲੌਗ ਵਿੱਚ ਫੋਕਸ ਟਰੈਪ।

ਜੇ ਤੁਸੀਂ Koder.ai ਨਾਲ ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ ਪ੍ਰਾਂਪਟਾਂ ਨੂੰ ਚੈਟ ਵਿੱਚ ਪੇਸਟ ਕਰੋ ਅਤੇ ਠੀਕ-ਥੀਕ ਫਿਕਸ ਮੰਗੋ, ਨ ਕਿ ਜਨਰਲ ਸੁਝਾਅ। ਫਿਰ planning mode ਵਿੱਚ ਪ੍ਰਭਾਵ ਦੀ ਸਮੀਖਿਆ ਕਰੋ ਪਹਿਲਾਂ ਕਿ ਬਦਲਾਅ ਲਾਗੂ ਕਰੋ। ਐਕਸੈਸਬਿਲਿਟੀ ਪਾਸ ਤੋਂ ਪਹਿਲਾਂ ਇੱਕ ਸਨੈਪਸ਼ਾਟ ਲਓ, ਅਤੇ ਜੇ ਕੋਈ ਫਿਕਸ ਲੇਆਉਟ ਜਾਂ ਵਿਹਾਰ ਤੋੜ ਦੇਵੇ ਤਾਂ ਰੋਲਬੈਕ ਵਰਤੋ। ਇਸ ਨਾਲ ਫੋਕਸ ਆਰਡਰ ਅਤੇ semantics 'ਤੇ ਬਿਨਾਂ ਡਰ ਦੇ ਤਬਦੀਲੀਆਂ ਕਰਨਾ ਸੁਰੱਖਿਅਤ ਬਣਦਾ ਹੈ।

ਆਪਣੀ ਐਕਸੈਸਬਿਲਿਟੀ ਪਾਸ ਤੋਂ ਬਾਅਦ, ਤੁਸੀਂ ਇਸਨੂੰ ਰਿਲੀਜ਼ ਗੇਟ ਵਜੋਂ ਵਰਤ ਸਕਦੇ ਹੋ: ਸੋর্স ਕੋਡ ਨਿਰਯਾਤ ਕਰੋ ਆਪਣੀ ਰੇਪੋ ਵਰਕਫਲੋ ਲਈ, ਜਾਂ ਐਪ ਨੂੰ ਤੈਨਾਤ ਅਤੇ ਹੋਸਟ ਕਰੋ ਅਤੇ ਇੱਕ ਕਸਟਮ ਡੋਮੇਨ ਜ਼ੁੜਨ ਉਪਰੰਤ ਸੰਤੁਸ਼ਟ ਹੋਵੋ।