مقدمة

تعد إمكانية الوصول جانبًا مهمًا في تطوير الويب، مما يضمن أن جميع المستخدمين، بما في ذلك الأشخاص ذوي الإعاقة، يمكنهم التفاعل مع تطبيقات الويب الخاصة بك بشكل فعال. يساعد اختبار إمكانية الوصول التلقائي في تحديد مشكلات إمكانية الوصول وإصلاحها في وقت مبكر من عملية التطوير. في هذا المنشور، سنستكشف كيفية تنفيذ اختبار إمكانية الوصول الآلي باستخدام Cypress، والاستفادة من أدوات مثل cypress-axe لجعل تطبيقاتك أكثر شمولاً.

لماذا تعتبر إمكانية الوصول مهمة؟

1. الامتثال القانوني: يضمن أن تطبيقك يلبي المتطلبات القانونية مثل قانون الأمريكيين ذوي الإعاقة (ADA) وإرشادات الوصول إلى محتوى الويب (WCAG).
2. تجربة المستخدم: تعمل على تحسين تجربة المستخدم الشاملة لجميع المستخدمين، بما في ذلك الأشخاص ذوي الإعاقة.
3. الشمولية: يُظهر الالتزام بالشمولية والتنوع، مما يجعل طلبك في متناول جمهور أوسع.
4. فوائد تحسين محركات البحث: يعمل على تحسين محرك البحث، حيث تفضل محركات البحث مواقع الويب التي يمكن الوصول إليها.

إعداد اختبار إمكانية الوصول الآلي في السرو

لإجراء اختبار إمكانية الوصول الآلي في Cypress، سنستخدم المكون الإضافي cypress-ax، الذي يدمج محرك إمكانية الوصول Ax مع Cypress.

الخطوة 1: تثبيت فأس السرو والسرو
أولاً، تأكد من تثبيت Cypress في مشروعك. إذا لم يكن الأمر كذلك، فيمكنك تثبيته باستخدام الأمر التالي:

npm install cypress --save-dev

بعد ذلك، قم بتثبيت البرنامج المساعد cypress-axe:

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 للتحقق من إمكانية الوصول إلى صفحة الويب. قم بإنشاء ملف جديد في دليل 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. الاختبار بانتظام: قم بإجراء اختبارات إمكانية الوصول بانتظام كجزء من مسار CI/CD الخاص بك لضمان الامتثال المستمر.
3. قم بتثقيف فريقك: قم بتثقيف فريق التطوير الخاص بك حول أفضل ممارسات وإرشادات إمكانية الوصول.
4. استخدام الاختبار اليدوي: اجمع بين الاختبار الآلي واليدوي لتغطية جميع جوانب إمكانية الوصول، لأن الأدوات الآلية قد لا تكتشف كل شيء.

خاتمة

يعد اختبار إمكانية الوصول الآلي باستخدام Cypress وcypress-axe وسيلة قوية لضمان إمكانية الوصول إلى تطبيقات الويب الخاصة بك لجميع المستخدمين. من خلال دمج عمليات التحقق من إمكانية الوصول في عملية الاختبار الخاصة بك، يمكنك تحديد المشكلات وإصلاحها مبكرًا، مما يوفر تجربة مستخدم أفضل وضمان الامتثال لمعايير إمكانية الوصول. اتبع أفضل الممارسات الموضحة في هذا الدليل لجعل تطبيقاتك أكثر شمولاً وسهولة في الوصول إليها.

اختبار سعيد!