परिचय

पहुंच-योग्यता वेब विकास का एक महत्वपूर्ण पहलू है, जो यह सुनिश्चित करता है कि विकलांग लोगों सहित सभी उपयोगकर्ता आपके वेब अनुप्रयोगों के साथ प्रभावी ढंग से बातचीत कर सकें। स्वचालित पहुंच परीक्षण विकास प्रक्रिया की शुरुआत में ही पहुंच संबंधी समस्याओं को पहचानने और ठीक करने में मदद करता है। इस पोस्ट में, हम यह पता लगाएंगे कि आपके अनुप्रयोगों को अधिक समावेशी बनाने के लिए साइप्रस-एक्स जैसे टूल का लाभ उठाते हुए, साइप्रस का उपयोग करके स्वचालित पहुंच परीक्षण को कैसे कार्यान्वित किया जाए।

अभिगम्यता क्यों मायने रखती है

1. कानूनी अनुपालन: यह सुनिश्चित करता है कि आपका आवेदन अमेरिकी विकलांगता अधिनियम (एडीए) और वेब सामग्री पहुंच दिशानिर्देश (डब्ल्यूसीएजी) जैसी कानूनी आवश्यकताओं को पूरा करता है।
2. उपयोगकर्ता अनुभव: विकलांग लोगों सहित सभी उपयोगकर्ताओं के लिए समग्र उपयोगकर्ता अनुभव में सुधार करता है।
3. समावेशिता: आपके एप्लिकेशन को व्यापक दर्शकों के लिए सुलभ बनाते हुए, समावेशिता और विविधता के प्रति प्रतिबद्धता प्रदर्शित करता है।
4. एसईओ लाभ: खोज इंजन अनुकूलन में सुधार करता है, क्योंकि खोज इंजन सुलभ वेबसाइटों को पसंद करते हैं।

साइप्रस में स्वचालित अभिगम्यता परीक्षण की स्थापना

साइप्रस में स्वचालित पहुंच परीक्षण करने के लिए, हम साइप्रस-एक्स प्लगइन का उपयोग करेंगे, जो साइप्रस के साथ एक्स एक्सेसिबिलिटी इंजन को एकीकृत करता है।

चरण 1: साइप्रस और साइप्रस-कुल्हाड़ी स्थापित करें
सबसे पहले, सुनिश्चित करें कि आपके प्रोजेक्ट में साइप्रस स्थापित है। यदि नहीं, तो आप इसे निम्न कमांड का उपयोग करके इंस्टॉल कर सकते हैं:

npm install cypress --save-dev

इसके बाद, साइप्रस-एक्स प्लगइन इंस्टॉल करें:

npm install cypress-axe --save-dev

चरण 2: साइप्रस-कुल्हाड़ी कॉन्फ़िगर करें
cypress/support निर्देशिका में Commands.js नामक एक नई फ़ाइल बनाएँ और cypress-axe को आयात और कॉन्फ़िगर करने के लिए निम्नलिखित कोड जोड़ें:

import 'cypress-axe';

Cypress.Commands.add('injectAxe', () => {
    cy.window({ log: false }).then(window => {
        let axe = require('axe-core');
        window.eval(axe.source);
    });
});

Cypress.Commands.add('checkA11y', (selector = null, options = null, violationCallback = null, skipFailures = false) => {
    cy.window({ log: false }).then(window => {
        let document = window.document;
        return axe.run(document, options).then(({ violations }) => {
            if (violations.length) {
                cy.wrap(violations, { log: false }).each(violation => {
                    let nodes = Cypress._.get(violation, 'nodes', []);
                    Cypress._.each(nodes, node => {
                        let target = Cypress._.get(node, 'target', []);
                        if (target.length) {
                            Cypress._.each(target, target => {
                                cy.wrap(target, { log: false }).then($target => {
                                    if (!skipFailures) {
                                        Cypress.log({
                                            name: 'a11y error!',
                                            message: violation.help,
                                            consoleProps: () => violation
                                        });

                                        violationCallback && violationCallback(violation);
                                    }
                                });
                            });
                        }
                    });
                });
            }
        });
    });
});

