ഫോം പ്രവേശനക്ഷമതയെക്കുറിച്ച് ഞങ്ങൾ ചെയ്യുന്ന ഒരു ചെറിയ പരമ്പരയിലെ 3-ാമത്തെ പോസ്റ്റാണിത്. നിങ്ങൾക്ക് രണ്ടാമത്തെ പോസ്റ്റ് നഷ്ടമായെങ്കിൽ, പരിശോധിക്കുക ഉപയോക്തൃ ഫോക്കസ് നിയന്ത്രിക്കുന്നത് :focus-visible. ഈ പോസ്റ്റിൽ ഒരു ഫോം നാവിഗേറ്റ് ചെയ്യുമ്പോൾ സ്ക്രീൻ റീഡർ ഉപയോഗിക്കുന്നതും കൂടാതെ ചില മികച്ച രീതികളും ഞങ്ങൾ നോക്കാൻ പോകുന്നു.
എന്താണ് സ്ക്രീൻ റീഡർ?
നിങ്ങൾ വെബിൽ ചുറ്റി സഞ്ചരിക്കുമ്പോൾ "സ്ക്രീൻ റീഡർ" എന്ന പദം നിങ്ങൾ കേട്ടിരിക്കാം. നിങ്ങൾ സൃഷ്ടിക്കുന്ന അനുഭവങ്ങളിൽ സ്വമേധയാലുള്ള പ്രവേശനക്ഷമത പരിശോധനകൾ നടത്താൻ നിങ്ങൾ ഇപ്പോൾ ഒരു സ്ക്രീൻ റീഡർ ഉപയോഗിക്കുന്നുണ്ടാകാം. ഒരു സ്ക്രീൻ റീഡർ ഒരു തരം AT അല്ലെങ്കിൽ അസിസ്റ്റീവ് സാങ്കേതികവിദ്യയാണ്.
ഒരു സ്ക്രീൻ റീഡർ ഡിജിറ്റൽ ടെക്സ്റ്റിനെ സിന്തസൈസ് ചെയ്ത സംഭാഷണമോ ബ്രെയിൽ ഔട്ട്പുട്ടോ ആയി പരിവർത്തനം ചെയ്യുന്നു, ഇത് സാധാരണയായി ബ്രെയിൽ റീഡറിനൊപ്പം കാണപ്പെടുന്നു.
ഈ ഉദാഹരണത്തിൽ, ഞാൻ Mac VO ഉപയോഗിക്കും. Mac VO (VoiceOver) എല്ലാ Mac ഉപകരണങ്ങളിലും അന്തർനിർമ്മിതമാണ്; iOS, iPadOS, macOS സിസ്റ്റങ്ങൾ. നിങ്ങൾ macOS പ്രവർത്തിപ്പിക്കുന്ന ഉപകരണത്തിൻ്റെ തരം അനുസരിച്ച്, VO തുറക്കുന്നത് വ്യത്യാസപ്പെടാം. ഞാൻ ഇത് എഴുതുന്ന VO പ്രവർത്തിപ്പിക്കുന്ന മാക്ബുക്ക് പ്രോയ്ക്ക് ടച്ച് ബാർ ഇല്ല, അതിനാൽ ഞാൻ ഹാർഡ്വെയറിന് അനുസരിച്ച് കുറുക്കുവഴി കീകൾ ഉപയോഗിക്കും.
MacOS-ൽ VO അപ്പ് സ്പിന്നിംഗ്
നിങ്ങൾ അപ്ഡേറ്റ് ചെയ്ത Macbook Pro ആണ് ഉപയോഗിക്കുന്നതെങ്കിൽ, നിങ്ങളുടെ മെഷീനിലെ കീബോർഡ് ചുവടെയുള്ള ചിത്രം പോലെ കാണപ്പെടും.
അമർത്തിപ്പിടിച്ചുകൊണ്ട് നിങ്ങൾ ആരംഭിക്കും cmd
കീ തുടർന്ന് ടച്ച് ഐഡി മൂന്ന് തവണ വേഗത്തിൽ അമർത്തുക.
നിങ്ങൾ ഒരു ടച്ച്ബാർ ഉള്ള ഒരു MBP (മാക്ബുക്ക് പ്രോ) ആണെങ്കിൽ, നിങ്ങൾ കുറുക്കുവഴി ഉപയോഗിക്കും cmd+fn+f5
VO ഓണാക്കാൻ. നിങ്ങളുടെ ഡെസ്ക്ടോപ്പ് അല്ലെങ്കിൽ ലാപ്ടോപ്പ് ഉപയോഗിച്ച് നിങ്ങൾ ഒരു പരമ്പരാഗത കീബോർഡാണ് ഉപയോഗിക്കുന്നതെങ്കിൽ, കീകൾ ഒന്നുതന്നെയായിരിക്കണം അല്ലെങ്കിൽ പ്രവേശനക്ഷമത ക്രമീകരണങ്ങളിൽ നിങ്ങൾ VO ഓണാക്കേണ്ടതുണ്ട്.. VO ഓൺ ചെയ്തുകഴിഞ്ഞാൽ, ഈ ഡയലോഗിനൊപ്പം വോക്കലൈസ് ചെയ്ത ഒരു ഡയലോഗും നിങ്ങളെ സ്വാഗതം ചെയ്യും. VO യുടെ ആമുഖം.
"വോയ്സ്ഓവർ ഉപയോഗിക്കുക" എന്ന ബട്ടണിൽ നിങ്ങൾ ക്ലിക്കുചെയ്യുകയാണെങ്കിൽ, നിങ്ങളുടെ വെബ്സൈറ്റുകളും ആപ്പുകളും പരിശോധിക്കുന്നതിന് VO ഉപയോഗിക്കുന്നതിനുള്ള നിങ്ങളുടെ വഴിയിലാണ്. മനസ്സിൽ സൂക്ഷിക്കേണ്ട ഒരു കാര്യം, സഫാരിയിൽ ഉപയോഗിക്കുന്നതിന് VO ഒപ്റ്റിമൈസ് ചെയ്തിരിക്കുന്നു എന്നതാണ്. പറഞ്ഞുവരുന്നത്, നിങ്ങൾ സ്ക്രീൻ റീഡർ ടെസ്റ്റ് റൺ ചെയ്യുമ്പോൾ നിങ്ങൾ ഉപയോഗിക്കുന്ന ബ്രൗസർ Safari ആണെന്ന് ഉറപ്പാക്കുക. ഐഫോണിനും ഐപാഡിനും ഇത് ബാധകമാണ്.
തുടക്കം മുതൽ VO ഉപയോഗിക്കാൻ രണ്ട് പ്രധാന വഴികളുണ്ട്. ഒരു വെബ്സൈറ്റിലേക്ക് നാവിഗേറ്റ് ചെയ്യുകയും ഇവയുടെ സംയോജനം ഉപയോഗിക്കുകയും ചെയ്യുക എന്നതാണ് ഞാൻ വ്യക്തിപരമായി ഇത് ഉപയോഗിക്കുന്ന രീതി tab, control, option, shift
അമ്പടയാള കീകളും, ഈ കീകൾ ഉപയോഗിച്ച് മാത്രം എനിക്ക് അനുഭവത്തിലൂടെ കാര്യക്ഷമമായി നാവിഗേറ്റ് ചെയ്യാൻ കഴിയും.
അനുഭവം നാവിഗേറ്റ് ചെയ്യുന്നതിനുള്ള മറ്റൊരു പൊതു മാർഗ്ഗം ഉപയോഗിക്കുക എന്നതാണ് വോയ്സ്ഓവർ റോട്ടർ. നിങ്ങൾ അനുഭവത്തിൽ ആയിരിക്കാൻ ആഗ്രഹിക്കുന്ന സ്ഥലത്തേക്ക് നേരിട്ട് നാവിഗേറ്റ് ചെയ്യാൻ രൂപകൽപ്പന ചെയ്ത ഒരു സവിശേഷതയാണ് റോട്ടർ. റോട്ടർ ഉപയോഗിക്കുന്നതിലൂടെ, മുഴുവൻ സൈറ്റിലൂടെയും സഞ്ചരിക്കുന്നത് നിങ്ങൾ ഒഴിവാക്കുന്നു, "നിങ്ങളുടെ സ്വന്തം സാഹസികത തിരഞ്ഞെടുക്കുക" എന്ന് കരുതുക.
മോഡിഫയർ കീകൾ
VO-യിലെ വ്യത്യസ്ത സവിശേഷതകൾ നിങ്ങൾ ഉപയോഗിക്കുന്ന രീതിയാണ് മോഡിഫയർ കീകൾ. ഡിഫോൾട്ട് മോഡിഫയർ കീ അല്ലെങ്കിൽ VO
is control
+ option
എന്നാൽ നിങ്ങൾക്ക് ഇത് ക്യാപ്സ് ലോക്കിലേക്ക് മാറ്റാം അല്ലെങ്കിൽ പരസ്പരം ഉപയോഗിക്കുന്നതിന് രണ്ട് ഓപ്ഷനുകളും തിരഞ്ഞെടുക്കാം.
റോട്ടർ ഉപയോഗിച്ച്
റോട്ടർ ഉപയോഗിക്കുന്നതിന്, നിങ്ങളുടെ മോഡിഫയർ കീ(കൾ) യുടെയും "U" എന്ന അക്ഷരത്തിൻ്റെയും സംയോജനമാണ് നിങ്ങൾ ഉപയോഗിക്കേണ്ടത്. എന്നെ സംബന്ധിച്ചിടത്തോളം, എൻ്റെ മോഡിഫയർ കീ ആണ് caps lock
. ഞാൻ അമർത്തുന്നു caps lock
+ U
റോട്ടർ എനിക്ക് വേണ്ടി കറങ്ങുന്നു. റോട്ടർ വന്നുകഴിഞ്ഞാൽ, ഇടത്തേയും വലത്തേയും അമ്പടയാളങ്ങൾ ഉപയോഗിച്ച് എനിക്ക് ആവശ്യമുള്ള അനുഭവത്തിൻ്റെ ഏത് ഭാഗത്തേക്കും നാവിഗേറ്റ് ചെയ്യാൻ കഴിയും.
തലക്കെട്ട് തലത്തിൽ നാവിഗേറ്റ് ചെയ്യുന്നു
തലക്കെട്ട് ലെവൽ ആണ് അനുഭവം നാവിഗേറ്റ് ചെയ്യാനുള്ള മറ്റൊരു വൃത്തിയുള്ള മാർഗം. നിങ്ങളുടെ മോഡിഫയർ കീകളുടെ + കോമ്പിനേഷൻ ഉപയോഗിക്കുകയാണെങ്കിൽ cmd
+ H
തലക്കെട്ട് തലങ്ങളെ അടിസ്ഥാനമാക്കി നിങ്ങൾക്ക് പ്രമാണ ഘടനയിലൂടെ സഞ്ചരിക്കാനാകും. അമർത്തിയാൽ നിങ്ങൾക്ക് പ്രമാണം ബാക്ക് മുകളിലേക്ക് നീക്കാനും കഴിയും shift
ഇതുപോലുള്ള ക്രമത്തിൽ, മോഡിഫയർ കീകൾ + shift
+ cmd
+ H
.
ചരിത്രവും മികച്ച രീതികളും
HTML-ൽ ഉള്ള ഏറ്റവും ശക്തമായ നേറ്റീവ് ഘടകങ്ങളിൽ ഒന്നാണ് ഫോമുകൾ. നിങ്ങൾ ഒരു പേജിൽ എന്തെങ്കിലും തിരയുകയാണെങ്കിലോ എന്തെങ്കിലും വാങ്ങാൻ ഒരു ഫോം സമർപ്പിക്കുകയാണെങ്കിലോ ഒരു സർവേ സമർപ്പിക്കുകയാണെങ്കിലോ. ഫോമുകൾ വെബിൻ്റെ ഒരു മൂലക്കല്ലാണ്, ഞങ്ങളുടെ അനുഭവങ്ങളിൽ ഇൻ്ററാക്റ്റിവിറ്റി അവതരിപ്പിച്ച ഒരു ഉത്തേജകവുമായിരുന്നു.
1995 സെപ്തംബർ മുതലാണ് വെബ് ഫോമിൻ്റെ ചരിത്രം ആരംഭിക്കുന്നത് HTML 2.0 സ്പെസിഫിക്കേഷൻ. ചിലർ വെബിൻ്റെ നല്ല ദിവസങ്ങൾ പറയുന്നു, കുറഞ്ഞത് ഞാൻ അത് പറയുന്നു. സ്റ്റെഫാനി സ്റ്റിമാക് ഒരു ആകർഷണീയമായ ലേഖനം എഴുതി സ്മാഷിങ് മാഗസിൻ തലക്കെട്ട്, "തിരഞ്ഞെടുത്തതും അതിനപ്പുറവും സ്റ്റാൻഡേർഡൈസ് ചെയ്യുന്നു: നേറ്റീവ് HTML ഫോം നിയന്ത്രണങ്ങളുടെ ഭൂതകാലവും വർത്തമാനവും ഭാവിയും".
വെബിനായി ആക്സസ് ചെയ്യാവുന്ന ഒരു ഫോം നിർമ്മിക്കുമ്പോൾ പിന്തുടരേണ്ട 5 മികച്ച രീതികളാണ് ഇനിപ്പറയുന്നത്.
- നിങ്ങൾ ഒരു ഫോം ഘടകം ഉപയോഗിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക. ഫോമുകൾ ഡിഫോൾട്ടായി ആക്സസ് ചെയ്യാവുന്നതാണ്, അവ എല്ലായ്പ്പോഴും ഡിവിഷനുകളിൽ ഉപയോഗിക്കേണ്ടതാണ്.
<form>
<!-- Form controls are nested here. -->
</form>
- ഉപയോഗിക്കുന്നത് ഉറപ്പാക്കുക
for
ഒപ്പംid
ആട്രിബ്യൂട്ടുകൾ ഓണാണ്label
'മണല്input
അങ്ങനെ അവർ ബന്ധിപ്പിച്ചിരിക്കുന്നു. ഈ രീതിയിൽ, നിങ്ങൾ ലേബൽ ക്ലിക്ക്/ടാപ്പ് ചെയ്യുകയാണെങ്കിൽ, ഇൻപുട്ടിലേക്ക് ഫോക്കസ് മാറുകയും നിങ്ങൾക്ക് ടൈപ്പിംഗ് ആരംഭിക്കുകയും ചെയ്യാം.
<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required/>
- ഫോം പൂർത്തിയാകുന്നതിന് ഒരു ഫീൽഡ് ആവശ്യമാണെങ്കിൽ, ആവശ്യമായ ആട്രിബ്യൂട്ടും ഏരിയ-ആവശ്യമായ ആട്രിബ്യൂട്ടും ഉപയോഗിക്കുക. ഇവ ഫോം സമർപ്പിക്കുന്നതിൽ നിന്ന് നിയന്ത്രിക്കും. ഏരിയ-ആവശ്യമായ ആട്രിബ്യൂട്ട്, ഫീൽഡ് ആവശ്യമാണെന്ന് അസിസ്റ്റീവ് ടെക്നിനോട് വ്യക്തമായി പറയുന്നു.
<input type="text" id="name" name="name" required aria-required/>
- ഉപയോഗിക്കുക,
:focus
,:focus-within
ഒപ്പം:focus-visible
ഒരു ഉപയോക്താവിന് എങ്ങനെ ഫോക്കസ് ലഭിക്കുന്നു എന്നത് നിയന്ത്രിക്കാനും ഇഷ്ടാനുസൃതമാക്കാനുമുള്ള CSS കപട ക്ലാസുകൾ.
form:focus-within {
background-color: #cfffcf;
}
input:focus-within {
border: 10px solid #000000;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid crimson;
border-radius: 3px;
}
- A
button
ഒരു ഫോം സമർപ്പിക്കുന്നത് പോലെയുള്ള ഒരു പ്രവർത്തനം അഭ്യർത്ഥിക്കാൻ ഉപയോഗിക്കുന്നു. ഉപയോഗികുക! ഉപയോഗിച്ച് ബട്ടണുകൾ സൃഷ്ടിക്കരുത്div
യുടെ. എdiv
നിർവചനം അനുസരിച്ച് ഒരു വിഭജനമാണ്. ഇതിന് അന്തർലീനമായ പ്രവേശനക്ഷമത ഗുണങ്ങളൊന്നുമില്ല.
ഡെമോ
നിങ്ങൾക്ക് കോഡ് പരിശോധിക്കണമെങ്കിൽ, ഇതിലേക്ക് നാവിഗേറ്റ് ചെയ്യുക VoiceOver ഡെമോ GitHub റിപ്പോ. നിങ്ങൾക്ക് ഇഷ്ടമുള്ള സ്ക്രീൻ റീഡർ ഉപയോഗിച്ച് മുകളിലെ ഡെമോ പരീക്ഷിക്കണമെങ്കിൽ, പരിശോധിക്കുക VoiceOver ഉപയോഗിച്ച് ഒരു വെബ് ഫോം നാവിഗേറ്റ് ചെയ്യുന്നു.
സ്ക്രീൻ റീഡർ സോഫ്റ്റ്വെയർ
നിങ്ങളുടെ തന്നിരിക്കുന്ന ഓപ്പറേറ്റിംഗ് സിസ്റ്റത്തിൽ ഉപയോഗിക്കാവുന്ന വിവിധ തരം സ്ക്രീൻ റീഡർ സോഫ്റ്റ്വെയറുകളുടെ ഒരു ലിസ്റ്റ് ചുവടെയുണ്ട്. ഒരു Mac നിങ്ങൾ തിരഞ്ഞെടുക്കുന്ന മെഷീൻ അല്ലെങ്കിൽ, Windows, Linux എന്നിവയ്ക്കും Android ഉപകരണങ്ങൾക്കുമായി അവിടെ ഓപ്ഷനുകൾ ഉണ്ട്.
NVDA
എൻവി ആക്സസിൽ നിന്നുള്ള സ്ക്രീൻ റീഡറാണ് എൻവിഡിഎ. PC-യുടെ പ്രവർത്തിക്കുന്ന Microsoft Windows 7 SP1-ലും അതിനുശേഷമുള്ളവയിലും മാത്രമേ ഇത് നിലവിൽ പിന്തുണയ്ക്കൂ. കൂടുതൽ ആക്സസ്സിനായി, പരിശോധിക്കുക എൻവി ആക്സസ് വെബ്സൈറ്റിൽ എൻവിഡിഎ പതിപ്പ് 2024.1 ഡൗൺലോഡ് പേജ്!
JAWS
മുകളിലെ പരാമർശം നിങ്ങൾ മനസ്സിലാക്കിയെങ്കിൽ, നിങ്ങൾ നല്ല കമ്പനിയിലാണ്. JAWS വെബ്സൈറ്റ് അനുസരിച്ച്, ചുരുക്കത്തിൽ ഇതാണ്:
നിങ്ങൾക്കായി JAWS പരിശോധിക്കുക ആ പരിഹാരം നിങ്ങളുടെ ആവശ്യങ്ങൾക്ക് അനുയോജ്യമാണെങ്കിൽ, തീർച്ചയായും അതിന് ഒരു ഷോട്ട് നൽകുക!
ആഖ്യാതാവ്
WIndows 11-നൊപ്പം ഷിപ്പ് ചെയ്യുന്ന ഒരു ബിൽറ്റ്-ഇൻ സ്ക്രീൻ റീഡർ സൊല്യൂഷനാണ് Narrator. നിങ്ങളുടെ ഇഷ്ടാനുസരണം സ്ക്രീൻ റീഡറായി ഇത് ഉപയോഗിക്കാൻ നിങ്ങൾ തിരഞ്ഞെടുക്കുകയാണെങ്കിൽ, ചുവടെയുള്ള ലിങ്ക് അതിൻ്റെ ഉപയോഗത്തെക്കുറിച്ചുള്ള പിന്തുണാ ഡോക്യുമെൻ്റേഷനാണ്.
ഓർക്ക
ഗ്നോം പ്രവർത്തിക്കുന്ന വ്യത്യസ്ത ലിനക്സ് വിതരണങ്ങളിൽ ഉപയോഗിക്കാനാകുന്ന ഒരു സ്ക്രീൻ റീഡറാണ് Orca.
ടോക്ക്ബാക്ക്
Android ഉപകരണങ്ങളിൽ ഉപയോഗിക്കുന്ന സ്ക്രീൻ റീഡറാണ് Google TalkBack. ഇത് ഓണാക്കുന്നതും ഉപയോഗിക്കുന്നതും സംബന്ധിച്ച കൂടുതൽ വിവരങ്ങൾക്ക്, ആൻഡ്രോയിഡ് പ്രവേശനക്ഷമത പിന്തുണാ സൈറ്റിലെ ഈ ലേഖനം പരിശോധിക്കുക.
ബ്രൌസർ പിന്തുണ
HTML ഘടകങ്ങൾക്കും ARIA (ആക്സസ്സബിൾ റിച്ച് ഇൻ്റർനെറ്റ് ആപ്ലിക്കേഷൻ) ആട്രിബ്യൂട്ടുകൾക്കുമുള്ള യഥാർത്ഥ ബ്രൗസർ പിന്തുണയാണ് നിങ്ങൾ തിരയുന്നതെങ്കിൽ, ഞാൻ നിർദ്ദേശിക്കുന്നു HTML-നുള്ള caniuse.com ഒപ്പം ARIA-യ്ക്കുള്ള പ്രവേശനക്ഷമത പിന്തുണ ബ്രൗസർ പിന്തുണയിൽ ഏറ്റവും പുതിയ 4-1-1 ലഭിക്കാൻ. ബ്രൗസർ സാങ്കേതികവിദ്യയെ പിന്തുണയ്ക്കുന്നില്ലെങ്കിൽ, സ്ക്രീൻ റീഡറും പിന്തുണയ്ക്കില്ല എന്ന കാര്യം ഓർക്കുക.
ഡിജിറ്റൽ എ 11 വൈ ബ്രൗസറിൻ്റെയും സ്ക്രീൻ റീഡറിൻ്റെയും വിവരങ്ങൾ അവരുടെ ലേഖനത്തോടൊപ്പം സംഗ്രഹിക്കാൻ സഹായിക്കും, സ്ക്രീൻ റീഡറുകളും ബ്രൗസറുകളും! പ്രവേശനക്ഷമത പരിശോധനയ്ക്കുള്ള ഏറ്റവും മികച്ച കോമ്പിനേഷൻ ഏതാണ്?
ലിങ്ക്
https://support.apple.com/guide/voiceover/with-the-voiceover-rotor-mchlp2719/mac
https://www.w3.org/TR/wai-aria/
https://www.w3.org/WAI/standards-guidelines/aria/
https://support.google.com/accessibility/android/answer/6283677?hl=en
https://support.google.com/accessibility/android/answer/6283677?hl=en
- SEO പവർ ചെയ്ത ഉള്ളടക്കവും PR വിതരണവും. ഇന്ന് ആംപ്ലിഫൈഡ് നേടുക.
- PlatoData.Network ലംബ ജനറേറ്റീവ് Ai. സ്വയം ശാക്തീകരിക്കുക. ഇവിടെ പ്രവേശിക്കുക.
- PlatoAiStream. Web3 ഇന്റലിജൻസ്. വിജ്ഞാനം വർധിപ്പിച്ചു. ഇവിടെ പ്രവേശിക്കുക.
- പ്ലേറ്റോഇഎസ്ജി. കാർബൺ, ക്ലീൻ ടെക്, ഊർജ്ജം, പരിസ്ഥിതി, സോളാർ, മാലിന്യ സംസ്കരണം. ഇവിടെ പ്രവേശിക്കുക.
- പ്ലേറ്റോ ഹെൽത്ത്. ബയോടെക് ആൻഡ് ക്ലിനിക്കൽ ട്രയൽസ് ഇന്റലിജൻസ്. ഇവിടെ പ്രവേശിക്കുക.
- അവലംബം: https://css-tricks.com/demystifying-screen-readers-accessible-forms-best-practices/