તમારી વેબસાઇટ કેવી રીતે સુલભ બનાવવી: WCAG 2.2 સ્ટાર્ટર ગાઇડ
વેબસાઇટ ઍક્સેસિબલ બનાવવા માટે, તેને એવી રીતે બનાવો કે લોકો માઉસની જેમ કીબોર્ડ, સ્ક્રીન રીડર, ઝૂમ અથવા સ્વીચ ડિવાઇસ વડે પણ તેનો ઉપયોગ કરી શકે: બટન, લિંક, હેડિંગ અને ફોર્મ લેબલ માટે સાચા HTML એલિમેન્ટ વાપરો, ઇમેજને અર્થપૂર્ણ alt text આપો, લખાણનો કોન્ટ્રાસ્ટ ઊંચો રાખો અને ફોકસ દેખાય તેવું બનાવો. લક્ષ્ય WCAG 2.2 Level AA છે. ઓટોમેટેડ ચેકર્સ સમસ્યાનો ભાગ પકડે છે; દસ મિનિટની કીબોર્ડ અને સ્ક્રીન રીડર ચકાસણી બાકીનો ઘણો ભાગ પકડે છે.
વ્યવહારમાં "ઍક્સેસિબલ" નો અર્થ
ઍક્સેસિબિલિટી લોકો વિશે છે: અંધ વ્યક્તિ જે સ્ક્રીન રીડર વાપરે છે, ધ્રુજારી ધરાવતી વ્યક્તિ જે કીબોર્ડથી નેવિગેટ કરે છે, ઓછી દૃષ્ટિવાળી વ્યક્તિ જે 200% સુધી ઝૂમ કરે છે, તેજ તડકામાં વાંચતી વ્યક્તિ, કે અસ્થાયી રીતે તૂટેલા કાંડાવાળી વ્યક્તિ. સારી ઍક્સેસિબિલિટી સામાન્ય રીતે બધા માટે સાઇટ વધુ સારી બનાવે છે — સ્પષ્ટ માળખું, વાંચી શકાય તેવું લખાણ, અને ભૂલો સમજાવતાં ફોર્મ.
સંદર્ભ ધોરણ W3C ની Web Content Accessibility Guidelines (WCAG) છે. સપ્ટેમ્બર 2026 સુધી, વર્તમાન આવૃત્તિ WCAG 2.2 છે (ઓક્ટોબર 2023 માં પ્રકાશિત, ડિસેમ્બર 2024 માં અપડેટ); WCAG 3 પ્રારંભિક ડ્રાફ્ટ છે. WCAG ચાર સિદ્ધાંતોની આસપાસ ગોઠવાયેલું છે — કન્ટેન્ટ અનુભવી શકાય તેવું (perceivable), ચલાવી શકાય તેવું (operable), સમજી શકાય તેવું (understandable) અને મજબૂત (robust) હોવું જોઈએ — અને તેના ત્રણ અનુરૂપતા સ્તર છે:
| સ્તર | તેનો અર્થ | કોણ તેને લક્ષ્ય બનાવે છે |
|---|---|---|
| A | ન્યૂનતમ; તેના વિના કેટલાક લોકો સાઇટ બિલકુલ વાપરી શકતા નથી | દરેક |
| AA | સામાન્ય લક્ષ્ય; કોન્ટ્રાસ્ટ, ફોકસ, માપ બદલવું, ભૂલ સંભાળવી આવરી લે છે | મોટાભાગની સંસ્થાઓ અને ઘણા કાયદા |
| AAA | સૌથી કડક; બધા કન્ટેન્ટ માટે શક્ય નથી | ચોક્કસ સેવાઓ અને પ્રેક્ષકો |
ઘણી જગ્યાએના કાયદા WCAG નો ઉલ્લેખ કરે છે — દાખલા તરીકે યુરોપિયન Accessibility Act, જે જૂન 2025 થી EU માં ઘણી ગ્રાહક-લક્ષી ડિજિટલ સેવાઓ પર લાગુ થાય છે. તમને કયા નિયમો લાગુ પડે તે તમે ક્યાં કામ કરો છો અને શું વેચો છો તેના પર આધાર રાખે છે; ખાતરી ન હોય તો સલાહકાર સાથે તપાસો. આ ગાઇડ વ્યવહારુ કામ આવરી લે છે.
વિકલ્પો: ત્યાં કેવી રીતે પહોંચવું
| અભિગમ | કોના માટે સારું | ટ્રેડ-ઓફ |
|---|---|---|
| શરૂઆતથી જ બનાવો | નવી સાઇટ અને એપ | એકંદરે સૌથી ઓછી મહેનત; શરૂઆતમાં કહેવું જરૂરી છે |
| ઓડિટ અને સુધારો | હાલની સાઇટ | વાસ્તવિક સમસ્યાઓ શોધે છે; દરેક પેજ માટે કેન્દ્રિત પાસ લે છે |
| વ્યાવસાયિક ઓડિટ | નિયંત્રિત ક્ષેત્રો, મોટી સાઇટ, સરકારી સંસ્થાઓ | સંપૂર્ણ અને દસ્તાવેજીકૃત; ખર્ચ થાય છે |
| ઓવરલે વિજેટ | ભલામણ નથી | નીચેના કોડને ઠીક કરી શકતું નથી |
મોટાભાગની નાની સાઇટ માટે પહેલી બે રીત પૂરતી છે: AI ને શરૂઆતથી ઍક્સેસિબલ રીતે બનાવવાનું કહો, પછી લોન્ચ પહેલાં ઓડિટ કરો.
સૌથી મહત્ત્વના સુધારા
સાચા HTML એલિમેન્ટ વાપરો
મોટાભાગની ઍક્સેસિબિલિટી સાચા HTML થી મફતમાં મળે છે. <button> ફોકસ કરી શકાય છે, Enter અને Space સાથે કામ કરે છે, અને બટન તરીકે જાહેર થાય છે. ક્લિક હેન્ડલર સાથેનું <div> આમાંથી કંઈ નથી. AI-બનાવેલો કોડ ક્યારેક બધે સ્ટાઇલ કરેલા div વાપરે છે; સેમેન્ટિક એલિમેન્ટ માંગો:
- ક્રિયાઓ માટે
<button>, નેવિગેશન માટે<a href> - દરેક પેજ પર એક
<h1>, પછી ક્રમમાં<h2>,<h3>— સ્ક્રીન રીડર વપરાશકર્તાઓ હેડિંગ્સ વચ્ચે કૂદે છે - લેન્ડમાર્ક્સ:
<header>,<nav>,<main>,<footer> - દરેક ફોર્મ ફીલ્ડ સાથે જોડાયેલું
<label> <html lang="en">માં પેજની ભાષા
ARIA attributes ત્યારે જ વાપરો જ્યારે કોઈ મૂળ એલિમેન્ટ બંધબેસતું ન હોય — દાખલા તરીકે કસ્ટમ ટેબ સેટ અથવા combobox માટે. ખોટું ARIA ન હોય તેના કરતાં પણ ખરાબ છે.
કીબોર્ડ ઍક્સેસ અને દેખાતું ફોકસ
માઉસથી તમે જે કંઈ કરી શકો તે ફક્ત કીબોર્ડથી પણ કામ કરવું જોઈએ (WCAG 2.1.1). પેજ પર Tab દબાવો: દરેક લિંક, બટન અને ફીલ્ડ તાર્કિક ક્રમમાં પહોંચી શકાય તેવું હોવું જોઈએ, અને ફોકસ ક્યાં છે તે હંમેશાં દેખાવું જોઈએ (2.4.7 Focus Visible). WCAG 2.2 એ ઉમેર્યું કે ફોકસ થયેલું તત્વ સ્ટીકી હેડર અથવા કૂકી બેનરની પાછળ સંપૂર્ણપણે છુપાયેલું ન હોવું જોઈએ (2.4.11, Level AA).
સામાન્ય નિષ્ફળતાઓ: ફક્ત હોવર પર ખૂલતા મેનુ, એવા મોડલ જે ફોકસને બાંધતા નથી અથવા Escape થી બંધ થતા નથી, અને CSS માં outline: none જેની બદલીમાં કંઈ નથી.
લખાણના વિકલ્પો
દરેક અર્થપૂર્ણ ઇમેજને એવો alt text જોઈએ જે સંદર્ભમાં શું બતાવે છે તે કહે ("શેફ ટેસ્ટિંગ મેનુ પ્લેટ કરે છે", "image1.jpg" નહીં). સુશોભન ઇમેજને ખાલી alt="" મળે, જેથી સ્ક્રીન રીડર તેને છોડી દે. ફક્ત આઇકન ધરાવતા બટનને ઍક્સેસિબલ નામ જોઈએ ("Close", "Search"). વિડિયોને કેપ્શન જોઈએ; ઑડિયોને ટ્રાન્સક્રિપ્ટ.
રંગ અને કોન્ટ્રાસ્ટ
WCAG 2.2 AA સામાન્ય લખાણ માટે ઓછામાં ઓછો કોન્ટ્રાસ્ટ રેશિયો 4.5:1 (1.4.3) અને મોટા લખાણ માટે 3:1, તેમજ ઇનપુટ બોર્ડર અને અર્થપૂર્ણ આઇકન જેવા ઇન્ટરફેસ ભાગો માટે 3:1 (1.4.11) માંગે છે. આછા ગ્રે પ્લેસહોલ્ડર લખાણ અને ફિક્કા બટન સામાન્ય નિષ્ફળતાઓ છે. ઉપરાંત, અર્થ આપવા માટે ફક્ત રંગ ક્યારેય ન વાપરો — અમાન્ય ફીલ્ડ પર લાલ બોર્ડરને ભૂલ સંદેશ પણ જોઈએ.
માપ બદલવું અને રિફ્લો
લખાણ 200% ઝૂમ પર પણ ઉપયોગી રહેવું જોઈએ (1.4.4), અને કન્ટેન્ટ 320 CSS પિક્સલની પહોળાઈ પર બાજુમાં સ્ક્રોલ કર્યા વિના કામ કરવું જોઈએ (1.4.10). યોગ્ય રિસ્પોન્સિવ લેઆઉટ મોટાભાગનું આ સંભાળે છે.
ટાર્ગેટ કદ, ફોર્મ અને ભૂલો
- ટાર્ગેટ કદ: WCAG 2.2 AA પોઇન્ટર ટાર્ગેટ ઓછામાં ઓછા 24 બાય 24 CSS પિક્સલ માંગે છે, અથવા નાનાની આસપાસ પૂરતું અંતર (2.5.8). ફોન પર મોટું વધુ દયાળુ છે.
- ફોર્મ: દૃશ્યમાન લેબલ (ફક્ત પ્લેસહોલ્ડર નહીં), સ્પષ્ટ સૂચનાઓ, અને ભૂલ સંદેશા જે કહે કે શું ખોટું છે અને કેવી રીતે ઠીક કરવું, ફીલ્ડની બાજુમાં.
- લોગિન: લોકોને વૈકલ્પિક વિના કોયડો ઉકેલાવો કે કોડ ઉતારવા ન કહો; પાસવર્ડ મેનેજર અને પેસ્ટને મંજૂરી આપો (3.3.8 Accessible Authentication).
કામ કરતા પ્રોમ્પ્ટ
આ સાઇટને WCAG 2.2 Level AA સુધી બનાવો: સેમેન્ટિક HTML લેન્ડમાર્ક્સ, દરેક પેજ પર એક h1 અને ક્રમમાં હેડિંગ્સ, સાચા button અને link એલિમેન્ટ, દરેક ફોર્મ ફીલ્ડ પર લેબલ, દૃશ્યમાન ફોકસ સ્ટાઇલ, ઓછામાં ઓછો 4.5:1 લખાણ કોન્ટ્રાસ્ટ, અર્થપૂર્ણ ઇમેજ પર alt text અને સુશોભન પર alt="", અને html lang સેટ.
/signup અને /checkout પેજની ઍક્સેસિબિલિટી ઓડિટ કરો. ફક્ત કીબોર્ડ ઉપયોગ, ફોકસ ક્રમ, દૃશ્યમાન ફોકસ, લેબલ, ભૂલ સંદેશા, કોન્ટ્રાસ્ટ અને આઇકન બટન માટે સ્ક્રીન રીડર નામ તપાસો. દરેક સમસ્યા WCAG માપદંડ સાથે યાદી બનાવો, પછી દ્રશ્ય ડિઝાઇનને જરૂર કરતાં વધુ બદલ્યા વિના તેને ઠીક કરો.
મોબાઇલ મેનુ કીબોર્ડથી વાપરી શકાતું નથી. તેને aria-expanded સાથેનું બટન બનાવો, ખુલે ત્યારે ફોકસ મેનુમાં લઈ જાઓ, Escape થી બંધ કરો અને ફોકસ બટન પર પાછું આપો.
પગલા દર પગલા
- ઓટોમેટેડ ચેક ચલાવો. Chrome DevTools માં Lighthouse નો Accessibility વિભાગ, અથવા axe બ્રાઉઝર એક્સ્ટેન્શન, દરેક મુખ્ય પેજ પર. તે જે કંઈ બતાવે તે બધું ઠીક કરો.
- માઉસ કાઢી નાખો. દરેક પેજ પર Tab દબાવો અને દરેક મુખ્ય કામ પૂરું કરો — સાઇન અપ, શોધ, ચેકઆઉટ. જે ન પહોંચાય, જેનું ફોકસ ન દેખાય, અથવા જેમાંથી બહાર ન નીકળાય તે નોંધો.
- 200% પર ઝૂમ કરો અને વિન્ડો ફોનની પહોળાઈ સુધી સાંકડી કરો. કંઈ કપાવું ન જોઈએ કે બાજુમાં સ્ક્રોલ ન જોઈએ.
- દસ મિનિટ માટે સ્ક્રીન રીડર અજમાવો: Mac અને iPhone પર VoiceOver, Android પર TalkBack, અથવા Windows પર NVDA (મફત). હેડિંગ્સ, લિંક અને ફોર્મ ફીલ્ડ સાંભળો. નામ વિનાનું "Button", અથવા "link, click here", એટલે કામ બાકી છે.
- લખાણ, બટન અને ઇનપુટ માટે કોન્ટ્રાસ્ટ તપાસો કોન્ટ્રાસ્ટ ચેકરથી.
- ઠીક કરો, પછી એ જ કામો ફરી ચકાસો.
- ઍક્સેસિબિલિટી સ્ટેટમેન્ટ પ્રકાશિત કરો જે કહે કે તમે કયા ધોરણને લક્ષ્ય બનાવો છો અને સમસ્યાઓ કેવી રીતે જાણ કરવી — અને તે જાણ કરેલી બાબતોના જવાબ આપો.
સામાન્ય ભૂલો
- કોડ ઠીક કરવાને બદલે ઓવરલે વિજેટ પર આધાર રાખવો.
- ફોકસ આઉટલાઇન દૂર કરવી કારણ કે તે અવ્યવસ્થિત લાગે છે, બદલીમાં કંઈ વિના.
- પ્લેસહોલ્ડર લખાણ એકમાત્ર લેબલ તરીકે. કોઈ ટાઇપ કરવાનું શરૂ કરે ત્યારે તે ગાયબ થઈ જાય છે અને ઘણીવાર ઓછા કોન્ટ્રાસ્ટવાળું હોય છે.
- "Click here" અને "Read more" લિંક. સંદર્ભ વિના, સ્ક્રીન રીડર વપરાશકર્તાઓ એકસરખી લિંકની યાદી સાંભળે છે.
- કીવર્ડથી ભરેલો alt text. Alt text લોકો માટે છે; ઇમેજનું વર્ણન કરો.
- એક જ વાર ચકાસવું. દરેક નવી સુવિધા કીબોર્ડ ઍક્સેસ તોડી શકે છે. તમારી લોન્ચ પહેલાંની ચકાસણી માં કીબોર્ડ પાસ ઉમેરો.
ઍક્સેસિબિલિટી ચેકલિસ્ટ
- મુખ્ય પેજ પર ઓટોમેટેડ ચેક (Lighthouse અથવા axe) સ્વચ્છ
- દરેક કામ ફક્ત કીબોર્ડથી પૂરું કરી શકાય
- ફોકસ હંમેશાં દેખાય અને સ્ટીકી તત્વોની પાછળ ક્યારેય છુપાયેલું ન હોય
- સેમેન્ટિક હેડિંગ્સ, લેન્ડમાર્ક્સ, બટન અને લિંક;
langસેટ - અર્થપૂર્ણ alt text; સુશોભન ઇમેજ
alt=""; વિડિયો પર કેપ્શન - લખાણ કોન્ટ્રાસ્ટ ≥ 4.5:1 (મોટું લખાણ ≥ 3:1); UI ભાગો ≥ 3:1
- 200% ઝૂમ અને 320 px પહોળાઈ પર કામ કરે
- દરેક ફોર્મ ફીલ્ડ પર દૃશ્યમાન લેબલ અને સ્પષ્ટ ભૂલ સંદેશા
- સમસ્યાઓ જાણ કરવાના રસ્તા સાથે ઍક્સેસિબિલિટી સ્ટેટમેન્ટ
આની પાછળના ખ્યાલો માટે, વેબ ઍક્સેસિબિલિટી શું છે વાંચો. ઍક્સેસિબલ ડિઝાઇન અને સારી ડિઝાઇન ઘણી વાર ઓવરલેપ થાય છે; AI વડે સારી દેખાતી એપ કેવી રીતે ડિઝાઇન કરવી દ્રશ્ય બાજુ આવરી લે છે.
Mythex પર ઍક્સેસિબિલિટી
Mythex તમે માંગો તે ધોરણ સાથે બનાવે છે, એટલે "WCAG 2.2 AA" તમારા પહેલા પ્રોમ્પ્ટમાં અને ફોલો-અપમાં મૂકો. નાની સ્ક્રીન તપાસવા માટે તમે Preview ની ફોન-સાઇઝ ફ્રેમ વાપરી શકો છો (Preview and Code), પણ કીબોર્ડ, ઝૂમ અને સ્ક્રીન રીડર પરીક્ષણો પ્રકાશિત URL પર અથવા પોતાની ટેબમાં ખોલેલા preview પર શ્રેષ્ઠ કામ કરે છે. એજન્ટને કોઈ પેજ ઓડિટ કરવા, જે મળે તે ઠીક કરવા કહો, પછી સુધારાઓ તમે જાતે ચકાસો — ઓટોમેટેડ પાસ એ શરૂઆત છે, અંતિમ મંજૂરી નથી.
પ્રશ્નો
વેબસાઇટ માટે હાલનું ઍક્સેસિબિલિટી ધોરણ કયું છે?
સપ્ટેમ્બર 2026 સુધી, W3C નું વર્તમાન ધોરણ WCAG 2.2 છે, જે ઓક્ટોબર 2023 માં પ્રથમ પ્રકાશિત થયું હતું. મોટાભાગની સંસ્થાઓ અને ઘણા કાયદાઓ Level AA ને લક્ષ્ય બનાવે છે. WCAG 3 હજુ પ્રારંભિક ડ્રાફ્ટમાં છે.
શું ઍક્સેસિબિલિટી ઓવરલે મારી સાઇટને અનુરૂપ બનાવી શકે?
એક પર આધાર ન રાખો. ઓવરલે પેજની ઉપર ટૂલબાર ઉમેરે છે, પણ નીચેના કોડમાં ખૂટતા લેબલ, તૂટેલી કીબોર્ડ ઍક્સેસ કે નબળા માળખાને ઠીક કરી શકતા નથી. સાઇટને જાતે ઠીક કરવી એ જ તેને ઉપયોગી બનાવે છે.
શું ઓટોમેટેડ ચેકર્સ દરેક સમસ્યા શોધે છે?
ના. Lighthouse અને axe જેવા ટૂલ્સ alt text ખૂટવો, ઓછો કોન્ટ્રાસ્ટ અને લેબલ વિનાના ફીલ્ડ જેવી બાબતો પકડે છે, પણ ઘણી સમસ્યાઓ — ગૂંચવણભર્યો ફોકસ ક્રમ, અર્થહીન લિંક લખાણ, હાજર પણ ખોટો alt text — માટે કીબોર્ડ અને સ્ક્રીન રીડર સાથે વ્યક્તિએ તપાસવાની જરૂર છે.
WCAG કયો કોન્ટ્રાસ્ટ રેશિયો માંગે છે?
WCAG 2.2 Level AA સામાન્ય લખાણ માટે ઓછામાં ઓછો 4.5:1 અને મોટા લખાણ માટે 3:1 માંગે છે, તેમજ ઇનપુટ બોર્ડર અને અર્થ આપતા આઇકન જેવા યુઝર ઇન્ટરફેસ ઘટકો માટે 3:1 માંગે છે.