ആക്സസിബിൾ ഫ്രണ്ട്എൻഡ് കംപോണന്റുകൾ നിർമ്മിക്കൽ
ആക്സസിബിലിറ്റി (Accessibility) ഒരു ആവശ്യകതയാണ്. അതൊരു തിരഞ്ഞെടുപ്പല്ല.
കോഡ് ചെയ്യുന്നതിന് മുമ്പ് പ്ലാൻ ചെയ്യുക. നിങ്ങളുടെ ഉപയോക്താക്കളെ പട്ടികപ്പെടുത്തുക.
- സ്ക്രീൻ റീഡർ ഉപയോഗിക്കുന്നവർ.
- കീബോർഡ് മാത്രം ഉപയോഗിക്കുന്നവർ.
- നിറങ്ങൾ തിരിച്ചറിയാൻ പ്രയാസമുള്ളവർ (Color blind users).
ആദ്യം നേറ്റീവ് HTML ഉപയോഗിക്കുക.
- ബട്ടണുകൾക്കായി
buttonടാഗുകൾ ഉപയോഗിക്കുക. - ഫോമുകൾക്കായി
inputടാഗുകൾ ഉപയോഗിക്കുക. - നേറ്റീവ് HTML കൊണ്ട് സാധ്യമാകാത്ത സാഹചര്യങ്ങളിൽ മാത്രം ARIA ചേർക്കുക.
കീബോർഡിന് മുൻഗണന നൽകുക.
- മൗസ് ഇല്ലാതെ തന്നെ എല്ലാ കൺട്രോളുകളും പ്രവർത്തിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക.
- ഫോക്കസ് ഇൻഡിക്കേറ്ററുകൾ (focus indicators) ദൃശ്യമാണെന്ന് ഉറപ്പാക്കുക.
- മോഡലുകളിൽ (modals) ഫോക്കസ് നിയന്ത്രിക്കുക (Trap focus).
കാഴ്ചയ്ക്ക് അപ്പുറമുള്ള ആവശ്യങ്ങൾക്കായി ഡിസൈൻ ചെയ്യുക.
- പിശകുകൾ കാണിക്കാൻ നിറം മാത്രം ഉപയോഗിക്കരുത്.
- അലേർട്ടുകൾക്ക് ടെക്സ്റ്റ് ലേബലുകൾ ചേർക്കുക.
- കോൺട്രാസ്റ്റ് റേഷ്യോകൾ (contrast ratios) പരിശോധിക്കുക.
പിശകുകൾ കൃത്യമായി കൈകാര്യം ചെയ്യുക.
- തെറ്റുകൾ തിരുത്താൻ ഉപയോക്താക്കൾക്ക് വ്യക്തമായ മാർഗങ്ങൾ നൽകുക.
- തെറ്റായ ഇൻപുട്ടുകൾക്കായി
aria-invalidഉപയോഗിക്കുക. - അപ്ഡേറ്റുകൾക്കായി
aria-liveഉപയോഗിക്കുക.
നിങ്ങളുടെ വർക്ക് പരിശോധിക്കുക.
- axe-core അല്ലെങ്കിൽ Lighthouse ഉപയോഗിക്കുക.
- ഒരു സ്ക്രീൻ റീഡർ ഉപയോഗിച്ച് നിങ്ങളുടെ സൈറ്റ് പരിശോധിക്കുക.
- Tab കീ ഉപയോഗിച്ച് ഓരോ ബട്ടണും പരിശോധിക്കുക.
കസ്റ്റം div-കൾക്ക് പകരം നേറ്റീവ് എലമെന്റുകൾ തിരഞ്ഞെടുക്കുക. ഇത് സമയം ലാഭിക്കും, കൂടാതെ മികച്ച രീതിയിൽ പ്രവർത്തിക്കുകയും ചെയ്യും.