يتيح مربع الاختيار للمستخدمين إجراء اختيار واحد أو الإشارة إلى اختيار ثنائي.
تمكن مربعات الاختيار المستخدمين من التفاعل مع الخيارات داخل الواجهة. حيث يمكن استخدام خانات الاختيار لتحديد خيارات فردية، أو يمكن تجميعها للسماح بتحديد خيارات متعددة في نفس الوقت. بالإضافة إلى ذلك، يمكن أن تكون مربعات الاختيار بمثابة المحفز للإجراءات ذات الصلة أو تعرض معلومات إضافية بناءً على اختيار المستخدم.
المتغيرات
مربع الاختيار متاح في ثلاثة أشكال أساسية:
- غير محدد: في هذه الحالة، يكون مربع الاختيار غير محدد أو غير نشط. حيث يمثل اختيار أو شرط سلبي.
- محدد: تشير هذه الحالة إلى أن مربع الاختيار محدد أو نشط. عادة ما يمثل اختيار أو شرط إيجابي.
- غير محدد جزئيًا: هذه الحالة تُستخدم عندما لا يكون مربع الاختيار محددًا بشكل كامل ولا غير محدد بشكل كامل. تُستخدم بشكل شائع في الحالات التي يكون فيها مربع الاختيار جزءًا من مجموعة يتم فيها اختيار بعض الخيارات فقط وليس كلها. هذه الحالة مفيدة للإشارة إلى انتقاء جزئي أو عندما تكون الحالة الدقيقة غير معروفة أو غير قابلة للتحديد.
المظهر
تم تصميم مظهر مربع الاختيار حتى يمكن تمييزه بسهولة من الناحية البصرية، مما يضمن للمستخدمين التعرف على المعلومات المقدمة وفهمها بسرعة وسهولة.
التركيب
- مدخلات مربع الاختيار: عنصر واجهة المستخدم الرسومية الذي يسمح للمستخدمين بالتبديل بين حالتين، عادةً محدد وغير محدد . حيث يتم تمثيلها بواسطة مربع صغير يمكن النقر عليه لتغيير حالته.
- عنوان مربع الاختيار: هذا هو النص المرتبط بإدخال مربع الاختيار الذي يوفر السياق أو يصف الخيار الذي يتم اختياره أو إلغاء اختياره.
- النص المساعد: يشير النص المساعد في مربع الاختيار إلى المعلومات الإضافية المقدمة لمساعدة المستخدمين على فهم الغرض من اختيار مربع الاختيار أو الآثار المترتبة عليه.
- رسالة تنبيه: إشعار يظهر عندما يتفاعل المستخدم مع مربع الاختيار بطريقة تؤدي إلى حالة أو إجراء معين.
إمكانية الوصول
يعد ضمان إمكانية الوصول إلى أزرار مربع الاختيار أمر في غاية الأهمية لأنها طريقة شائعة لمعرفة تفضيلات المستخدم وقراراته.
- استخدم عنصر <input type="checkbox"> القياسي في مربع الاختيار. بحيث يضمن التعامل مع المتصفح المدمج لسلوك مربع الاختيار، بما في ذلك ميزات إمكانية الوصول.
- اربط كل مربع اختيار بعنصر <label> لتقديم وصف نصي. يمكن القيام بذلك عن طريق وضع عنصر الادخال داخل عنصر التسمية أو باستخدام السمة المرتبطة بمعرف مربع الاختيار. اشترك في النشرة الإخبارية أو اشترك في النشرة الإخبارية
<label for="subscribe">Subscribe to newsletter</label><input type="checkbox" id="subscribe" name="subscribe">
او
<label><input type="checkbox" name="subscribe"> إشترك في النشرة البريدية</label>
- في حين أن مربعات الاختيار القياسية لا تتطلب عادةً سمات ARIA إضافية بسبب مميزات الوصول الكامنة، وذلك لضمان الاستخدام السليم aria-labelledby or aria-label عندما تكون ضرورية، لا سيما في الأشكال أو المخططات المعقدة التي لا تكون فيها الرابطة واضحة.
- تأكد من إمكانية تركيز مربع الاختيار وتبديلها باستخدام لوحة المفاتيح. يمكن تركيز مربع الاختيار القياسي HTML باستخدام مفتاح Tab وتبديله باستخدام Spacebar.
- يتم الإعلان تلقائيًا عن التغييرات في الحالة التي (تم فحصها/غير محدد) بواسطة قارئ الشاشة عند استخدام مربعات الاختيار القياسية من HTML، طالما تم تصنيفها بشكل صحيح.