معايير تصميم المواقع الإلكترونية: فحص الوصول إلى المحتوى

الخلاصة السريعة

ابدأ بمهمة للزائر، وافحص التنقل والقراءة وفهم الصور والمدخلات؛ ثم سجل ما يحتاج مراجعة أوسع.

• اختبر الوظائف بلوحة المفاتيح وراقب مؤشر التركيز؛ للوظائف المعتمدة على مسار الحركة استثناء محدد في المعيار. [1][2]
• التباين الأدنى للنص المعتاد 4.5:1، وللكبير وفق تعريف المعيار 3:1، مع استثناءات للشعارات وبعض النصوص غير الفعالة أو الزخرفية؛ لا تقرّب النسبة لاجتياز الحد. [3]
• وصف الصورة ينقل معلومتها؛ وللزخرفة وحدها بديل فارغ، أما الصورة الوظيفية فتصف وظيفتها. [4]
• وضح غرض الرابط والبيانات المطلوبة في الحقل؛ ويستثني معيار الروابط غرضًا غامضًا للمستخدمين عمومًا. [5][6]
• افحص إعادة التدفق عند عرض 320 بكسل CSS للمحتوى الرأسي بلا فقد معلومات أو وظائف؛ لبعض التخطيط الضروري ثنائي الأبعاد استثناء. [7]
• هذه فحوص أولية، وقد تبقى عوائق مهمة رغم اجتيازها؛ يلزم تقييم أشمل. [8]

التنقل: أين يوجد التركيز الآن؟

يشترط معيار لوحة المفاتيح إتاحة الوظائف عبرها، مع استثناء للوظيفة التي تعتمد على مسار الحركة نفسه. ويشترط معيار التركيز المرئي وجود نمط تشغيل يظهر فيه موضع التركيز. لا تختبر الوصول إلى الزر وحده؛ راقب كيف تعرف أنك وصلت. [1][2]

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

التباين: استخدم نسبة لا انطباعًا

يحدد معيار التباين الأدنى 4.5:1 للنص وصور النص، و3:1 للنص الكبير حسب تعريفه. وله استثناءات، منها الشعارات وبعض النصوص الزخرفية أو غير الفعالة. لا تخفض الحد لأنك ترى اللون جميلًا أو لأن الرقم قريب؛ الحد لا يقبل التقريب إلى النجاح. [3]

في مقارنة مؤلفة، نضع النص نفسه فوق خلفية بيضاء بلونين مختلفين. نحسب النسبة لكل لون ثم نسأل أيهما يحقق الشرط المعني. المقارنة تخص اللونين؛ لا تزعم أن بقية الصفحة اجتازت الفحص، ولا تغني عن فحص حالات العرض المختلفة.

الصورة: ما المعلومة التي يفقدها من لا يراها؟

تفرق إرشادات W3C بين صورة معلوماتية تحتاج وصفًا لمعلومتها الأساسية، وصورة للزينة وحدها يناسبها alt فارغ. وإذا استخدمت الصورة زرًا أو رابطًا، ينبغي أن يوضح بديلها الوظيفة بدل الاكتفاء بشكلها. [4]

في صفحة نشاط متخيلة، قد تحمل صورة جدول معلومة موعد، بينما يضيف خط مزخرف مظهرًا فقط. نسأل عن دور كل صورة على حدة. عبارة «صورة جميلة» لا تجيب عن سؤال موعد النشاط، واسم الملف وحده لا يشرح ما يحتاجه الزائر.

الروابط والنماذج: وضوح المقصود

ينبغي فهم مقصد الرابط من نصه أو مع سياقه القابل للتحديد برمجيًا، ويستثني المعيار غرضًا غامضًا للمستخدمين عمومًا. وفي المدخلات، تقدم التسميات أو التعليمات ما يوضح البيانات المتوقعة؛ صيغة خاصة للبيانات تحتاج إيضاحًا. [5][6]

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

الشاشة الضيقة وتكبير المحتوى

يطلب معيار إعادة التدفق عرض المحتوى الذي يمرر رأسيًا عند عرض 320 بكسل CSS بلا فقد للمعلومات أو الوظائف ولا حاجة للتمرير في اتجاهين. ويستثني أجزاء تتطلب تخطيطًا ثنائي الأبعاد لمعناها أو استعمالها، مثل بعض الخرائط والجداول؛ الاستثناء لا يعفي الصفحة كلها. [7]

جرب صفحة النشاط في مساحة ضيقة، ثم كبرها. هل ظل الموعد ظاهرًا؟ هل بقيت أسماء الحقول قريبة من مواضعها؟ دوّن ما شاهدته في الصفحة التي اختبرتها، ثم راجع تفاصيل المعيار قبل تحويل التجربة إلى حكم عام على الموقع.

ما الذي يثبته هذا الفحص؟

توضح W3C أن الفحوص السريعة تتناول جوانب قليلة فقط. قد تبدو الصفحة ناجحة فيها وتبقى عوائق وصول مهمة؛ تقييم الوصول الشامل يحتاج عملًا أوسع. [8]

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