التأكد من توافق عنصر رفع الملفات مع مبادئ التصميم الموحد (كود المنصات)
يطلب أن يبيّن عنصر رفع الملفات الصيغ المقبولة والحد الأقصى للحجم قبل المحاولة لا بعد تعذّرها، وأن يعرض حالة الرفع وتقدّمه، وأن يتيح الحذف وإعادة المحاولة.
وهو من المعايير الأساسية في فئة العناصر من دليل كود المنصات، نظام التصميم الموحد للمملكة، الصادر عن هيئة الحكومة الرقمية.
كيف تقيس الأداة هذا المعيار
يُقاس هذا المعيار من بنية الصفحة ومن قراءة لقطتها، ولذلك تكون الثقة فيه دون الثقة في القيمة المقروءة مباشرة، ويظهر ذلك في عرض النطاق.
وتشترك معايير العناصر في بنية واحدة: الالتزام بالتصميم الأساسي دون تعديل، ثم الحالات التفاعلية، ثم الحالات السياقية. ويُرصد كذلك العنصر المطابق شكلًا دون أي إشارة إلى مكتبة كود المنصات، إذ يدل ذلك على بناء يدوي منفصل عن المكتبة لا تصله تحديثاتها.
النص الرسمي ونقاط التحقق
يقوم هذا المعيار على ٥ من نقاط التحقق المنشورة في كود المنصات، وهي المرجع عند الحكم عليه.
صفحة هذا المعيار في الموقع الرسمي لكود المنصاتنقاط التحقق، نقطة نقطة
لكل نقطة من نقاط التحقق أدناه إجابة مستقلة: ما تشترطه، وما الذي يجتازها وما الذي يسقط فيها، وكيف تُقاس أو يُتحقق منها، وكيف تُعالَج. ولكل نقطة رابط مباشر يمكن مشاركته.
عنصر رفع الملفات: مطابقة الشكل والحواف واللون والمسافات
مقيس آليًاDGA-020-aتشترط هذه النقطة استدعاء عنصر رفع الملفات من مكتبة كود المنصات واستعماله بخصائصه المعتمدة دون تعديل على تصميمه الأساسي، وأخصّها هنا حدوده المتقطعة ومساحته ومواضع نصوصه وأيقونته. وتعديل أي منها يخرج العنصر عن المكتبة ولو بقي شبيهًا بها في المظهر.
تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.
ما الذي يجتازها: عنصر رفع مستدعى من المكتبة، مساحته كافية للإفلات وزر الاختيار داخله يبلغه التنقل بلوحة المفاتيح.
ما الذي يسقط فيها: عنصر رفع مبني يدويًا بحقل مخفي وزر مزيّف، فلا يبلغه التنقل بلوحة المفاتيح ولا يعلنه قارئ الشاشة.
كيف تُقاس أو يُتحقق منها: يُرصد حقل رفع الملفات بمحدد دلالي لا يخطئه، فحقول الرفع الأصلية لا تفوت الكاشف. وندرة نماذج الرفع في الصفحات العامة تجعل هذا المعيار لا ينطبق على أكثر المنصات، وذلك حكم صحيح لا نقص في الكشف.
كيف تُعالَج: ابنوا العنصر على حقل رفع دلالي واستدعوا شكله من المكتبة، فتبقى الوظيفة والمظهر معًا.
نقاط متصلة:عنصر رفع الملفات: الحالات التفاعلية (Default · Drag + hover · Disabled) ·عرض اسم الملف وصيغته وحالته وخيار الإزالة ·رسائل تعذّر الرفع وتجاوز الحجم والصيغة غير المدعومة
عنصر رفع الملفات: الحالات التفاعلية (Default · Drag + hover · Disabled)
يتحقق منه فريقكمDGA-020-bتشترط هذه النقطة أن يحمل عنصر رفع الملفات حالاته التفاعلية المعتمدة كاملة (Default · Drag + hover · Disabled) بالقيم المنصوص عليها في كود المنصات. وغياب حالة واحدة منها يمنع بلوغ التطبيق الكلي في المعيار.
لا تُقاس هذه النقطة آليًا، فحكمها يقتضي تفاعلًا مع الصفحة، وأخلاقيات الزحف تمنع التفاعل مع منصات الجهات.
ما الذي يجتازها: حالة السحب فوق المنطقة متمايزة بصريًا، وحالة التعطيل واضحة دون اعتماد على العتامة.
ما الذي يسقط فيها: منطقة إفلات لا تتغيّر عند السحب فوقها، فلا يعلم المستخدم أن الإفلات مقبول هنا.
كيف تُقاس أو يُتحقق منها: حالات التمرير والضغط والتركيز والتعطيل لا تُقرأ من صفحة ساكنة، فهي تحتاج تفاعلًا مع العنصر، وأخلاقيات الزحف تمنع التفاعل مع منصات الجهات. تحققوا منها بلوحة المفاتيح وحدها: انتقلوا إلى العنصر وارصدوا مؤشر التركيز، ثم مرّوا عليه بالمؤشر وارصدوا تغيّر الحالة.
كيف تُعالَج: أضيفوا تمييزًا بصريًا لحالة السحب، واستدعوا العنصر من المكتبة فتأتي حالاته الثلاث معه.
نقاط متصلة:عنصر رفع الملفات: مطابقة الشكل والحواف واللون والمسافات ·عنصر رفع الملفات: الحالات السياقية (Uploaded / Not Uploaded) ·عرض اسم الملف وصيغته وحالته وخيار الإزالة
عنصر رفع الملفات: الحالات السياقية (Uploaded / Not Uploaded)
يتحقق منه فريقكمDGA-020-cتشترط هذه النقطة أن يعبّر عنصر رفع الملفات عن حالته السياقية (Uploaded / Not Uploaded) بالشكل المعتمد في كود المنصات، وأن تكون الحالة مقروءة برمجيًا لا بصريًا وحدها. وهذه الحالة تظهر عند تحميل الصفحة دون تفاعل، فهي في متناول القياس.
لا تُقاس هذه النقطة آليًا، فحكمها يقتضي تفاعلًا مع الصفحة، وأخلاقيات الزحف تمنع التفاعل مع منصات الجهات.
ما الذي يجتازها: حالة الرفع مقروءة من الصفحة نصًا لا أيقونةً وحدها، فيعرف المستخدم أن الملف وصل.
ما الذي يسقط فيها: تغيّر لون الإطار وحده دلالةً على اكتمال الرفع، فلا يصل الخبر إلى قارئ الشاشة.
كيف تُقاس أو يُتحقق منها: تُقرأ حالة العنصر من بنية الصفحة عند التحميل. والحالة الفعلية بعد رفع ملف يتحقق منها فريقكم.
كيف تُعالَج: أعلنوا حالة الرفع نصًا مقروءًا، وأضيفوا منطقة حية تنطق بتغيّرها.
نقاط متصلة:عرض اسم الملف وصيغته وحالته وخيار الإزالة ·رسائل تعذّر الرفع وتجاوز الحجم والصيغة غير المدعومة ·عنصر رفع الملفات: الحالات التفاعلية (Default · Drag + hover · Disabled)
عرض اسم الملف وصيغته وحالته وخيار الإزالة
مقيس آليًاDGA-020-dتشترط هذه النقطة أن يعرض العنصر اسم الملف وصيغته وحالته، وأن يتيح خيار الإزالة بوضوح وبما يوافق كود المنصات. فالمستخدم يحتاج أن يعرف ماذا رفع وأن يتراجع عنه.
تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.
ما الذي يجتازها: قائمة بالملفات المرفوعة، لكل ملف اسمه وصيغته وحالته وزر إزالة يبلغه التنقل بلوحة المفاتيح.
ما الذي يسقط فيها: شريط تقدّم بلا اسم ملف، أو ملف مرفوع لا سبيل إلى إزالته إلا بإعادة تحميل الصفحة كلها.
كيف تُقاس أو يُتحقق منها: تُرصد عناصر قائمة الملفات وأزرار الإزالة بنيويًا بعد الرفع. وهذه النقطة يتحقق منها فريقكم.
كيف تُعالَج: أظهروا اسم الملف وصيغته وحالته نصًا، وأضيفوا زر إزالة لكل ملف على حدة.
نقاط متصلة:رسائل تعذّر الرفع وتجاوز الحجم والصيغة غير المدعومة ·عنصر رفع الملفات: الحالات السياقية (Uploaded / Not Uploaded) ·عنصر رفع الملفات: مطابقة الشكل والحواف واللون والمسافات
رسائل تعذّر الرفع وتجاوز الحجم والصيغة غير المدعومة
مقيس آليًاDGA-020-eتشترط هذه النقطة وجود رسائل توجيهية أو تحذيرية واضحة عند تعذّر الرفع أو تجاوز الحجم أو رفع صيغة غير مدعومة، مع بيان طريقة المعالجة. فالرسالة التي تقول إن شيئًا لم ينجح دون أن تقول ما الخطوة التالية رسالة ناقصة.
تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.
ما الذي يجتازها: رسالة تسمّي السبب وتذكر الحد المسموح أو الصيغ المقبولة، وتقترح الخطوة التالية.
ما الذي يسقط فيها: رسالة عامة لا تسمّي السبب، فيعيد المستخدم المحاولة بالملف نفسه.
كيف تُقاس أو يُتحقق منها: إظهار هذه الرسائل يقتضي رفع ملف مخالف، وأخلاقيات الزحف تمنع إرسال أي نموذج إلى منصات الجهات. فهذه النقطة يتحقق منها فريقكم.
كيف تُعالَج: اكتبوا لكل سبب رسالته: الحجم، والصيغة، وانقطاع الاتصال، وأضيفوا في كل واحدة الحد أو القائمة المسموحة.
نقاط متصلة:عرض اسم الملف وصيغته وحالته وخيار الإزالة ·صياغة رسائل الخطأ: ما المشكلة وما طريقة حلها ·وضوح الرسائل وإيجازها واتساق أسلوبها اللغوي
كيف تتحققون منه يدويًا
وهذه خطوات المراجعة الكاملة للمعيار، وبعضها أوسع مما تغطيه القاعدة الآلية اليوم.
- افحصوا وجود الصيغ والحد الأقصى مكتوبين قبل الرفع لا بعد تعذّره
- ارفعوا ملفًا وراقبوا ظهور اسمه وصيغته وحالته
- جرّبوا الحذف وإعادة المحاولة
- جرّبوا ملفًا يتجاوز الحد وانظروا نص الرسالة
أخطاء شائعة في هذا المعيار
| الخطأ | لماذا يضر |
|---|---|
| لا تُذكر الصيغ المقبولة ولا الحد الأقصى للحجم إلا بعد أن يتعذّر الرفع | |
| تغيب حالة التقدّم أثناء الرفع | فلا يعلم المستخدم أن العملية تجري أصلًا. |
| يتعذّر حذف الملف بعد رفعه | فيضطر المستخدم إلى إعادة الصفحة كلها. |
| تقول رسالة التعذّر إن الرفع لم يكتمل دون أن تسمّي السبب ولا الحل | |
| لا يظهر اسم الملف المرفوع ولا صيغته بعد اكتمال الرفع | فيتعذّر التأكد مما أُرسل. |
| عنصر يطابق الشكل بصريًا دون أي من إشارات مكتبة كود المنصات، وهو مؤشر على بناء يدوي منفصل عن المكتبة | فلا تصل إليه تحديثاتها. |
| غياب مؤشر تركيز مرئي واضح عند التنقل بلوحة المفاتيح | |
| مساحة لمس دون ٤٤ بكسل في العناصر التفاعلية | |
استخدام عنصر غير دلالي مكان العنصر الصحيح، مثل div بدل button |
كيف يُعالَج
- اكتبوا الصيغ المقبولة والحد الأقصى قبل الحقل نفسه لا في رسالة الخطأ.
- أظهروا اسم الملف وصيغته وحالته وتقدّمه طوال العملية.
- أتيحوا الحذف وإعادة الرفع دون مغادرة الصفحة.
- اجعلوا رسالة التعذّر تسمّي السبب والحد المتجاوَز والإجراء المطلوب.
- استدعوا العنصر من المكتبة، فيأتي بحالات الرفع المعتمدة مضبوطة.
معايير متصلة
وفي الدليل: كود المنصات figma · ما الذي يضمه ملف التصميم · حالات رفع الملفات معرّفة في ملف التصميم
أين تقف منصتكم من هذا المعيار؟
يصدر الفحص تقديرًا استرشاديًا خلال دقائق، ويبيّن لكل ملاحظة قيمتها المرصودة والمتوقعة وموضعها.