إتاحة الوصول لعناصر الإكمال التلقائي

يحدد نمط combobox في WAI-ARIA مجموعة معينة من الأدوار والخصائص لعناصر الإكمال التلقائي. يجمع combobox بين عنصر إدخال وقائمة منبثقة. ويضمن هذا النمط أن تعلن قارئات الشاشة السلوك التفاعلي والخيارات المتاحة والتحديد الحالي للمستخدمين الذين لا يستطيعون رؤية واجهة المستخدم المرئية بشكل صحيح.

ضع حقل الإدخال داخل div يحمل role="combobox". يعلن ذلك للتقنيات المساعدة أن لحقل الإدخال قائمة منبثقة مرتبطة به. عيّن aria-expanded={isOpen} على هذه الحاوية لإخبار قارئات الشاشة بما إذا كانت قائمة الاقتراحات ظاهرة حاليًا أو مخفية.

ينبغي أن يحتوي عنصر الإدخال نفسه على: aria-autocomplete="list" (تحتوي القائمة المنبثقة على قائمة من الاقتراحات)، وaria-haspopup="listbox" (يؤدي النقر أو الكتابة إلى فتح listbox)، وaria-expanded={isOpen}، وaria-controls="suggestion-list-id" الذي يشير إلى قيمة id لعنصر قائمة القائمة المنسدلة.

تشير aria-activedescendant الموجودة على حقل الإدخال إلى قيمة id للخيار المميز حاليًا. عندما تكون قيمة selectedIndex هي 0، عيّن aria-activedescendant="option-0". تستخدم قارئات الشاشة هذه الخاصية للإعلان عن العنصر النشط دون نقل التركيز الفعلي بعيدًا عن حقل الإدخال. وعندما لا يكون أي عنصر محدد، أزل الخاصية أو عيّنها إلى سلسلة فارغة.

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

ينبغي أن يحمل كل عنصر اقتراح role="option" وقيمة id فريدة مثل option-0 وoption-1 وغيرهما. أضف aria-selected={index === selectedIndex} للإشارة إلى العنصر المميز حاليًا. تعلن قارئات الشاشة محتوى الخيار وما إذا كان محددًا عند تنقل المستخدم باستخدام مفاتيح الأسهم.

عندما يضغط المستخدم على ArrowDown وتتغير قيمة aria-activedescendant إلى option-1، قد يعلن VoiceOver شيئًا مثل "خطافات React، 2 من 5". يقرأ قارئ الشاشة نص الخيار وموضعه في القائمة تلقائيًا من ترميز ARIA. ولا حاجة إلى مناطق live إضافية للتنقل باستخدام لوحة المفاتيح.

اختبر باستخدام VoiceOver على macOS (استخدم Cmd+F5 للتبديل) وNVDA على Windows (يتوفر تنزيل مجاني). انتقل إلى حقل الإدخال وابدأ بالكتابة. تحقّق من أن قارئ الشاشة يعلن دور combobox وعدد النتائج التي عُثر عليها وكل خيار أثناء التنقل بينها باستخدام مفاتيح الأسهم. وقارن السلوك بأمثلة دليل WAI-ARIA Authoring Practices Guide.

عند تحميل الاقتراحات بشكل غير متزامن، أضف عنصر div مخفيًا بصريًا يحمل aria-live="polite" وaria-atomic="true". حدّث محتواه النصي عند اكتمال التحميل: "تم العثور على 5 نتائج" أو "لم يتم العثور على نتائج". يعلن قارئ الشاشة هذه الرسالة بعد انتهاء الكلام الحالي، مما يبقي المستخدمين على اطلاع دون مقاطعتهم.

يحتوي دليل WAI-ARIA Authoring Practices Guide (APG) الموجود على w3.org/WAI/ARIA/apg على صفحة مخصصة لنمط combobox، تتضمن أمثلة عملية على التعليمات البرمجية ومواصفات مفصلة للتفاعل باستخدام لوحة المفاتيح. ارجع دائمًا إلى APG عند تنفيذ عناصر واجهة تفاعلية مثل الإكمال التلقائي أو مربعات الحوار أو علامات التبويب، لضمان الامتثال الكامل لمتطلبات إمكانية الوصول.

وفّر aria-label لحقل الإدخال إذا لم يوجد عنصر label مرئي: aria-label="Search suggestions". لا تعتمد على placeholder وحده لتوفير التسميات؛ إذ تختفي العناصر النائبة عندما يبدأ المستخدم بالكتابة، ولا تعلنها جميع قارئات الشاشة بشكل متسق. ويظل عنصر label المرئي مع htmlFor الخيار الأفضل دائمًا.

ما الغرض من الخاصية aria-activedescendant الموجودة على حقل إدخال الإكمال التلقائي؟

استخدم role="combobox" على الحاوية، وaria-autocomplete="list" على حقل الإدخال، إلى جانب aria-expanded وaria-controls وaria-activedescendant لربط حقل الإدخال بقائمة الاقتراحات. يحتاج كل خيار إلى role="option" وقيمة id فريدة وaria-selected. أضف منطقة aria-live لعرض أعداد النتائج غير المتزامنة.