تصميم واجهات شركات سهلة الوصول والاستخدام

اجعل المهمة كاملة قابلة للإنجاز

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

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

ابدأ ببنية مفهومة

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

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

يوفر WCAG 2.2 معايير تشمل لوحة المفاتيح والتباين والتركيز وإعادة التدفق. حدد هدف المطابقة وافحص المعايير المنطبقة كاملة. تنفيذ أمثلة قليلة هنا لا يثبت مطابقة شاملة أو امتثالًا قانونيًا.

صمم حركة لوحة المفاتيح

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

عند فتح نافذة اعتماد، ينتقل التركيز إلى موضع مناسب داخلها، ويعود بعد إغلاقها إلى موضع مفهوم. يشرح نمط النافذة المشروطة في WAI-ARIA سلوك التركيز والمفاتيح المتوقع. إضافة دور ARIA إلى لوحة مرئية لا تنفذ هذا السلوك تلقائيًا.

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

اربط الخطأ بإجراء تصحيح

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

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

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

اختبر القراءة والاتجاه كوظيفة

• تحقق من تباين النصوص والعناصر في كل سمة مدعومة.
• اسمح بالتكبير والعرض الضيق دون إخفاء الأفعال الأساسية.
• أبقِ المحتوى المفيد متاحًا عند تقليل الحركة.
• لا تعتمد على اللون وحده لتوضيح الحالة.
• افحص ترتيب القراءة والتسميات العربية بصورة مستقلة.

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

اجمع الأدوات مع تجربة فعلية

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

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