المراجعة البصرية: الأعمدة والنصوص والصور على مختلف الشاشات
قد تكون الصفحة صعبة القراءة حتى دون تجاوز حدود الشاشة. راجع النسب والمحتوى الطويل والتفاعلات قبل نشر أي تعديل.
ستة فحوص قابلة للتكرار
اختيار صفحات ممثلة
اختبر الرئيسية والفئة والمقال والخدمة والنموذج والجدول. أضف عنواناً طويلاً ولغة تُكتب من اليمين إلى اليسار وصفحة تحتوي على صور متعددة.
مقارنة الأعمدة
افحص عروض 320 و390 و768 و1280 و1440 و1920 px. راجع المحاذاة وترتيب القراءة والمسافات. لا تُخفِ عيوب التخطيط بإخفاء تجاوز المحتوى.
تكبير النص
اختبر النص عند 200 % وإعادة ترتيب المحتوى بعرض 320 بكسل CSS. يجب بقاء المعلومات وعناصر التحكم متاحة؛ يمكن للجداول استخدام تمرير مستقل.
فحص الصور
راجع الاقتصاص والموضوع والأبعاد ونسبة الصورة إلى مصورها. لا تمدد الصورة حسب طول النص المجاور. صف المحتوى المرئي وعرّف الصور المأخوذة من مكتبات الصور.
تجربة التفاعلات
استخدم لوحة المفاتيح للقوائم والمرشحات والأسئلة والنماذج. افحص التركيز المرئي والأخطاء والاحتفاظ بالمدخلات دون إرسال طلب حقيقي.
حفظ الأدلة
سجل URL واللغة والعرض والمتصفح والعيب ونتيجة التصحيح. أكمل القياسات المختبرية ببيانات المستخدمين عند توفر زيارات كافية.
سجل المراجعة
- URL واللغة
- الشاشة ومستوى التكبير
- العيب ولقطة الشاشة
- التصحيح ونتيجة الفحص المتكرر
هذه طريقة عمل وليست شهادة مطابقة. عدّل نطاق الفحص ووثّق الاستثناءات.
قبل النشر: ستة فحوص وظيفية
- تتبّع القوائم والروابط والتنزيلات وتبديل اللغة؛ تحقّق من الوجهة الفعلية.
- استخدم بيانات وهمية: حقول فارغة وعناوين غير صحيحة ونصوص طويلة وأحرف متنوعة.
- تحقّق من أن الأخطاء تحدد الحقل وتعمل بلوحة المفاتيح وتحافظ على المدخلات المفيدة.
- اختبر التحقق على الخادم أيضًا؛ يمكن تجاوز فحوص المتصفح.
- ميّز بين إشعار الاستلام والتسليم الفعلي؛ استخدم وجهة اختبار مصرحًا بها.
- افحص العمل دون JavaScript والرفض والاستئناف؛ لا تحفظ أسرارًا في الأدلة.
الحالات والفحوص المناسبة
على الشاشات الصغيرة، مرّر الجدول أفقيًا. باستخدام لوحة المفاتيح، انقل التركيز إلى الجدول واستخدم الأسهم.
| الحالة | ما تدل عليه | التحقق المفيد |
|---|---|---|
| يختفي عنصر تحكم عند تكبير النص إلى 200٪. | لا تبقى المهمة متاحة بعد التكبير. | عدّل التخطيط وأعد الاختبار بلوحة المفاتيح. |
| تتمدد صورة أو تترك فراغًا كبيرًا على الحاسوب. | تخل نسبها بتوازن المحتوى المجاور. | افحص حدود الحجم وترتيب القراءة. |
| يقص overflow: hidden جدولًا. | تُحجب بيانات. | امنح الجدول تمريرًا خاصًا متاحًا بلوحة المفاتيح وخلايا يلتف فيها النص. |
| يُقص عنوان مترجم في لغة أخرى. | اختبار لغة واحدة غير كافٍ. | اختبر النصوص الطويلة ولغات RTL وتغيير اللغة الفعلي. |
مثال افتراضي
تبدو صفحة خدمة افتراضية سليمة بعرض 1,440 بكسل. عند 320 يُقص عنوانها المترجم الطويل؛ وعند تكبير النص إلى 200٪ يصبح عنصر أسئلة شائعة غير متاح.
قيّد حجم الصورة واسمح بتقلص الأعمدة والتفاف النص. كرر المهمة عند 320 و390 و768 و1,440 بكسل مع تكبير النص والتنقل بلوحة المفاتيح. سجّل العيوب المتبقية وأعد الفحص بعد الإصلاح.
معايير القبول
- المعلومات وعناصر التحكم مقروءة في عروض ولغات ممثلة.
- يسمح تكبير النص ولوحة المفاتيح بإكمال المهمة.
- تم تسجيل النسخة والمتصفح واللغة ونتائج إعادة الاختبار.
أسئلة عملية
هل تكفي لقطة شاشة؟
لا. تعرض حالة واحدة فقط. اختبر المحتوى الطويل ولوحة المفاتيح والحالات المفتوحة والمصفاة وحالات الخطأ.
هل يوجد حجم خط مناسب للجميع؟
لا. قيّم وضوح القراءة وطول السطر والتكبير والتباين. الحجم وحده لا يضمن الإتاحة أو التوازن البصري.
كيف تُفسر Core Web Vitals؟
حدود التجربة الجيدة هي LCP ≤ 2.5 s وINP ≤ 200 ms وCLS ≤ 0.1 عند المئين 75. تقيس التحميل والتفاعل والاستقرار، ولا تستبدل المراجعة البصرية.
هل نحتاج لقطة لكل جهاز محتمل؟
اختر عائلات الصفحات الرئيسية والمهام المفيدة والمتصفحات التي ظهرت فيها فروق. سجّل حدود التغطية؛ لا تثبت بضع لقطات عمل جميع الأجهزة.
كيف نرتب إصلاحات العرض؟
عالج أولًا المهام المعطلة والبيانات المحجوبة وقابلية القراءة. ثم حسّن النسب والمحاذاة والمسافات مع التحقق من عمل الصفحات الأخرى.