فاحص إمكانية الوصول في HTML

تعمل في المتصفح جديد التحقق

الصق HTML لصفحة أو مكوّن، وشغّل 30 قاعدة مؤتمتة مأخوذة من WCAG 2.2 وقواعد ACT من W3C: صور بلا بدائل نصية، وحقول نماذج بلا تسميات أو تسمياتها نص إرشادي (placeholder) فقط، وأزرار وروابط بلا اسم قابل للوصول، ونص روابط مبهم، ولغة صفحة وعنوان مفقودان أو غير صالحين، وعناوين فارغة أو بمستويات متخطاة، ومعرّفات مكررة ومراجع تسمية أو ARIA مكسورة، وأدوار غير صالحة، ومحتوى قابل للتركيز مخفيّ بـ aria-hidden، وtabindex موجب، وإطارات بلا عنوان، وجداول بلا ترويسات، وبنية القوائم، وأزرار اختيار غير مجمّعة، وتكبير محجوب، وتحديث موقوت، وصوت يعمل تلقائياً، ومعالجات نقر للفأرة فقط، وتباين النص الذي تُضبط ألوانه ضمن السطر. تُعرض كل مشكلة مع العنصر ومعيار WCAG وطريقة الإصلاح، تليها الفحوص التي ما زالت تحتاج إلى إنسان. يجري التحليل في متصفحك، ولا تُنفَّذ أي شيفرة في HTML.

الخصوصية: تعمل هذه الأداة بالكامل في متصفحك. لا تغادر بياناتك جهازك أبداً.

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

يتحقق اختبار إمكانية الوصول من قدرة الأشخاص ذوي الإعاقة على إدراك المنتج وفهمه والتنقل فيه وتشغيله — بلوحة المفاتيح أو قارئ الشاشة أو التكبير أو الترجمة النصية أو التحكم الصوتي. ويجمع بين الفحوصات الآلية بالقواعد، والجولات اليدوية بلوحة المفاتيح وقارئ الشاشة، والتقييم المنظّم مقابل معايير نجاح WCAG 2.2، لأن الأدوات وحدها لا تستطيع تحديد ما إذا كان المنتج قابلاً للوصول.

اقرأ الدليل: اختبار إمكانية الوصول

كيفية استخدام فاحص إمكانية الوصول في HTML

  1. انسخ HTML الصفحة: «عرض المصدر» لصفحة تُبنى على الخادم، أو لصفحة تبنيها JavaScript: أدوات المطوّر ← Elements ← انقر بزر الفأرة الأيمن على <html> ← Copy outerHTML. وتصلح شيفرة مكوّن واحد أيضاً.
  2. الصقها (أو اختر ملف ‎.html محفوظاً) واختر هدف التباين، AA أو AAA.
  3. اضغط «فحص إمكانية الوصول». ابدأ بصفوف FAIL في «المشكلات المكتشفة»؛ فكل منها يذكر طريقة إصلاحه.
  4. أنجز قائمة «ما زال يحتاج إلى فحص يدوي» بلوحة المفاتيح وقارئ شاشة — فهذه العوائق لا تظهر في الشيفرة.
  5. أعد الفحص بعد الإصلاح، واحتفظ بتقرير Markdown أو JSON مع أدلة الاختبار.

مزايا فاحص إمكانية الوصول في HTML

  • 30 قاعدة مؤتمتة من WCAG 2.2 وقواعد ACT من W3C، كل منها مربوطة بمعيار النجاح الخاص بها أو معلَّمة بأنها ممارسة فضلى
  • أسماء قابلة للوصول تُحسب من الشيفرة كما تفعل التقنيات المساعدة: aria-labelledby، ثم aria-label، ثم <label>، ثم alt، ثم legend، ثم المحتوى، ثم title وplaceholder
  • البدائل النصية، وتسميات النماذج، وأسماء الأزرار والروابط، ونص الروابط المبهم («اضغط هنا» و«اقرأ المزيد» — بالعربية والإنجليزية والهندية)، والعناوين، والمعرّفات والمراجع، وأدوار ARIA، وaria-hidden على محتوى قابل للتركيز
  • فحوص على مستوى الصفحة للمستندات الكاملة: اللغة، وdir="rtl" للعربية ولغات الكتابة من اليمين إلى اليسار، والعنوان، ومَعلم main، وh1، والتكبير، والتحديث الموقوت
  • نسبة تباين النص الذي تُضبط ألوانه ضمن السطر مقابل AA ‏(4.5:1 / 3:1) أو AAA ‏(7:1 / 4.5:1)، مع قواعد النص الكبير
  • نتائج لكل قاعدة (PASS وFAIL وWARN وN/A)، وكل مشكلة مع عنصرها وتفاصيلها وإصلاحها، والفحوص التي تحتاج إلى إنسان، وتقريران بصيغتي Markdown وJSON

