ਅਸੀਂ CI ਵਿੱਚ Accessibility VPATs ਨੂੰ ਕਿਵੇਂ ਆਟੋਮੇਟ ਕੀਤਾ ਅਸੀਂ CI ਵਿੱਚ Accessibility VPATs ਨੂੰ ਕਿਵੇਂ ਆਟੋਮੇਟ ਕੀਤਾ

Accessibility audits ਜਲਦੀ ਹੀ ਪੁਰਾਣੇ ਹੋ ਜਾਂਦੇ ਹਨ। ਇੱਕ ਸਿੰਗਲ ਕੋਡ ਮਰਜ (merge) ਸਭ ਕੁਝ ਬਦਲ ਦਿੰਦਾ ਹੈ।

ਅਸੀਂ ਇਸ ਨੂੰ ਠੀਕ ਕੀਤਾ। ਅਸੀਂ ਆਪਣੀਆਂ accessibility ਰਿਪੋਰਟਾਂ ਨੂੰ ਇੱਕ continuous build artifact ਵਿੱਚ ਬਦਲ ਦਿੱਤਾ।

ਸਾਡਾ ਪਾਈਪਲਾਈਨ ਗਲਤੀਆਂ ਲੱਭਣ ਲਈ ਤਿੰਨ ਲੇਅਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ:

  • Static checks: ਅਸੀਂ Storybook ਵਿੱਚ baseline ਟੈਸਟਾਂ ਲਈ axe-core ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ।
  • Interactive tests: ਅਸੀਂ keyboard ਨਿਯਮਾਂ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ custom Vitest helpers ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ।
  • Manual audits: ਅਸੀਂ screen reader ਦੇ ਨਤੀਜਿਆਂ ਨੂੰ JSON ਫਾਈਲਾਂ ਵਜੋਂ ਸਟੋਰ ਕਰਦੇ ਹਾਂ।

ਸਾਡਾ CI ਪਾਈਪਲਾਈਨ ਇਹਨਾਂ ਨਤੀਜਿਆਂ ਨੂੰ ਮਰਜ ਕਰਦਾ ਹੈ।

ਜੇਕਰ ਕੋਈ ਟੈਸਟ ਫੇਲ ਹੋ ਜਾਂਦਾ ਹੈ, ਤਾਂ PR ਫੇਲ ਹੋ ਜਾਂਦਾ ਹੈ। ਜੇਕਰ ਸਾਰੇ ਟੈਸਟ ਪਾਸ ਹੋ ਜਾਂਦੇ ਹਨ, ਤਾਂ ਸਿਸਟਮ ਇੱਕ ਨਵੀਂ PDF ਬਣਾਉਂਦਾ ਹੈ। ਇਹ PDF ਤੁਹਾਡੀ ਰਿਲੀਜ਼ ਦੇ ਨਾਲ ਭੇਜੀ ਜਾਂਦੀ ਹੈ।

ਅਸੀਂ ਇੱਕ ਚੀਜ਼ ਅਜ਼ਮਾਈ ਜੋ ਫੇਲ ਹੋ ਗਈ।

ਅਸੀਂ manual audits ਨੂੰ ਬਦਲਣ ਲਈ ਇੱਕ LLM ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕੀਤੀ। ਅਸੀਂ ਇਸਦੀ ਵਰਤੋਂ ਤੁਰੰਤ ਬੰਦ ਕਰ ਦਿੱਤੀ। AI ਦੇ ਨਤੀਜੇ ਬਹੁਤ ਜ਼ਿਆਦਾ ਬਦਲਦੇ ਰਹਿੰਦੇ ਹਨ। ਤੁਹਾਨੂੰ CI gate ਲਈ ਸਥਿਰ ਨਤੀਜਿਆਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।

ਪੂਰਾ ਤਕਨੀਕੀ ਵੇਰਵਾ ਇੱਥੇ ਪੜ੍ਹੋ:

Source: https://dev.to/yassine_lakhdar_d0226709a/how-we-automated-our-accessibility-vpats-in-ci-46jk

