custom dropdown को accessible बनाने में क्या लगता है?

शुरुआत native select आज़माने से करें, क्योंकि उससे keyboard सपोर्ट, focus संभालना और screen reader का बर्ताव मुफ्त मिलता है। अगर डिज़ाइन उसकी इजाज़त न दे, तो listbox या combobox pattern ढंग से लागू करें: focus खुद संभालें, arrow keys, Home, End, Escape और type ahead सपोर्ट करें, aria-expanded, aria-activedescendant तथा सही roles जोड़ें, और बंद होने पर focus वापस trigger पर लाएं।

मेरा पहला कदम यह सवाल उठाना है कि इसे बनाया ही क्यों जाए, क्योंकि native select बिना एक लाइन कोड के keyboard handling, mobile pickers और screen reader की घोषणाएं देता है, और ज़्यादातर डिज़ाइन उसके इर्द गिर्द styling से पूरे हो जाते हैं। जब हमें सच में custom चाहिए था, avatars वाले multi select के लिए, तो मैंने उसे मनमाने ढंग से नहीं, ARIA authoring practices वाले listbox pattern के हिसाब से बनाया। यानी trigger एक असली button है जिस पर aria-expanded और aria-controls हैं, popup पर role listbox है जिसके options पर role option और aria-selected हैं, और मैं सक्रिय option को aria-activedescendant से ट्रैक करता हूं ताकि focus input पर ही रहे। keyboard के लिहाज़ से आपको ऊपर और नीचे, Home और End, बंद करने तथा focus वापस trigger पर लाने के लिए Escape, चुनने के लिए Enter या Space, और कूदने के लिए type ahead चाहिए। जो अहम बात मैं लोगों से कहता हूं वह यह कि ARIA सिर्फ हालत बताता है; वह कोई बर्ताव नहीं जोड़ता, तो role button वाला ऐसा div जिस पर कोई key handler नहीं, बेकार से भी बदतर है। मैं पहले सिर्फ keyboard से, फिर screen reader से टेस्ट करता हूं, उसके बाद ही वह review के पास जाता है।