𝗛𝗼𝘄 𝘁𝗼 𝗪𝗶𝗿𝗲 𝗔𝗥𝗜𝗔 𝗙𝗼𝗿 𝗙𝗼𝗿𝗺 𝗘𝗿𝗿𝗼𝗿𝘀
મોટાભાગના ફોર્મ દ્રશ્યમાન વપરાશકર્તાઓ (sighted users) માટે સારી રીતે કામ કરે છે પરંતુ સહાયક ટેકનોલોજી (assistive technology) નો ઉપયોગ કરતા લોકો માટે નિષ્ફળ જાય છે. એક દ્રશ્યમાન વપરાશકર્તા લાલ બોર્ડર અને એરર મેસેજ જોઈ શકે છે. સ્ક્રીન રીડર વપરાશકર્તાને ઘણીવાર કંઈ જ સંભળાતું નથી.
તમે બે ARIA એટ્રિબ્યુટ્સ અને એક નાની લાઈવ રીજન (live region) દ્વારા આ સમસ્યા સુધારી શકો છો. આ ફેરફાર 50 લાઇનથી ઓછા કોડમાં થઈ શકે છે.
અહીં તમે તમારા એરર્સને તમારા ઇનપુટ્સ સાથે કેવી રીતે જોડી શકો છો તે આપેલું છે.
- aria-describedby નો ઉપયોગ કરો
ઇનપુટે એરર એલિમેન્ટ તરફ નિર્દેશ કરવો જરૂરી છે. તમારા ઇનપુટમાં
aria-describedbyઉમેરો અને તેની વેલ્યુ તમારા એરરdivની ID તરીકે સેટ કરો.
ઉદાહરણ:
- Input ID: email-input
- Error ID: email-error
- Code:
aria-describedby="email-error"
આ સ્ક્રીન રીડરને જણાવે છે કે જ્યારે વપરાશકર્તા ઇનપુટ પર ફોકસ કરે ત્યારે એરર મેસેજ વાંચવો. જો તમારી પાસે હેલ્પ ટેક્સ્ટ હોય, તો તમે એકથી વધુ ID ઉમેરી શકો છો.
- aria-invalid નો ઉપયોગ કરો
આ એટ્રિબ્યુટ વપરાશકર્તાને જણાવે છે કે દાખલ કરેલી માહિતી ખોટી છે. જ્યારે એરર દેખાય ત્યારે
aria-invalidનેtrueસેટ કરો. જ્યારે એરર દૂર થાય ત્યારે તેનેfalseસેટ કરો.
એક સામાન્ય ભૂલ એ છે કે રેપર div ને લાલ રંગ આપવો પરંતુ aria-invalid ફક્ત ઇનપુટ પર જ મૂકવો. આનાથી વિસંગતતા ઊભી થાય છે. ખાતરી કરો કે તમારી વિઝ્યુઅલ સ્ટાઇલ અને તમારા ARIA એટ્રિબ્યુટ્સ એક જ એલિમેન્ટને ટાર્ગેટ કરે છે.
- લાઈવ રીજન (live region) ઉમેરો
જો વપરાશકર્તા ટાઈપ કરી રહ્યો હોય તે દરમિયાન એરર આવે, તો કદાચ તેઓ તે ચૂકી જાય. તમારા એરર
divપરaria-live="polite"નો ઉપયોગ કરો.
aria-live="polite"સ્ક્રીન રીડરને કુદરતી વિરામ (natural pause) દરમિયાન એરરની જાહેરાત કરવા કહે છે.- જ્યાં સુધી કટોકટી (emergency) ન હોય ત્યાં સુધી "assertive" નો ઉપયોગ કરશો નહીં. ફોર્મ એરર્સ કટોકટી નથી.
- એસિંક (async) વેલિડેશન હેન્ડલ કરો જો તમે બેકગ્રાઉન્ડમાં યુઝરનેમ અથવા એડ્રેસ ચેક કરતા હોવ, તો વપરાશકર્તાઓને જાણવાની જરૂર છે કે સિસ્ટમ કામ કરી રહી છે.
- પેટર્ન A: જ્યારે ચેક ચાલતું હોય ત્યારે ઇનપુટ પર
aria-busy="true"નો ઉપયોગ કરો. - પેટર્ન B: "Verifying username..." જેવા સ્ટેટસ અપડેટ્સની જાહેરાત કરવા માટે એક હિડન લાઈવ રીજનનો ઉપયોગ કરો.
વિવિધ સ્ક્રીન રીડર્સમાં પેટર્ન B વધુ વિશ્વસનીય છે.
ટેસ્ટિંગ અનિવાર્ય છે. ઓટોમેટેડ ટૂલ્સ મદદરૂપ છે પરંતુ તેઓ મેન્યુઅલ ટેસ્ટિંગનું સ્થાન લઈ શકતા નથી. Windows પર NVDA અથવા macOS પર VoiceOver નો ઉપયોગ કરો.
તમારી ટેસ્ટ ચેકલિસ્ટ:
- ફિલ્ડમાં ટેબ (Tab) કરો. લેબલ જાહેર થવું જોઈએ.
- અમાન્ય (invalid) વેલ્યુ દાખલ કરો. એરર જાહેર થવી જોઈએ.
- ફિલ્ડમાં પાછા ટેબ કરો. લેબલ એરરની સાથે જાહેર થવું જોઈએ.
- એરર સુધારો. એરર મેસેજ દૂર થઈ જવો જોઈએ.