ARTICLE: ਇੱਕ ਡਿਵੈਲਪਮੈਂਟ ਟੀਮ ਨੇ ਆਪਣੀ continuous-integration (CI) ਪਾਈਪਲਾਈਨ ਵਿੱਚ ਸਿੱਧੇ ਤੌਰ 'ਤੇ accessibility VPATs (Voluntary Product Accessibility Templates) ਬਣਾਉਣ ਦੀ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਆਟੋਮੇਟ ਕਰ ਦਿੱਤਾ ਹੈ, ਜਿਸ ਨਾਲ ਇੱਕ ਸਮੇਂ ਦੇ ਸਮੇਂ-ਸਮੇਂ 'ਤੇ ਕੀਤੇ ਜਾਣ ਵਾਲੇ manual ਰਿਪੋਰਟ ਨੂੰ ਇੱਕ build artifact ਵਿੱਚ ਬਦਲ ਦਿੱਤਾ ਗਿਆ ਹੈ ਜੋ ਹਰ ਰਿਲੀਜ਼ ਦੇ ਨਾਲ ਭੇਜੀ ਜਾਂਦੀ ਹੈ। ਨਵਾਂ ਵਰਕਫਲੋ ਉਹਨਾਂ pull requests ਨੂੰ ਫੇਲ ਕਰ ਦਿੰਦਾ ਹੈ ਜੋ accessibility regressions ਲਿਆਉਂਦੇ ਹਨ ਅਤੇ ਜਦੋਂ build ਸਫਲ ਹੁੰਦਾ ਹੈ ਤਾਂ ਆਪਣੇ ਆਪ ਇੱਕ PDF compliance ਦਸਤਾਵੇਜ਼ ਤਿਆਰ ਕਰਦਾ ਹੈ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਹਰ ਕੋਡ ਤਬਦੀਲੀ accessibility ਮਿਆਰਾਂ ਦੇ ਅੰਦਰ ਰਹੇ।

Why automation matters

Accessibility audits ਉਸੇ ਪਲ ਪੁਰਾਣੇ ਹੋ ਜਾਂਦੇ ਹਨ ਜਦੋਂ ਨਵਾਂ ਕੋਡ ਆਉਂਦਾ ਹੈ। ਇੱਕ ਸਿੰਗਲ ਮਰਜ (merge) ਗੁੰਮ ਹੋ ਰਿਹਾ alt text, ਗਲਤ focus order, ਜਾਂ screen-reader ਦੀਆਂ ਸਮੱਸਿਆਵਾਂ ਲਿਆ ਸਕਦਾ ਹੈ ਜੋ ਪਹਿਲਾਂ ਜਾਰੀ ਕੀਤੇ ਗਏ VPAT ਨੂੰ ਅਮਾਨਯੋਗ ਕਰ ਦਿੰਦੀਆਂ ਹਨ। ਮੈਨੂਅਲ ਤੌਰ 'ਤੇ compliance ਬਣਾਈ ਰੱਖਣ ਦਾ ਮਤਲਬ ਹੈ ਹਰ ਤਬਦੀਲੀ ਤੋਂ ਬਾਅਦ audits ਨੂੰ ਦੁਬਾਰਾ ਚਲਾਉਣਾ, ਜੋ ਕਿ ਇੱਕ ਖਰਚੀਲਾ ਅਤੇ ਗਲਤੀਆਂ ਵਾਲਾ ਪ੍ਰਕਿਰਿਆ ਹੈ ਜੋ ਅਕਸਰ ਡਿਵੈਲਪਮੈਂਟ ਦੀ ਰਫ਼ਤਾਰ ਤੋਂ ਪਛੜ ਜਾਂਦੀ ਹੈ। CI ਵਿੱਚ ਚੈੱਕਸ ਨੂੰ ਸ਼ਾਮਲ ਕਰਕੇ, ਟੀਮਾਂ ਨੂੰ ਤੁਰੰਤ ਫੀਡਬੈਕ ਮਿਲਦਾ ਹੈ, compliance ਨੂੰ ਅੱਪ-ਟੂ-ਡੇਟ ਰੱਖਿਆ ਜਾਂਦਾ ਹੈ, ਅਤੇ inaccessible software ਭੇਜਣ ਦੇ ਕਾਨੂੰਨੀ ਅਤੇ ਸਾਖ (reputational) ਦੇ ਜੋਖਮਾਂ ਤੋਂ ਬਚਿਆ ਜਾ ਸਕਦਾ ਹੈ।