مثال على فاحص إمكانية الوصول في HTML

صفحة هبوط عربية فيها أخطاء شائعة

الإدخال:

صفحة مثال: ‏<html lang="ar"> بلا dir، وviewport بقيمة maximum-scale=1، وصورة شعار بلا alt داخل رابط الصفحة الرئيسية، وزر قائمة بأيقونة فقط، وحقل بريد إلكتروني تسميته placeholder فقط، و‏label for="phone-number" يشير إلى id="phone"، وزرا اختيار بلا fieldset، و<div> قابل للنقر، وiframe بلا عنوان، ونص رمادي ‎#9aa0a6 على خلفية بيضاء

النتيجة:

10 إخفاقات و6 تحذيرات. FAIL: التكبير محدود (1.4.4) · صورة بلا alt ‏(1.1.1) · رابط بلا اسم (2.4.4) · زر بلا اسم (4.1.2) · 3 حقول بلا تسميات (1.3.1، 4.1.2) · ‏label for="phone-number" — لا عنصر بهذا المعرّف · iframe بلا عنوان · تباين 2.64:1 والمطلوب 4.5:1 ‏(1.4.3). WARN: ‏lang="ar" بلا dir="rtl" · تسمية بالنص الإرشادي فقط (3.3.2) · نص رابط «Read more» ‏(2.4.4) · h1 يليه h3 · مجموعة أزرار اختيار غير مجمّعة · div قابل للنقر لا يعمل بلوحة المفاتيح (2.1.1)

متى تستخدم فاحص إمكانية الوصول في HTML

  • فحص مكوّن أو قالب قبل مراجعة الشيفرة، دون تثبيت إضافة للمتصفح
  • فرز بلاغ عن مشكلة وصول: تأكيد تسمية مفقودة أو مرجع aria-labelledby مكسور في HTML المسلَّم
  • تعليم شكل إخفاقات WCAG الشائعة في الشيفرة، مع المعيار والإصلاح بجانب كل منها
  • مراجعة الصفحات العربية بحثاً عن سمتي اللغة والاتجاه اللتين يعتمد عليهما قارئ الشاشة والتخطيط

الأسئلة الشائعة حول فاحص إمكانية الوصول في HTML

هل يعني اجتياز هذه الفحوص أن صفحتي مطابقة لـ WCAG؟

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

ما القواعد التي يشغّلها الفاحص؟

30 قاعدة: البدائل النصية، وتسميات النماذج والتسمية بالنص الإرشادي فقط، وأسماء الأزرار والروابط، والغرض من الرابط، ولغة الصفحة وdir="rtl" للعربية، وعنوان الصفحة، والعناوين، والمعرّفات المكررة والمراجع المكسورة، وأدوار ARIA، وaria-hidden على محتوى قابل للتركيز، وtabindex الموجب، وعناوين الإطارات، وترويسات الجداول، وبنية القوائم، ومجموعات أزرار الاختيار، والتكبير، والتحديث الموقوت، والصوت التلقائي، ومعالجات النقر للفأرة فقط، والنص الوامض، وتباين الألوان المضبوطة ضمن السطر. كل منها مربوطة بمعيار نجاح في WCAG 2.2 أو معلَّمة بأنها ممارسة فضلى.

كيف يُفحص تباين الألوان؟

حين يكون لون النص ولون الخلفية مضبوطين كلاهما في سمات style ضمن السطر (على العنصر أو أحد أسلافه)، يحسب الفاحص نسبة التباين وفق WCAG ويقارنها بـ 4.5:1 (و3:1 للنص الكبير)، أو بـ 7:1 و4.5:1 في AAA. أما الألوان القادمة من ملفات الأنماط فلا تظهر في HTML وحده، لذلك تُعدّ تلك العناصر «لم تُقَس» لا «ناجحة».

هل يمكنني فحص صفحة تبنيها JavaScript؟

