ऐसा signup form कैसे बनाएंगे जिसके validation errors सच में काम के हों, screen reader इस्तेमाल करने वालों के लिए भी?

inputs से जुड़े असली labels इस्तेमाल करें, हर keystroke की जगह blur और submit पर validate करें, और हर error संदेश को उसके field के पास रखें जिसमें aria describedby उसकी तरफ इशारा करे और input पर aria invalid लगे। submit पर focus पहले invalid field पर या errors के सारांश पर ले जाएं। native constraints और types बनाए रखें ताकि मोबाइल keyboards और autofill चलें, और errors को कभी सिर्फ रंग से मत बताइए।

मैं native से शुरू करता हूं, क्योंकि ज़्यादातर चीज़ें मुफ्त मिल जाती हैं: for attribute वाला असली label, सही input type ताकि मोबाइल सही keyboard दिखाए, autocomplete attributes ताकि password managers चलें, और जहां लागू हो वहां required। समय पर, मैं field को blur पर और सब कुछ submit पर validate करता हूं, हर keystroke पर कभी नहीं, क्योंकि किसी को उसका email टाइप करते हुए यह बताना कि वह गलत है, बस शोर है। एक बार field invalid हो जाए तो मैं टाइप करते हुए दोबारा validate ज़रूर करता हूं, ताकि ठीक होते ही error हट जाए। हर संदेश अपने input के ठीक नीचे बैठता है, और input को aria invalid true तथा संदेश की id की तरफ इशारा करता aria describedby मिलता है, और यही वह चीज़ है जिससे focus वहां आने पर screen reader error बोलता है। फेल हुई submit पर मैं focus पहले invalid field पर ले जाता हूं, या कई हों तो ऊपर एक छोटे error सारांश पर जिसमें हर field के लिंक हों। और errors कभी सिर्फ रंग से नहीं होतीं; टेक्स्ट और एक icon भी होता है, क्योंकि अकेली लाल border बहुत लोगों के लिए कोई मतलब नहीं रखती।