The three-layer testing approach

  1. Static checks – ਪਾਈਪਲਾਈਨ axe-core ਚਲਾਉਂਦੀ ਹੈ, ਜੋ ਕਿ ਇੱਕ open-source ਲਾਇਬ੍ਰੇਰੀ ਹੈ ਜੋ Storybook ਵਿੱਚ ਰੈਂਡਰ ਕੀਤੇ ਗਏ ਕੰਪੋਨੈਂਟਸ ਦੀ ਜਾਣੇ-ਪਛਾਣੇ ਉਲੰਘਣਾਵਾਂ ਜਿਵੇਂ ਕਿ missing landmarks ਜਾਂ ਅਧੂਰੇ color contrast ਲਈ ਜਾਂਚ ਕਰਦੀ ਹੈ। ਇਹ ਟੈਸਟ ਕਿਸੇ ਵੀ ਇੰਟਰੈਕਸ਼ਨ ਤੋਂ ਪਹਿਲਾਂ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਫੜ ਲੈਂਦੇ ਹਨ।

  2. Interactive checks – Custom Vitest helpers keyboard navigation ਨਿਯਮਾਂ ਦੀ ਜਾਂਚ ਕਰਦੇ ਹਨ, ਇਹ ਪੁਸ਼ਟੀ ਕਰਦੇ ਹਨ ਕਿ focus ਤਰਕਪੂਰਨ ਤਰੀਕੇ ਨਾਲ ਚਲਦਾ ਹੈ ਅਤੇ interactive elements standard keyboard events ਦਾ ਜਵਾਬ ਦਿੰਦੇ ਹਨ। ਇਹ ਲੇਅਰ ਅਸਲ ਦੁਨੀਆ ਦੀ ਵਰਤੋਂਯੋਗਤਾ (usability) ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ static analysis ਤੋਂ ਅੱਗੇ ਜਾਂਦੀ ਹੈ।

  3. Manual audit artifacts – Screen-reader ਟੈਸਟਿੰਗ ਦੇ ਨਤੀਜੇ JSON ਫਾਈਲਾਂ ਵਜੋਂ ਸੇਵ ਕੀਤੇ ਜਾਂਦੇ ਹਨ। ਡਿਵੈਲਪਰਸ exploratory testing ਦੌਰਾਨ ਨਿਰੀਖਣ (observations) ਰਿਕਾਰਡ ਕਰਦੇ ਹਨ ਅਤੇ ਕੋਡ ਦੇ ਨਾਲ JSON ਨੂੰ commit ਕਰਦੇ ਹਨ। CI job ਇਹਨਾਂ artifacts ਨੂੰ automated ਨਤੀਜਿਆਂ ਨਾਲ ਮਰਜ ਕਰਦਾ ਹੈ, ਜੋ VPAT ਲਈ ਇੱਕ ਸਿੰਗਲ source of truth ਤਿਆਰ ਕਰਦਾ ਹੈ।

ਜਦੋਂ ਪਹਿਲੀਆਂ ਦੋ ਲੇਅਰਾਂ ਵਿੱਚੋਂ ਕੋਈ ਵੀ ਟੈਸਟ ਫੇਲ ਹੋ ਜਾਂਦਾ ਹੈ, ਤਾਂ pull request ਨੂੰ ਰੋਕ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਤਬਦੀਲੀ ਨੂੰ production ਤੱਕ ਪਹੁੰਚਣ ਤੋਂ ਰੋਕਿਆ ਜਾਂਦਾ ਹੈ। ਜੇਕਰ ਸਾਰੇ ਟੈਸਟ ਪਾਸ ਹੋ ਜਾਂਦੇ ਹਨ, ਤਾਂ ਪਾਈਪਲਾਈਨ ਸਾਂਝੇ ਡੇਟਾ ਨੂੰ ਇੱਕ PDF ਵਿੱਚ ਇਕੱਠਾ ਕਰਦੀ ਹੈ ਜੋ ਰਿਲੀਜ਼ ਦੇ ਨਾਲ ਲਗਾਈ ਜਾਂਦੀ ਹੈ, ਜਿਸ ਨਾਲ ਬਿਨਾਂ ਕਿਸੇ ਵਾਧੂ ਕੋਸ਼ਿਸ਼ ਦੇ ਅੱਪ-ਟੂ-ਡੇਟ VPAT ਮਿਲਦਾ ਹੈ।

What didn’t work

ਟੀਮ ਨੇ manual audit ਹਿੱਸੇ ਨੂੰ ਆਪਣੇ ਆਪ ਤਿਆਰ ਕਰਨ ਲਈ ਇੱਕ large language model (LLM) ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਪ੍ਰਯੋਗ ਕੀਤਾ। AI ਦੁਆਰਾ ਤਿਆਰ ਕੀਤੇ ਗਏ ਨਤੀਜੇ ਬਹੁਤ ਜ਼ਿਆਦਾ ਬਦਲਦੇ ਰਹੇ, ਜਿਸ ਨਾਲ CI gate ਅਭਰੋਸੇਯੋਗ ਹੋ ਗਿਆ। ਇੱਕ binary pass/fail ਚੈੱਕ ਲਈ ਇਕਸਾਰਤਾ (consistency) ਜ਼ਰੂਰੀ ਹੈ, ਇਸ ਲਈ JSON-ਅਧਾਰਤ manual artifacts ਦੇ ਹੱਕ ਵਿੱਚ ਪ੍ਰਯੋਗ ਨੂੰ ਛੱਡ ਦਿੱਤਾ ਗਿਆ।

What to watch next

ਫਿਲਹਾਲ, ਤਿੰਨ-ਲੇਅਰ CI ਮਾਡਲ VPATs ਨੂੰ ਅੱਪ-ਟੂ-ਡੇਟ ਰੱਖਣ, manual overhead ਨੂੰ ਘਟਾਉਣ ਅਤੇ ਹਰ ਕੋਡ ਤਬਦੀਲੀ ਵਿੱਚ accessibility ਨੂੰ ਮੁੱਖ ਰੱਖਣ ਲਈ ਇੱਕ ਵਿਹਾਰਕ (pragmatic) ਮਾਰਗ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।