بنية واجهة مستخدم سهلة الوصول

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

لكن غالباً ما يحدث خلل ما، وإن كان طفيفاً.

تظهر نافذة نافذة منبثقة أثناء الانتقال، وينتقل التركيز إلى عنصر يختفي بعد إطار واحد. يستبدل خيار "الانتظار" مؤقتًا قائمةً، مما يؤدي إلى تغيير ترتيب علامات التبويب. يتسبب التحديث المتدفق في إعادة قارئ الشاشة الإعلان عن المنطقة بأكملها بدلاً من الجزء المُعدَّل فقط. يُجهِّز عرض الخلفية محتوىً جديدًا، لكن منطقةً حيةً تُعلن عن معلومات قديمة لأنها شُغِّلت قبل الالتزام.

لا يظهر أي من هذه العيوب بوضوح أثناء الاختبار البصري. فهي لا تظهر إلا عند استخدام لوحة المفاتيح أو التقنيات المساعدة. وعند ظهورها، تبدو عشوائية.

المشكلة الأساسية ليست غياب سمات ARIA، بل عدم توافق البنية. فنحن نحسن سلوك العرض دون مراعاة أن React لا يقتصر على تحديث وحدات البكسل فحسب، بل يُحدّث شجرة إمكانية الوصول أيضًا. في React 19، أصبح العرض قابلاً للمقاطعة، ومرحليًا، ومتزامنًا. وهذا يعني أن سلوك إمكانية الوصول يتأثر أيضًا بالجدولة. فإذا كانت حدودنا غير مستقرة، أو كانت ملكية التركيز غير واضحة، أو كانت الإعلانات مرتبطة بحالات وسيطة، فإن التزامن يكشف نقاط الضعف هذه.

لذا فإن المشكلة التي نحلها في هذا الدرس أعمق من مجرد "كيف نضيف إمكانية الوصول؟". نحن نحل كيفية تصميم أنظمة React 19 بحيث تظل إمكانية الوصول مستقرة في ظل العرض المتزامن والبث والانتقالات.

في الرسم التوضيحي أعلاه:

• على اليسار، تم تثبيت واجهة المستخدم الحالية. التركيز داخل منطقة المحتوى. الهيكل (الرأس، التنقل، المعالم) ثابت.

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

• على اليمين، تظهر عمليات الالتزام الجديدة للشجرة الفرعية. يتم تحديث منطقة المحتوى في تغيير ذري واحد. تُعلن منطقة نشطة عن التحديث. يبقى التركيز داخل حدود مُتحكم بها ما لم يتم إعادة توجيهه عمدًا.

يؤكد الرسم التخطيطي أن الإجراءات الحساسة لإمكانية الوصول تحدث عند الالتزام، وليس أثناء التحضير.

إمكانية الوصول كعقد وقت الالتزام في React 19

إمكانية الوصول في React ليست خاصية للمكونات الفردية؛ إنها خاصية لكيفية تطور الشجرة.

يُمكن React 19 إعداد واجهة مستخدم جديدة في الذاكرة بينما تظل الواجهة الحالية تفاعلية. يُعدّ هذا الأمر بالغ الأهمية لتحسين سرعة الاستجابة، ولكنه يعني أيضًا إمكانية وجود نسختين من واجهة المستخدم مؤقتًا: النسخة المُعتمدة والنسخة قيد التطوير. لا تفهم التقنيات المساعدة إلا النسخة المُعتمدة. إذا قمنا بتفعيل تغييرات التركيز أو الإعلانات أثناء مرحلة الإعداد بدلًا من تفعيلها بعد الاعتماد، فإننا نُعرّض النظام لحالات تضارب في البيانات.

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

بعد ذلك، يجب أن نفكر من منظور الاستمرارية الدلالية. عندما نُغلّف منطقةً ما في Suspense، فإننا نُحدد حدودًا هيكلية. إذا أزالت هذه الحدود معالم بارزة أو عناوين أو عناصر تحكم قابلة للتنقل أثناء التراجع، فإننا لا نعرض مُحمّلًا فحسب، بل نُعيد تشكيل شجرة إمكانية الوصول مؤقتًا. لذا، فإن الغلاف المستقر ليس مجرد تحسين للأداء، بل هو ضمان لإمكانية الوصول.

يُعدّ التركيز أحد الاعتبارات المعمارية الأخرى. فالتركيز ذو حالة وعالمي. في نظام متزامن، يكون الاستدعاء الأعمىfocus() أثناء تحديثات الحالة، قد تستهدف هذه التحديثات العُقد التي ستُستبدل قريبًا. بدلًا من ذلك، ينبغي أن يتركز الاهتمام على حدود ملكية محددة بوضوح: مربعات الحوار، والقوائم، ومناطق التنقل. تُنسق هذه الحدود دخول التركيز وخروجه فقط بعد إتمام عملية التحديث.

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

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

مثال: الالتزام بإمكانية الوصول المتوافقة في لوحة معلومات متزامنة

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