Accessible Website Design

അടിസ്ഥാന ആശയം

Accessibility കാഴ്ച, കേൾവി, ചലനശേഷി, cognition എന്നിവയിൽ വ്യത്യാസമുള്ള ആളുകൾക്കും website ഉപയോഗിക്കാൻ സഹായിക്കുന്നു.

എന്തുകൊണ്ട് ഇത് പ്രധാനമാണ്?

Semantic headings, buttons, labels എന്നിവ screen reader navigation എളുപ്പമാക്കുന്നു. Clickable div-നെക്കാൾ യഥാർത്ഥ button ഉപയോഗിക്കുന്നത് മെച്ചമാണ്.

പ്രായോഗികമായി ചെയ്യേണ്ടത്

Keyboard മാത്രം ഉപയോഗിച്ച് links, forms, menus navigate ചെയ്യാൻ കഴിയണം. Focus indicator വ്യക്തമായി കാണണം.

സാധാരണ പിഴവുകൾ

Images-ന് അർത്ഥമുള്ള alt text നൽകുക. Pure decoration ആണെങ്കിൽ unnecessary narration ഒഴിവാക്കാം.

പരിശോധനയും തുടർനടപടിയും

Color മാത്രം ആശ്രയിച്ച് error അറിയിക്കരുത്. Error message-ൽ എന്ത് തിരുത്തണമെന്ന് പറയുക. Small screens-ൽ zoom ചെയ്താലും layout പ്രവർത്തിക്കണം.

കൂടുതൽ പഠിക്കാൻ

നിങ്ങൾ ഉപയോഗിക്കുന്ന software അല്ലെങ്കിൽ സേവനത്തിന്റെ official help center-ൽ പുതിയ documentation പരിശോധിക്കുക. ഈ വിഷയവുമായി ബന്ധപ്പെട്ട മറ്റുള്ള ലേഖനങ്ങൾ FICTION CLUB Guides വിഭാഗത്തിൽ ലഭ്യമാണ്.

ഒരു contact form keyboard ഉപയോഗിച്ച് പരിശോധിക്കാം

Mouse ഉപയോഗിക്കാതെ Tab കീ മാത്രം അമർത്തി form-ലേക്ക് പോകുക. ഓരോ input-നും വ്യക്തമായ label ഉണ്ടോ, ഇപ്പോൾ focus ഏത് control-ലാണെന്ന് കാണാമോ, button Enter അല്ലെങ്കിൽ Space ഉപയോഗിച്ച് പ്രവർത്തിക്കുന്നുണ്ടോ നോക്കുക. “Name” എന്ന placeholder label-ന് പകരമല്ല; typing തുടങ്ങുമ്പോൾ placeholder ഇല്ലാതാകാം. Required field വിട്ടാൽ “Error” എന്നു മാത്രം പറയാതെ “Email address നൽകുക” എന്നപോലെ അടുത്ത നടപടി വ്യക്തമാക്കുക.

ആദ്യ field-ൽ നിന്ന് അവസാന button വരെ focus order യുക്തിസഹമായിരിക്കണം. ഒരു popup തുറക്കുമ്പോൾ focus popup-ലേക്ക് മാറ്റുകയും അടയ്ക്കുമ്പോൾ പഴയ trigger-ലേക്ക് മടക്കുകയും ചെയ്യുന്നുണ്ടോ പരിശോധിക്കുക. Keyboard ഉപയോഗിക്കുന്ന visitor ഒരു menu-ക്കുള്ളിൽ കുടുങ്ങുന്നത് പ്രധാന usability പ്രശ്നമാണ്.

Screen reader-നും ചിത്രങ്ങൾക്കും വേണ്ടത്

ഒരു photo-യ്ക്ക് “image123.jpg” എന്ന alt text പ്രയോജനപ്പെടില്ല. ചിത്രത്തിന്റെ പങ്ക് എന്താണെന്ന് ചുരുക്കി പറയുക: “Bill payment page-ൽ Consumer Number നൽകുന്ന സ്ഥലം” എന്ന വിവരണം ചിലപ്പോൾ സഹായിക്കും. Illustration വെറും decoration ആണെങ്കിൽ empty alt ഉപയോഗിക്കുന്നതാണ് നല്ലത്. Chart മാത്രം കാണിക്കുന്നുണ്ടെങ്കിൽ പ്രധാന കണക്കുകൾ text/table ആയും നൽകണം. Video-യ്ക്ക് വായിക്കാവുന്ന subtitles, ശബ്ദമില്ലാതെ മനസ്സിലാകുന്ന context എന്നിവ പരിഗണിക്കുക.

Headings ക്രമമായി ഉപയോഗിക്കുക: ഒരു പ്രധാന H1, തുടർന്ന് section H2-കൾ. Visual style ലഭിക്കാനായി തെറ്റായ heading level ഉപയോഗിക്കരുത്. Link text “click here” എന്നതിനു പകരം “Privacy Policy വായിക്കുക” എന്നു നൽകിയാൽ screen-reader link list-ൽ അർത്ഥം വ്യക്തമാകും.

Mobile-ൽ മൂന്ന് practical tests

1. Browser zoom കൂട്ടുമ്പോൾ പ്രധാന text, buttons മുറിയുന്നുണ്ടോ നോക്കുക.
2. Dark theme-ലും light theme-ലും text, form borders, error messages contrast പുലർത്തുന്നുണ്ടോ പരിശോധിക്കുക.
3. ഒരു കൈകൊണ്ട് mobile ഉപയോഗിക്കുമ്പോൾ payment/submit button വളരെ ചെറുതോ അടുത്തടുത്തോ ആണോ പരിശോധിക്കുക.

Automated accessibility scanners തുടക്കത്തിന് സഹായിക്കും. എന്നാൽ യഥാർത്ഥ keyboard navigation, screen-reader പരിശോധന, വിവിധ ഉപകരണങ്ങളിലുള്ള review എന്നിവയ്ക്ക് പകരമല്ല. അടിസ്ഥാന മാർഗനിർദേശങ്ങൾക്ക് W3C Web Accessibility Tutorials കാണാം.