चरण 3: अभिगम्यता परीक्षण बनाएं
अब, आइए एक वेब पेज की पहुंच की जांच करने के लिए एक साइप्रस परीक्षण बनाएं। cypress/e2e निर्देशिका में accessibility.spec.js नामक एक नई फ़ाइल बनाएं और निम्नलिखित कोड जोड़ें:

describe('Automated Accessibility Testing with Cypress', () => {
    beforeEach(() => {
        cy.visit('/');
        cy.injectAxe();
    });

    it('should have no detectable accessibility violations on load', () => {
        cy.checkA11y();
    });

    it('should have no detectable accessibility violations on specific elements', () => {
        cy.checkA11y('header');
        cy.checkA11y('main');
        cy.checkA11y('footer');
    });
});

इस उदाहरण में, हम पूरे पृष्ठ के साथ-साथ शीर्षलेख, मुख्य सामग्री और पादलेख जैसे विशिष्ट तत्वों पर पहुंच जांच कर रहे हैं।

अभिगम्यता जांच को अनुकूलित करना

आप विकल्प प्रदान करके और नियमों को कॉन्फ़िगर करके पहुंच जांच को अनुकूलित कर सकते हैं। उदाहरण के लिए, आप कुछ नियमों को अनदेखा कर सकते हैं या केवल विशिष्ट जांच चला सकते हैं।

उदाहरण: विशिष्ट नियमों की अनदेखी

cy.checkA11y(null, {
    rules: {
        'color-contrast': { enabled: false }
    }
});

उदाहरण: विशिष्ट जांच चलाना

cy.checkA11y(null, {
    runOnly: {
        type: 'tag',
        values: ['wcag2a', 'wcag2aa']
    }
});

अभिगम्यता उल्लंघनों को संभालना

आप उल्लंघनों को लॉग करने या संसाधित करने के लिए कॉलबैक फ़ंक्शन प्रदान करके पहुंच-योग्यता उल्लंघनों को संभाल सकते हैं। उदाहरण के लिए:

cy.checkA11y(null, null, (violations) => {
    violations.forEach((violation) => {
        cy.log(`${violation.id} - ${violation.description}`);
        violation.nodes.forEach((node) => {
            cy.log(`Node: ${node.target}`);
        });
    });
});

अभिगम्यता परीक्षण के लिए सर्वोत्तम अभ्यास

1. जल्दी एकीकृत करें: मुद्दों को जल्द पकड़ने के लिए विकास प्रक्रिया में पहुंच परीक्षण को जल्दी एकीकृत करें।
2. नियमित रूप से परीक्षण करें: चल रहे अनुपालन को सुनिश्चित करने के लिए अपने सीआई/सीडी पाइपलाइन के हिस्से के रूप में नियमित रूप से पहुंच परीक्षण चलाएं।
3. अपनी टीम को शिक्षित करें: अपनी विकास टीम को पहुंच संबंधी सर्वोत्तम प्रथाओं और दिशानिर्देशों के बारे में शिक्षित करें।
4. मैन्युअल परीक्षण का उपयोग करें: पहुंच के सभी पहलुओं को कवर करने के लिए स्वचालित और मैन्युअल परीक्षण को मिलाएं, क्योंकि स्वचालित उपकरण सब कुछ नहीं पकड़ सकते हैं।

निष्कर्ष

साइप्रस और साइप्रस-एक्स के साथ स्वचालित पहुंच परीक्षण यह सुनिश्चित करने का एक शक्तिशाली तरीका है कि आपके वेब एप्लिकेशन सभी उपयोगकर्ताओं के लिए पहुंच योग्य हैं। अपनी परीक्षण प्रक्रिया में पहुंच-योग्यता जांच को एकीकृत करके, आप समस्याओं की शीघ्र पहचान कर उन्हें ठीक कर सकते हैं, बेहतर उपयोगकर्ता अनुभव प्रदान कर सकते हैं और पहुंच-योग्यता मानकों का अनुपालन सुनिश्चित कर सकते हैं। अपने एप्लिकेशन को अधिक समावेशी और सुलभ बनाने के लिए इस गाइड में उल्लिखित सर्वोत्तम प्रथाओं का पालन करें।

खुश परीक्षण!