التصميم مع مراعاة إمكانية الوصول

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

إمكانية الوصول (accessibility) أرخص ما تكون وقت التصميم. فشل التباين يكلّف تغيير لون في Figma، ويكلّف أكثر بكثير بعد أن يُطلق عبر اثنتي عشرة شاشة. في هذا الدرس تُخضِع Steady للفحوص التي تجريها صوفيا قبل أي تسليم.

التباين، مرة أخرى، في كل مكان

تعلّمت الأرقام في الدرس 1.3 وأعدت فحصها في الوضع الداكن في الدرس 3.4. طبّقها الآن على الأشياء التي يسهل نسيانها:

• حدود عناصر التحكم: دائرة التعليم غير المعلَّمة مجرّد حلقة. تحتاج 3:1 مقابل سطح الصف، وإلا لن يجدها الناس.
• مؤشّرات التركيز: حلقة التركيز تحتاج 3:1 مقابل ما يحيط بها.
• الحالات المعطّلة: تعفي WCAG عناصر التحكم المعطّلة من شرط التباين، لكن الزر المعطّل الذي لا يستطيع أحد قراءته يترك الناس حائرين فيما لا يستطيعون فعله. أبقِ التسمية مقروءة.
• النص فوق الصور أو الرسوم التوضيحية: قِس مقابل أفتح جزء من الصورة تحت النص.

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

لا تعتمد على اللون وحده أبدًا

أظهر التصميم الأول لـ Steady العادة الفائتة بدائرة تعليم حمراء ولا شيء غيرها. لمن لا يميّز الأحمر من التركوازي، تبدو كل العادات متشابهة. معيار Use of Color في WCAG يشترط ألّا يكون اللون الطريقة الوحيدة لنقل المعنى أبدًا.

الإصلاح إشارة ثانية: يحصل الـ variant ‏Missed على أيقونة x داخل الدائرة وعلى تعليق “Missed yesterday” تحت الاسم؛ ويحصل Done على علامة صحّ والاسم بلون النص الثانوي. ما زال اللون يساعد، لكن الشكل والكلمات يحملان المعنى. اختبر ذلك بعرض الشاشة بتدرّجات الرمادي (grayscale): إن ظللت قادرًا على التمييز بين الحالات، فقد نجحت.

أهداف كبيرة بما يكفي للإبهام

تضع WCAG 2.2 حدًّا أدنى في المستوى AA: أهداف تفاعلية لا تقلّ عن 24 × 24 CSS pixels، أو مسافة كافية حول الأهداف الأصغر. وإرشادات المنصّات تذهب أبعد من أجل الراحة: توصي Apple بـ 44 × 44 نقطة، ويوصي Material Design بـ 48 × 48 dp. في تطبيق الهاتف، صمّم وفق إرشادات المنصّة.

الشكل المرئي ومساحة النقر لا يلزم أن يتطابقا. دائرة التعليم في Steady تبقى بصريًا دائرة بقطر 32 px، لكن الـ component ‏Check button هو frame بحجم 44 × 44 تتوسّطه الدائرة. وحدود الـ frame تخبر المطوّرين بمساحة النقر الحقيقية.

ترتيب التركيز وحالات التركيز

من يستخدمون لوحة المفاتيح أو switch control أو قارئ الشاشة يتنقّلون في الشاشة عنصرًا تلو الآخر. قراران تصميميان يؤثّران فيهم مباشرة.

حالات التركيز. كل component تفاعلي يحتاج نمط تركيز مرئيًا، عادةً حلقة بسماكة 2 px بلون يحقّق 3:1. أضف Focused إلى خاصية State في Button وChip وText field وCheck button، فتكون موجودة في المجموعة لا فكرة لاحقة.

ترتيب التركيز. يجب أن يتبع الترتيب ترتيب القراءة البصري: في لوحة New habit، هو زر الإغلاق، ثم حقل الاسم، ثم منتقي الأيقونات، ثم شرائح التكرار، ثم مفتاح التذكير، ثم Save habit. عادةً يضبط المطوّرون ذلك افتراضيًا إذا كان التخطيط منطقيًا؛ أما حين يكون تخطيطك غير معتاد، فدوّن الترتيب بعلامات مرقّمة. ملاحظات Figma التوضيحية (annotations) تتضمّن فئة Accessibility وقت كتابة هذا الدرس، فتبقى هذه الملاحظات منفصلة عن مواصفات المسافات (الدرس 4.3).

الأسماء والتسميات وحجم النص

قارئات الشاشة تعلن العناصر بأسمائها. زر الإضافة الذي يحمل أيقونة فقط سيُقرأ “button” ما لم يعطه أحدهم اسمًا، فدوّن ذلك: accessible name: “Add habit”. وحقل النص يحتاج تسمية ظاهرة، “Habit name”، لا نصًا إرشاديًا فقط يختفي حين تبدأ الكتابة.

وأخيرًا، تذكّر اختبار النص الأكبر بنسبة 30% من الدرس 2.4. يتيح كلٌّ من iOS وAndroid للناس تكبير النص على مستوى النظام كله. الصفوف المبنية بارتفاع Hug ونصوص Auto height تكبر بسلاسة؛ وأي شيء بارتفاع ثابت يُقصّ. ويدخل هنا أيضًا احترام إعداد تقليل الحركة (reduced motion): دوّن تلاشيًا أبسط كبديل لاحتفال الـ streak.

مع فحص الشاشات وتدوين الملاحظات عليها، صارت شبه جاهزة للمطوّرين. في الدرس التالي تسلّمها في Dev Mode.