إتقان Combobox والإكمال التلقائي

إن combobox هو حقل إدخال مقترن بقائمة منبثقة للاقتراحات. تخيله كمربع بحث يعرض نتائج مطابقة منسدلة أثناء الكتابة. 🔍

يحتوي combobox على حقل إدخال نصي يكتب فيه المستخدم، وقائمة منبثقة منفصلة من نوع listbox للخيارات. وتربط ARIA بينهما كي يربط قارئ الشاشة بينهما.

ضع role="combobox" على حقل الإدخال النصي نفسه. فهذا يخبر التقنيات المساعدة بأن الكتابة هنا ستُظهر قائمة من الخيارات.

استخدم aria-controls على حقل الإدخال، واضبط قيمتها على id الخاص بالقائمة المنبثقة. فهي تربط الحقل بقائمة listbox التي يفتحها ويغلقها.

بدّل aria-expanded إلى true عند ظهور القائمة، وإلى false عند إخفائها. ويعلن قارئ الشاشة حالة القائمة المنبثقة من خلال هذه السمة.

تحمل حاوية الاقتراحات role="listbox"، ويحمل كل اقتراح role="option". وهذا يمنح المستخدمين قائمة مألوفة يمكن التنقل فيها.

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

وجّه aria-activedescendant في حقل الإدخال إلى id الخاص بالخيار المميز. وهكذا يقرأ قارئ الشاشة الخيار النشط من دون نقل التركيز الفعلي.

ينقل السهمان لأسفل ولأعلى بين الخيارات، ويحدد Enter الخيار النشط، ويغلق Escape القائمة المنبثقة. وتأتي هذه المفاتيح مباشرة من APG.

اضبط aria-selected="true" على الخيار المميز، واضبطها على false لبقية الخيارات. يجب تحديد خيار واحد فقط في كل مرة في combobox أحادي الاختيار.

استخدم aria-autocomplete لوصف طريقة ظهور الاقتراحات: "list" لقائمة مصفاة، أو "both" عندما يكتمل النص أيضًا داخل الحقل.

إن combobox هو حقل إدخال مع listbox: اربط بينهما باستخدام aria-controls وaria-expanded، وأبقِ التركيز في الحقل، وتتبع الخيار النشط باستخدام aria-activedescendant. ✅