الانتقال إلى المحتوى الرئيسي

نظرة عامة

تستخدم المكونات التفاعلية المُرحّلة العناصر الأساسية لـ Base UI للدلالات وسلوك لوحة المفاتيح. لا يزال تطبيقك يوفّر تسميات ذات معنى وأوصافًا ورسائل أخطاء وترتيب التركيز.

ضع تسمية لكل عنصر تحكم

استخدم Field.Label مع إدخال لربط تسمية مرئية بعنصر التحكم. يوفر Field.Description نصًا داعمًا:
استخدم VisuallyHidden عندما ينبغي أن يظل النص الداعم متاحًا للتقنية المساعدة دون عرضه. تكمل العناصر النائبة التسميات؛ ولا تحل محلها. بالنسبة إلى عنصر تحكم دون نص مرئي، وفّر اسمًا يمكن الوصول إليه باستخدام aria-label أو aria-labelledby.

حافظ على السلوك الأصلي

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

اختبر الواجهة الكاملة

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