نعم: افتح الصفحة وانتظر حتى يكتمل عرضها، ثم في أدوات المطوّر انقر بزر الفأرة الأيمن على عنصر <html> في تبويب Elements واختر Copy ← Copy outerHTML، والصق الناتج. فخيار «عرض المصدر» لا يُظهر إلا HTML قبل تشغيل الشيفرات.

هل تُرسل شيفرة HTML إلى أي مكان؟

لا. يحلّلها محلّل HTML الخاص بمتصفحك في مستند خامل — لا تُنفَّذ فيه الشيفرات ولا تُحمَّل الصور — ولا يُرفع شيء.

ملاحظات تقنية

يحلّل محلّلُ HTML الخاص بالمتصفح (DOMParser) الشيفرةَ إلى مستند خامل: تُقرأ السمات غير المقتبسة ووسوم الإغلاق الضمنية وغيرها من شيفرات العالم الحقيقي كما يقرؤها المتصفح تماماً، ولا تُنفَّذ الشيفرات ولا تُحمَّل الصور. والعناصر المخفية بـ hidden أو aria-hidden="true" أو display:none أو visibility:hidden ضمن السطر مستبعدة من قواعد المحتوى المرئي.

تتبع الأسماء القابلة للوصول ترتيب حساب الاسم القابل للوصول في W3C بصورة مبسّطة: aria-labelledby، ثم aria-label، ثم التسمية الأصلية (<label for> أو <label> محيطة أو alt أو legend أو value)، ثم محتوى العنصر للأزرار والروابط والعناوين، ثم title، وللحقول النص الإرشادي — ويُبلَّغ عنه لأنه يختفي حين يكتب الزائر.

يستخدم التباين صيغة النصوع النسبي في WCAG. ولا يُحسب إلا حين يكون لون النص والخلفية مضبوطين كلاهما في أنماط ضمن السطر على العنصر أو أحد أسلافه، وتكون الخلفية لوناً مصمتاً؛ والنص كبير عند 24 بكسل، أو 18.66 بكسل إن كان عريضاً. وكل ما عدا ذلك يُعدّ «لم يُقَس»، لا ناجحاً.

الحدود ومنهجية القياس

لا تستطيع القواعد المؤتمتة أن تقرر هل الصفحة قابلة للوصول أو مطابقة لـ WCAG. فهي لا تحكم على معنى النص البديل، ولا تختبر سلوك لوحة المفاتيح والتركيز، ولا تسمع ما يقوله قارئ الشاشة.

ملفات الأنماط والتخطيط المحسوب والشيفرات لا تتوفر من HTML وحده، لذلك يُدرج التباين المضبوط في CSS، ووضوح التركيز، وإعادة التدفق عند 320 بكسل، وأحجام الأهداف، والتغييرات الديناميكية ضمن الفحوص اليدوية.

حساب الاسم القابل للوصول تبسيطٌ أمين للمواصفة، لا تغطية لكل حالاتها الطرفية (فمثلاً لا يُحسب المحتوى المولَّد بـ CSS ولا عناصر التحكم المضمَّنة داخل الأسماء).

الأمان والخصوصية

تُحلَّل شيفرة HTML وتُفحص في متصفحك؛ ولا يُرفع شيء. والمستند الذي يُبنى منها خامل: لا تُنفَّذ أي شيفرة فيه ولا يُطلب أي مورد يشير إليه.

المراجع

  • Web Content Accessibility Guidelines (WCAG) 2.2W3C · 2024توصية W3C التي تحدد معايير النجاح القابلة للاختبار لإتاحة محتوى الويب، مرتّبةً تحت أربعة مبادئ وثلاثة مستويات مطابقة (A وAA وAAA).
  • Evaluating Web Accessibility OverviewW3C Web Accessibility Initiative (WAI)مدخل W3C إلى تقييم إمكانية الوصول: لماذا يبدأ التقييم مبكراً ويستمر طوال التطوير، وكيف تتكامل الفحوص اليدوية والأدوات ومشاركة المستخدمين.
  • WCAG Evaluation Methodology (WCAG-EM) 2.0W3C · 2026منهجية W3C لتقييم موقع كامل وفق WCAG: تحديد النطاق، والاستكشاف، واختيار عيّنة ممثِّلة، وتدقيقها، ثم إعداد التقرير.