نحو رجل من كل اثني عشر لديه شكل من أشكال قصور رؤية الألوان. وكثيرون يستخدمون هواتفهم بنص أكبر، أو بقارئ شاشة، أو بإبهام واحد مرتجف في حافلة، أو تحت شمس ساطعة. لا أحد من هؤلاء حالة هامشية؛ إنهم معًا نسبة كبيرة من مستخدمي Steady، ومعظم ما يساعدهم يجعل التطبيق أفضل للجميع.
\nإمكانية الوصول (accessibility) أرخص ما تكون وقت التصميم. فشل التباين يكلّف تغيير لون في Figma، ويكلّف أكثر بكثير بعد أن يُطلق عبر اثنتي عشرة شاشة. في هذا الدرس تُخضِع Steady للفحوص التي تجريها صوفيا قبل أي تسليم.
\nتعلّمت الأرقام في الدرس 1.3 وأعدت فحصها في الوضع الداكن في الدرس 3.4. طبّقها الآن على الأشياء التي يسهل نسيانها:
\nأداة فحص التباين في منتقي الألوان في Figma تغطّي الأزواج المنفردة أثناء العمل. وفي خطتي Organization وEnterprise، وقت كتابة هذا الدرس، تستطيع ميزة Check designs أيضًا الإشارة إلى مشكلات التباين عبر تحديد كامل.
\nأظهر التصميم الأول لـ Steady العادة الفائتة بدائرة تعليم حمراء ولا شيء غيرها. لمن لا يميّز الأحمر من التركوازي، تبدو كل العادات متشابهة. معيار Use of Color في WCAG يشترط ألّا يكون اللون الطريقة الوحيدة لنقل المعنى أبدًا.
\nالإصلاح إشارة ثانية: يحصل الـ variant Missed على أيقونة x داخل الدائرة وعلى تعليق “Missed yesterday” تحت الاسم؛ ويحصل Done على علامة صحّ والاسم بلون النص الثانوي. ما زال اللون يساعد، لكن الشكل والكلمات يحملان المعنى. اختبر ذلك بعرض الشاشة بتدرّجات الرمادي (grayscale): إن ظللت قادرًا على التمييز بين الحالات، فقد نجحت.
\nتضع WCAG 2.2 حدًّا أدنى في المستوى AA: أهداف تفاعلية لا تقلّ عن 24 × 24 CSS pixels، أو مسافة كافية حول الأهداف الأصغر. وإرشادات المنصّات تذهب أبعد من أجل الراحة: توصي Apple بـ 44 × 44 نقطة، ويوصي Material Design بـ 48 × 48 dp. في تطبيق الهاتف، صمّم وفق إرشادات المنصّة.
\nالشكل المرئي ومساحة النقر لا يلزم أن يتطابقا. دائرة التعليم في Steady تبقى بصريًا دائرة بقطر 32 px، لكن الـ component Check button هو frame بحجم 44 × 44 تتوسّطه الدائرة. وحدود الـ frame تخبر المطوّرين بمساحة النقر الحقيقية.
\nمن يستخدمون لوحة المفاتيح أو switch control أو قارئ الشاشة يتنقّلون في الشاشة عنصرًا تلو الآخر. قراران تصميميان يؤثّران فيهم مباشرة.
\nحالات التركيز. كل component تفاعلي يحتاج نمط تركيز مرئيًا، عادةً حلقة بسماكة 2 px بلون يحقّق 3:1. أضف Focused إلى خاصية State في Button وChip وText field وCheck button، فتكون موجودة في المجموعة لا فكرة لاحقة.
ترتيب التركيز. يجب أن يتبع الترتيب ترتيب القراءة البصري: في لوحة New habit، هو زر الإغلاق، ثم حقل الاسم، ثم منتقي الأيقونات، ثم شرائح التكرار، ثم مفتاح التذكير، ثم Save habit. عادةً يضبط المطوّرون ذلك افتراضيًا إذا كان التخطيط منطقيًا؛ أما حين يكون تخطيطك غير معتاد، فدوّن الترتيب بعلامات مرقّمة. ملاحظات Figma التوضيحية (annotations) تتضمّن فئة Accessibility وقت كتابة هذا الدرس، فتبقى هذه الملاحظات منفصلة عن مواصفات المسافات (الدرس 4.3).
\nقارئات الشاشة تعلن العناصر بأسمائها. زر الإضافة الذي يحمل أيقونة فقط سيُقرأ “button” ما لم يعطه أحدهم اسمًا، فدوّن ذلك: accessible name: “Add habit”. وحقل النص يحتاج تسمية ظاهرة، “Habit name”، لا نصًا إرشاديًا فقط يختفي حين تبدأ الكتابة.
\nوأخيرًا، تذكّر اختبار النص الأكبر بنسبة 30% من الدرس 2.4. يتيح كلٌّ من iOS وAndroid للناس تكبير النص على مستوى النظام كله. الصفوف المبنية بارتفاع Hug ونصوص Auto height تكبر بسلاسة؛ وأي شيء بارتفاع ثابت يُقصّ. ويدخل هنا أيضًا احترام إعداد تقليل الحركة (reduced motion): دوّن تلاشيًا أبسط كبديل لاحتفال الـ streak.
\n\nمع فحص الشاشات وتدوين الملاحظات عليها، صارت شبه جاهزة للمطوّرين. في الدرس التالي تسلّمها في Dev Mode.
\n","toc":[{"id":"sec-1","text":"التباين، مرة أخرى، في كل مكان","level":2},{"id":"sec-2","text":"لا تعتمد على اللون وحده أبدًا","level":2},{"id":"sec-3","text":"أهداف كبيرة بما يكفي للإبهام","level":2},{"id":"sec-4","text":"ترتيب التركيز وحالات التركيز","level":2},{"id":"sec-5","text":"الأسماء والتسميات وحجم النص","level":2}],"takeaways":["يجب ألّا يعتمد المعنى على اللون وحده أبدًا؛ اقرن اللون بأيقونة أو نص أو تغيير في الشكل.","يطلب المستوى AA في WCAG 2.2 أهداف لمس لا تقلّ عن 24 × 24 CSS pixels، بينما توصي Apple بـ 44 نقطة وGoogle بـ 48 dp، فصمّم وفق إرشادات المنصّة.","يمكن أن تكون مساحة النقر للهدف أكبر من شكله المرئي، وهذا يتيح لدائرة تعليم بقطر 32 px أن تقع داخل مساحة نقر 44 px.","كل عنصر تفاعلي يحتاج حالة تركيز (focus) مرئية، ويجب أن يتبع ترتيب التركيز ترتيب القراءة الذي تدوّنه.","الأزرار التي تحمل أيقونة فقط تحتاج accessible name (اسمًا يعلنه قارئ الشاشة)، والحقول تحتاج تسميات ظاهرة، وكلاهما ينتمي إلى ملاحظات التسليم."],"further":[{"title":"Understanding SC 1.4.1 Use of Color","url":"https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html"},{"title":"Understanding SC 2.5.8 Target Size (Minimum)","url":"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html"},{"title":"Accessibility (Apple Human Interface Guidelines)","url":"https://developer.apple.com/design/human-interface-guidelines/accessibility"},{"title":"Accessibility designing (Material Design 3)","url":"https://m3.material.io/foundations/designing/structure"}],"quiz":[{"q":"يعلّم Steady العادة الفائتة بتحويل دائرة التعليم في الصف إلى الأحمر. ولا يتغيّر شيء آخر. ماذا يطلب منك معيار Use of Color في WCAG أن تضيف؟
","options":[{"text":"أحمر أسطع ليبرز أكثر.","why":"أيّ أحمر، مهما كان ساطعًا، يبقى لونًا وحده. ومن لديهم قصور في رؤية الألوان قد لا يميّزونه عن التركوازي أو الرمادي."},{"text":"تلميح (tooltip) يظهر عند تمرير المؤشّر.","why":"الهواتف لا تعرف تمرير المؤشّر، ويجب أن يكون المعنى ظاهرًا دون خطوات إضافية."},{"text":"إشارة ثانية لا تعتمد على اللون، مثل أيقونة x داخل الدائرة وكلمة “Missed” تحت الاسم.","why":"صحيح. يمكن للّون أن يدعم المعنى، لكن يجب أن يحمله شكل أو نص أيضًا."},{"text":"لا شيء، لأن الأحمر يُفهم عالميًا على أنه تحذير.","why":"معنى الأحمر ثقافي، وكثيرون لا يستطيعون رؤيته بشكل موثوق. المعيار يطلب إشارة لا تعتمد على اللون."}],"answer":2},{"q":"دائرة التعليم مرسومة بحجم 32 × 32 px. كيف تحقّق توصية Apple بـ 44 نقطة دون أن تبدو أكبر؟
","options":[{"text":"اجعل الـ component Check button frame بحجم 44 × 44 تتوسّطه الدائرة بقطر 32 px.","why":"صحيح. حدود الـ component تصبح مساحة النقر، والمطوّرون ينفّذون مساحة النقر الأكبر منها."},{"text":"كبّر الدائرة إلى 44 px.","why":"هذا يحقّق الحجم لكنه يغيّر التصميم البصري. يمكنك الحصول على الأمرين بـ frame أكبر غير مرئي."},{"text":"اتركها، لأن 32 px تتجاوز بالفعل الحدّ الأدنى في WCAG وهو 24 px.","why":"تتجاوز الحدّ الأدنى للمستوى AA، لكن إرشادات المنصّة للنقر المريح أكبر، وSteady تطبيق هاتف."},{"text":"أضف ملاحظة تطلب من المطوّرين تسهيل النقر عليها.","why":"الملاحظة المبهمة تترك الحجم للتخمين. بناء مساحة النقر داخل الـ component يجعلها دقيقة."}],"answer":0},{"q":"مستخدم يعتمد على لوحة المفاتيح أو على switch control يتنقّل في لوحة New habit. أيّ مُخرَج تصميمي يساعد المطوّرين على ضبط الترتيب بشكل صحيح؟
","options":[{"text":"حجم خط أكبر لعنوان اللوحة.","why":"الحجم يؤثّر في التسلسل البصري، لا في الترتيب الذي ينتقل به التركيز."},{"text":"نسخة من اللوحة بالوضع الداكن.","why":"الـ modes تغيّر الألوان، لا ترتيب التنقّل."},{"text":"انتقال Smart animate بين الحقول.","why":"الحركة لا تخبر أحدًا أيّ عنصر يتلقّى التركيز تاليًا."},{"text":"ملاحظات مرقّمة لترتيب التركيز على اللوحة، مع حالة تركيز مصمّمة لكل عنصر تحكم.","why":"صحيح. يرى المطوّرون الترتيب المقصود ويعرفون بالضبط كيف يبدو التركيز."}],"answer":3},{"q":"لماذا يجب أن يكون لحقل النص في New habit تسمية ظاهرة فوقه، لا نص إرشادي داخله فقط؟
","options":[{"text":"لأن النص الإرشادي غير مسموح في حقول النص في Figma.","why":"يتيح لك Figma تصميم النص الإرشادي بحرية. المشكلة في طريقة استخدام الناس للحقل."},{"text":"لأن النص الإرشادي يختفي بمجرّد أن يبدأ أحدهم الكتابة، فيفقد الحقل تعليماته، وألوان النص الإرشادي الفاتحة تفشل غالبًا في التباين.","why":"صحيح. التسمية الدائمة تُبقي الغرض ظاهرًا وتعطي قارئات الشاشة اسمًا موثوقًا."},{"text":"لأن التسميات تجعل الحقل أطول، وهذا يحسّن التخطيط.","why":"الارتفاع أثر جانبي لا سبب. السبب أن النصوص الإرشادية تختفي وكثيرًا ما تكون باهتة أكثر من اللازم."}],"answer":1}],"exercise":{"kind":"fill","language":"text","template":"Steady accessibility checklist, New habit sheet\n\nTargets\n WCAG 2.2 AA minimum target size {{0}} CSS px (each side)\n Apple recommendation (iOS build) {{1}} pt (each side)\n Material recommendation (Android) {{2}} dp (each side)\n\nContrast\n \"Habit name\" label, 15 px {{3}}:1\n Focus ring against the sheet {{4}}:1\n\nMeaning\n Missed state = red circle + x icon + the word \"Missed\"\n (never {{5}} alone)","blanks":[{"answers":["24"]},{"answers":["44"]},{"answers":["48"]},{"answers":["4.5"]},{"answers":["3","3.0"]},{"answers":["color","colour"]}],"title":"أكمل قائمة فحص إمكانية الوصول","prompt":"قبل تسليم لوحة New habit، تملأ صوفيا قائمة الفحص هذه. أكملها بالأرقام من WCAG 2.2 ومن إرشادات المنصّات، وبالكلمة الواحدة التي تُكمل القاعدة الأخيرة (بالإنجليزية كما تظهر في القائمة). أرقام فقط في الفراغات الرقمية.
\n","hints":["الحدّ الأدنى لحجم الهدف في المستوى AA من WCAG أصغر من توصية أيّ من المنصّتين.","تسمية بحجم 15 px نص عادي. وحلقة التركيز مؤشّر بصري غير نصي.","الأهداف: 24 و44 و48. التباين: 4.5 و3. والقاعدة تتعلّق باللون (color)."],"explanation":"المعيار SC 2.5.8 في WCAG 2.2 يضع الحدّ الأدنى للمستوى AA عند 24 × 24 CSS px (أو مسافة كافية حول الأهداف الأصغر). توصي Apple بـ 44 × 44 نقطة، ويوصي Material بـ 48 × 48 dp؛ وفي تطبيق الهاتف صمّم وفق رقم المنصّة. التسمية بحجم 15 px نص عادي، فتحتاج 4.5:1. وحلقة التركيز مؤشّر غير نصي وتحتاج 3:1 مقابل ما يحيط بها. ويقول المعيار SC 1.4.1 إن المعنى لا يُنقل أبدًا بـ color (اللون) وحده، ولهذا تحمل حالة Missed أيضًا أيقونة وكلمة.
\n","checkLabels":{}},"words":744,"readMinutes":4}