HTML Academy · درس

Pa11y وaxe لاختبار إمكانية الوصول

أتمتة فحوصات إمكانية الوصول باستخدام pa11y وaxe-core

Pa11y وaxe لاختبار إمكانية الوصول درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.

أدوات إمكانية الوصول الآلية

Pa11y وaxe-core أداتان مفتوحا المصدر لأتمتة اختبار إمكانية الوصول المتوافق مع WCAG. تحلل كلتاهما الصفحة، وتطبقان القواعد على DOM، وتبلغان عن الانتهاكات. اكشف الجزء الأكبر من مشكلات إمكانية الوصول آليًا، وخصص الاختبار اليدوي للمشكلات المتبقية.

axe-core: المكتبة

axe-core مكتبة JavaScript تدعم عمليات تدقيق إمكانية الوصول في Chrome DevTools وLighthouse وJest وCypress وPlaywright والعديد من الأدوات الأخرى. وهي المعيار الفعلي لاختبار إمكانية الوصول الآلي، بفضل تغطيتها الواسعة للقواعد وانخفاض معدل الإيجابيات الكاذبة فيها.

إضافة متصفح axe

تضيف إضافة متصفح axe DevTools (في Chrome وFirefox وEdge) علامة تبويب "Accessibility" إلى DevTools. انقر على "Scan all pages" لتعرض الإضافة كل انتهاك مع العناصر المتأثرة، ودرجة الخطورة، وإرشادات المعالجة. وهي مناسبة للتدقيقات الفردية أثناء التطوير.

Pa11y CLI

Pa11y أداة CLI لـ Node.js: تدقق npx pa11y https://example.com عنوان URL. وتطبع قائمة بالمشكلات في الطرفية. استخدمها لإجراء التدقيقات السريعة، أو في البرامج النصية للصدفة، أو لدمجها في CI بتكلفة منخفضة.

npx pa11y https://example.com
# or for multiple pages
npx pa11y-ci --sitemap https://example.com/sitemap.xml

دمج axe مع Playwright

اجمع axe-core مع Playwright لاختبار إمكانية الوصول من البداية إلى النهاية: const results = await new AxeBuilder({ page }).analyze(). أكّد أن results.violations.length === 0. وبذلك تُكتشف التراجعات قبل وصولها إلى بيئة الإنتاج.

import { test, expect } from "@playwright/test";
import AxeBuilder from "@axe-core/playwright";

test("home page accessibility", async ({ page }) => {
  await page.goto("/");
  const results = await new AxeBuilder({ page }).analyze();
  expect(results.violations).toEqual([]);
});

jest-axe للمكوّنات

يشغّل jest-axe أداة axe على المكوّنات التي جرى تصييرها ضمن اختبارات Jest. صَيِّر المكوّن باستخدام React Testing Library، ثم مرّر الحاوية إلى axe: expect(await axe(container)).toHaveNoViolations(). يتضمن اختبار كل مكوّن الآن فحصًا لإمكانية الوصول.

إعداد القواعد

تتيح كلتا الأداتين تعطيل القواعد أو تعديلها لكل مشروع: عطّل القواعد التي تتعارض مع قرارات تصميم مقصودة، وزد صرامة القواعد المعروفة بأهميتها. وثّق كل قاعدة معطلة بتعليق يشرح السبب؛ فهذا سياق يحتاج إليه المطورون مستقبلًا.

حدود الأتمتة

تكشف الأدوات الآلية نحو 30–40٪ من مشكلات WCAG. أما البقية، مثل ترتيب التركيز ذي المعنى، والنص البديل القابل للقراءة، والتسلسل الهرمي الدلالي للعناوين، واستخدام ARIA بما يعكس سلوك واجهة المستخدم الفعلي، فتتطلب مراجعة بشرية. الأتمتة ضرورية، لكنها غير كافية لضمان إمكانية الوصول.

اختبار تقنيات المساعدة الفعلية

اختبر باستخدام NVDA على Windows، وVoiceOver على Mac، وJAWS لجمهور المؤسسات. يكشف اختبار قارئ الشاشة الفعلي مشكلات لا تستطيع الأتمتة اكتشافها، مثل الإعلانات المربكة، والمعالم المعطلة، وترتيب التركيز غير المنطقي. ويُعد إجراء الاختبار مرة واحدة لكل إصدار على كل قارئ شاشة رئيسي خط أساس معقولًا.

اختبار المستخدمين

تأتي أكثر عمليات التحقق قيمة لإمكانية الوصول من مستخدمين ذوي إعاقة يستعملون المنتج الفعلي. استقطب المشاركين عبر استشارات إمكانية الوصول، أو خدمات دعم ذوي الإعاقة في الجامعات، أو منصات الاختبار مثل UserTesting.com. تكشف ملاحظاتهم الواقعية مشكلات لا تظهرها أي أداة آلية.

استراتيجية دمج CI

امنع طلبات السحب عند حدوث تراجعات في إمكانية الوصول (انتهاكات جديدة)، لا عند وجود انتهاكات قديمة (خط الأساس الحالي). يحافظ ذلك على رفع المستوى باستمرار من دون تعطيل الشحن. تتبع إجمالي عدد الانتهاكات بمرور الوقت بوصفه مؤشرًا مبكرًا على الحالة العامة لإمكانية الوصول.

جمع الأدوات

استخدم عدة أدوات: axe للفحص الآلي الشامل، وPa11y للحصول على رأي ثانٍ، واختبار قارئ الشاشة يدويًا لسد الفجوة النوعية. التداخل بينها محدود؛ وباستخدامها معًا تغطي مشكلات أكثر مما تستطيع أي أداة منفردة اكتشافه.

اختبار المعرفة

ما النسبة المئوية من مشكلات إمكانية الوصول وفق WCAG التي يمكن لأدوات آلية مثل axe وPa11y اكتشافها بشكل موثوق؟

الخلاصة

يدعم axe-core معظم عمليات تدقيق إمكانية الوصول؛ وتناسب إضافة المتصفح الفحوص الفردية، بينما تناسب عمليات دمج jest-axe وPlaywright الاختبار المستمر. وتُعد Pa11y أداة CLI مكملة. تكشف الأتمتة نحو 30–40٪ من المشكلات؛ لذا اجمعها مع الاختبار اليدوي لقارئات الشاشة (NVDA وVoiceOver) واختبار المستخدمين ذوي الإعاقة الفعليين لتوفير تغطية كاملة. امنع التراجعات الجديدة في CI من دون تعطيل العمل بسبب خط الأساس القديم.

الأسئلة الشائعة

هل درس «Pa11y وaxe لاختبار إمكانية الوصول» مجاني؟

نعم — نص درس «Pa11y وaxe لاختبار إمكانية الوصول» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.

ماذا ستتعلم في «Pa11y وaxe لاختبار إمكانية الوصول»؟

أتمتة فحوصات إمكانية الوصول باستخدام pa11y وaxe-core تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟

لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «Pa11y وaxe لاختبار إمكانية الوصول»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟

نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى HTML Academy