Web Accessibility શું છે? WCAG અને inclusive design સમજાવ્યું

Web accessibility નો અર્થ છે વેબસાઇટ્સ અને apps એવી રીતે બનાવવી કે વિકલાંગ લોકો તેને વાપરી શકે — પછી તેઓ અંધ હોય અને સ્ક્રીન રીડર વાપરતા હોય, માઉસ ન વાપરી શકતા હોય, ઓછી દૃષ્ટિ કે રંગ-અંધત્વ ધરાવતા હોય, બહેરા હોય, અથવા જ્ઞાનાત્મક કે શીખવાની વિકલાંગતા ધરાવતા હોય. વ્યવહારમાં તે છબીઓ માટે લખાણ વિકલ્પો, પૂરતો રંગ contrast, યોગ્ય લેબલ્સવાળા forms, અને ફક્ત કીબોર્ડથી કામ કરતી દરેક વસ્તુ જેવી બાબતોમાં આવે છે. તેનું આંતરરાષ્ટ્રીય ધોરણ WCAG છે, જે W3C ના Web Content Accessibility Guidelines છે.

Accessibility ને ઘણી વાર a11y તરીકે ટૂંકાવાય છે — "a," પછી 11 અક્ષર, પછી "y."

AI સાથે બનાવતી વખતે accessibility શા માટે મહત્વની છે

AI builders એવી apps બનાવવામાં સારા છે જે સારી દેખાય છે. Accessibility મોટે ભાગે એવી બાબતો વિશે છે જે screenshot માં દેખાતી નથી: શું બટન ખરેખર બટન છે, શું input પાસે એવું લેબલ છે જે સ્ક્રીન રીડર જાહેર કરી શકે, શું તમે Tab કી વડે મેનૂ સુધી પહોંચી શકો છો.

એટલે પૂછવું મહત્વનું છે:

તે સહેલાઈથી ચૂકી જવાય છે. કસ્ટમ-સ્ટાઇલ થયેલો dropdown એકદમ સરસ દેખાઈ શકે અને માઉસ વિના વાપરવો અશક્ય હોય. જ્યાં સુધી તમે તેની ચકાસણી ન કરો ત્યાં સુધી તમને ખબર નહીં પડે.
શરૂઆતમાં સાચું કરવું સસ્તું પડે છે. પહેલા prompt થી accessible components માગવાનો ખર્ચ લગભગ કંઈ નથી. પૂર્ણ થયેલી app ને પછીથી સુધારવામાં દરેક સ્ક્રીનને સ્પર્શ કરવો પડે.
તે દરેકને મદદ કરે છે. Captions ઘોંઘાટવાળી જગ્યાએ લોકોને મદદ કરે, સારો contrast તડકામાં ફોન વાપરનારાઓને મદદ કરે, અને સ્પષ્ટ લેબલ્સ બધાને forms ઝડપથી ભરવામાં મદદ કરે.
તે SEO સાથે ઓવરલેપ થાય છે. યોગ્ય headings, વર્ણનાત્મક links અને alt text search engines ને પણ તમારા પેજ સમજવામાં મદદ કરે છે — જુઓ AI-બનાવેલી વેબસાઇટ્સ માટે SEO.
તે જરૂરી હોઈ શકે છે. તમે ક્યાં કાર્ય કરો છો અને કોને સેવા આપો છો તેના આધારે, accessibility કાનૂની ફરજ હોઈ શકે છે.

એક રોજિંદો ઉદાહરણ

ઇમારતના પ્રવેશદ્વારનો વિચાર કરો.

પગથિયાં ઘણા લોકો માટે બરાબર કામ કરે છે. રેમ્પ વ્હીલચેર વપરાશકર્તાઓ માટે કામ કરે છે — અને પ્રૅમ સાથેના માતા-પિતા, ટ્રોલી સાથેના ડિલિવરી કામદારો અને સૂટકેસ સાથેના મુસાફરો માટે પણ. સ્વચાલિત દરવાજા, સ્પષ્ટ સાઇન, લિફ્ટ બટન પર બ્રેઇલ અને સારી પ્રકાશ વ્યવસ્થા કોઈ એકના માટે અવરોધ દૂર કરે છે.

વેબ accessibility એ જ વિચાર ડિજિટલ જગ્યાઓ માટે છે: તમારી app ના રેમ્પ, સાઇન અને હેન્ડરેલ્સ. અને ઇમારતની જેમ, યોજનામાં રેમ્પ ઉમેરવો એ કોંક્રીટ સુકાયા પછી ઉમેરવા કરતાં ઘણું સહેલું છે.

WCAG એક નજરમાં

WCAG W3C ના Web Accessibility Initiative દ્વારા પ્રકાશિત થાય છે. હાલનું સંસ્કરણ WCAG 2.2 છે, જે ઓક્ટોબર 2023 માં પ્રથમ પ્રકાશિત થયું. તે પાછળની તરફ સુસંગત છે: WCAG 2.2 ને પૂર્ણ કરતી સામગ્રી 2.1 અને 2.0 ને પણ પૂર્ણ કરે છે, અને W3C નવીનતમ સંસ્કરણ વાપરવાને પ્રોત્સાહન આપે છે. WCAG 2.2 ને આંતરરાષ્ટ્રીય ધોરણ ISO/IEC 40500:2025 તરીકે પણ મંજૂરી મળી છે. WCAG 3 એક ઘણું અલગ સંસ્કરણ છે જે પ્રારંભિક ડ્રાફ્ટ તરીકે વિકસાવાઈ રહ્યું છે, પૂર્ણ થયેલું ધોરણ નહીં.

WCAG ચાર સિદ્ધાંતો હેઠળ ગોઠવાયેલું છે, જેને ઘણી વાર POUR તરીકે યાદ રાખવામાં આવે છે:

સિદ્ધાંત	અર્થ	ઉદાહરણો
Perceivable (સમજી શકાય તેવું)	લોકો જે ઇન્દ્રિયો વાપરે છે તેના વડે સામગ્રી ગ્રહણ કરી શકે	છબીઓ માટે alt text, વિડિયો માટે captions, પૂરતો contrast
Operable (ચલાવી શકાય તેવું)	લોકો નિયંત્રણો વાપરી શકે અને નેવિગેટ કરી શકે	કીબોર્ડ access, લંબાવી ન શકાય તેવી સમય મર્યાદા નહીં, દૃશ્યમાન focus
Understandable (સમજી શકાય તેવું)	સામગ્રી અને વર્તન અર્થપૂર્ણ લાગે	સ્પષ્ટ લેબલ્સ, મદદરૂપ error messages, સુસંગત નેવિગેશન
Robust (મજબૂત)	વિવિધ બ્રાઉઝર્સ અને assistive technologies સાથે કામ કરે	યોગ્ય HTML elements, નિયંત્રણો માટે સાચા નામ અને roles

દરેક માર્ગદર્શિકામાં ત્રણ સ્તરે ચકાસી શકાય તેવા success criteria છે:

Level A — લઘુત્તમ. આમાં નિષ્ફળ જવાથી કેટલાક લોકો સંપૂર્ણપણે અટકી જાય છે.
Level AA — પ્રમાણભૂત લક્ષ્ય, અને તે સ્તર જેનો મોટાભાગના કાયદા અને નીતિઓ ઉલ્લેખ કરે છે.
Level AAA — સર્વોચ્ચ સ્તર. કેટલાક ભાગોમાં લક્ષ્ય રાખવા ઉપયોગી છે, પણ W3C આખી સાઇટ માટે તેને જરૂરી બનાવવાની ભલામણ કરતું નથી, કારણ કે કેટલીક સામગ્રી તેને પૂર્ણ કરી શકતી નથી.

WCAG 2.2 એ 2.1 માં નવ success criteria ઉમેર્યા, જેમાં લેવલ AA પર Target Size (Minimum) નો સમાવેશ થાય છે — ક્લિક કરી શકાય તેવા targets સામાન્ય રીતે ઓછામાં ઓછા 24 બાય 24 CSS pixels હોવા જોઈએ, અપવાદો સાથે — અને Accessible Authentication (Minimum), જે યાદશક્તિ પર આધારિત અથવા કોયડા જેવા login પગલાંને મર્યાદિત કરે છે, જેમ કે પાસવર્ડ ફરી ટાઇપ કરાવવો પણ તેને paste કરવાની મંજૂરી ન આપવી. તેણે જૂના "Parsing" criterion ને પણ અપ્રચલિત તરીકે દૂર કર્યો.

અહીં એક sign-up form છે જે AI બનાવી શકે, અને accessibility તપાસ શું શોધે:

સમસ્યા	કોને અસર કરે છે	ઉકેલ
Inputs માં લેબલને બદલે placeholder લખાણ ("Email")	સ્ક્રીન રીડર વપરાશકર્તાઓ; જે કોઈ લખવાનું શરૂ કર્યા પછી field શું હતું તે ભૂલી જાય	દરેક input સાથે જોડાયેલું દૃશ્યમાન `<label>`
સફેદ પર આછું ગ્રે લખાણ, 4.5:1 થી ઘણું ઓછું contrast	ઓછી દૃષ્ટિવાળા લોકો, બહાર રહેલા કોઈ પણ	ઘેરું લખાણ જે 4.5:1 contrast ratio પૂર્ણ કરે
ભૂલો ફક્ત લાલ border તરીકે બતાવાય	રંગ-અંધ વપરાશકર્તાઓ, સ્ક્રીન રીડર વપરાશકર્તાઓ	field ની બાજુમાં લખાણ સંદેશ, જે સ્ક્રીન રીડરોને જાહેર થાય
"Sign up" એ સ્ટાઇલ થયેલું `<div>` છે, `<button>` નહીં	કીબોર્ડ અને સ્ક્રીન રીડર વપરાશકર્તાઓ તેને સક્રિય કરી શકતા નથી	સાચું `<button>` element વાપરો
Fields માં Tab કરતી વખતે દૃશ્યમાન outline નથી	કીબોર્ડ વપરાશકર્તાઓ ક્યાં છે તે ગુમાવે છે	સ્પષ્ટ focus style
Logo છબીમાં alt text નથી	સ્ક્રીન રીડર વપરાશકર્તાઓ ફાઇલનું નામ સાંભળે છે	"Acme Bookings" જેવો alt text

આ ફિક્સેસમાંથી કોઈ પણ form કેવો દેખાય છે તે ખાસ બદલતો નથી. પણ તે બધા કેટલાક લોકો તેનો ઉપયોગ કરી શકે કે નહીં તે બદલે છે.

મુખ્ય શબ્દો

શબ્દ	અર્થ
Screen reader	સ્ક્રીનને મોટેથી અથવા બ્રેઇલ ડિસ્પ્લેને વાંચી સંભળાવતું સૉફ્ટવેર, જેમ કે VoiceOver, NVDA અથવા JAWS.
Alt text	છબીનું લખાણ વર્ણન, જે સ્ક્રીન રીડર વાંચે છે. સુશોભન છબીઓને ખાલી alt text મળે છે જેથી તે છોડી દેવાય.
Contrast ratio	લખાણ અને પૃષ્ઠભૂમિના રંગો કેટલા અલગ છે, 1:1 થી 21:1 સુધી.
Keyboard navigation	માઉસને બદલે Tab, Enter, Space અને તીર કીઓ વડે સાઇટમાં નેવિગેટ કરવું.
Focus indicator	કીબોર્ડ કયા element પર છે તે બતાવતો દૃશ્યમાન outline.
Semantic HTML	કામ માટે યોગ્ય element વાપરવું — `<button>`, `<nav>`, `<h2>` — જેથી બ્રાઉઝરો અને assistive tech પેજ સમજે.
ARIA	કસ્ટમ નિયંત્રણોનું assistive technology ને વર્ણન કરતા વધારાના attributes. ઓછા વાપરવા શ્રેષ્ઠ; મૂળ HTML elements પહેલાં આવે.
Assistive technology	કમ્પ્યુટર સુધી પહોંચવા લોકો વાપરતા સાધનો, સ્ક્રીન રીડરોથી લઈને switch devices અને voice control સુધી.

સામાન્ય ગેરસમજો

"Accessibility ફક્ત અંધ વપરાશકર્તાઓ માટે મહત્વની છે." તે દૃષ્ટિ, હલનચલન, શ્રવણ, વાણી અને જ્ઞાનાત્મક વિકલાંગતાઓ, તેમજ હાથ તૂટવા જેવી અસ્થાયી સ્થિતિઓને આવરી લે છે.
"Accessible સાઇટ્સ સાદી લાગે." Accessibility થોડી બાબતો પર મર્યાદા મૂકે છે — contrast, focus styles, લખાણનું કદ — પણ સારી દેખાતી accessible સાઇટ્સ એ ધોરણ છે, અપવાદ નહીં.
"સ્વચાલિત તપાસ 100 બતાવે છે, એટલે આપણે પૂરા છીએ." સ્વચાલિત tools ફક્ત કેટલીક સમસ્યાઓ પકડે છે. Alt text ખરેખર અર્થપૂર્ણ છે કે નહીં, અથવા સ્ક્રીન રીડર સાથે flow સમજાય છે કે નહીં, તે માટે માણસની તપાસ જરૂરી છે.
"Overlay widget અમને compliant બનાવશે." બહારથી લગાવેલા toolbars તમારા કોડમાં ગુમ થયેલા લેબલ્સ અથવા તૂટેલી કીબોર્ડ access ઠીક કરી શકતા નથી. સ્રોત ઠીક કરો.
"અમારે કોઈ વિકલાંગ વપરાશકર્તા નથી." કદાચ તમને ખબર ન હોય. ઘણી વિકલાંગતાઓ દેખાતી નથી, અને જે લોકો અવરોધનો સામનો કરે તેઓ સામાન્ય રીતે ફક્ત છોડી જાય છે.

તમારા AI builder ને શું માગવું

"આને WCAG 2.2 લેવલ AA સુધી બનાવો."
"Semantic HTML વાપરો: સાચાં બટનો, links, ક્રમમાં headings, અને દરેક form field માટે લેબલ્સ."
"ખાતરી કરો કે દરેક interactive element ફક્ત કીબોર્ડથી કામ કરે અને તેની દૃશ્યમાન focus style હોય."
"દરેક લખાણ અને આઇકન રંગનો contrast તપાસો — સામાન્ય લખાણ માટે 4.5:1, મોટા લખાણ અને આઇકન માટે 3:1."
"માહિતીપ્રદ છબીઓ માટે અર્થપૂર્ણ alt text અને સુશોભન છબીઓ માટે ખાલી alt text ઉમેરો."
"Form ની ભૂલો લખાણ તરીકે બતાવો, field સાથે જોડેલી, માત્ર રંગ દ્વારા નહીં."
"Animations માટે વપરાશકર્તાની reduced-motion સેટિંગનો આદર કરો."
"સ્વચાલિત accessibility તપાસ ચલાવો અને જે તે તપાસી શકતી નથી તેની યાદી આપો, જેથી હું તે જાતે તપાસી શકું."

પછી જાતે ચકાસો: માઉસ બાજુ પર મૂકો અને ફક્ત Tab, Shift+Tab, Enter અને Space વડે તમારો મુખ્ય flow પૂર્ણ કરવાનો પ્રયાસ કરો. મુખ્ય પેજ પર તમારા ફોનનું બિલ્ટ-ઇન સ્ક્રીન રીડર અજમાવો. બ્રાઉઝરને 200% પર ઝૂમ કરો અને જુઓ કે કંઈ તૂટે છે કે નહીં.

Mythex માં Accessibility

Mythex માં સમર્પિત accessibility checker શામેલ નથી, તેથી accessibility ને તમારા prompts અને તમારા testing નો ભાગ ગણો. પહેલા prompt થી WCAG 2.2 AA માગો, Preview માં કીબોર્ડ વડે પરિણામ તપાસો, અને પ્રકાશિત કરતા પહેલાં એજન્ટ તમારા મુખ્ય flows ક્લિક કરે તે માટે /test વાપરો — જુઓ App Testing. SEO recipe પણ semantic headings અને અર્થપૂર્ણ alt text માગે છે, જે બંને લક્ષ્યોને સેવા આપે છે.

હાથ વડે કરવાની ચેકલિસ્ટ માટે, તમારી વેબસાઇટને accessible કેવી રીતે બનાવવી જુઓ. ડિઝાઇન માટે, AI વડે સારી દેખાતી app કેવી રીતે ડિઝાઇન કરવી વાંચો, અને લોન્ચ પહેલાં, લોન્ચ પહેલાં તમારી app કેવી રીતે ચકાસવી. W3C ની પોતાની WCAG ઝાંખી અધિકૃત સ્રોત છે.

પ્રશ્નો

Web accessibility સરળ શબ્દોમાં શું છે?

Web accessibility એટલે વેબસાઇટ્સ અને apps એવી રીતે ડિઝાઇન અને બનાવવી કે વિકલાંગ લોકો તેને સમજી, શોધી, નેવિગેટ કરી અને વાપરી શકે. તેમાં સ્ક્રીન રીડર વાપરતા અંધ લોકો, માઉસ ન વાપરી શકતા લોકો, ઓછી દૃષ્ટિ કે રંગ-અંધત્વ ધરાવતા લોકો, બહેરા વપરાશકર્તાઓ અને જ્ઞાનાત્મક વિકલાંગતા ધરાવતા લોકોનો સમાવેશ થાય છે.

WCAG શું છે?

WCAG (Web Content Accessibility Guidelines) એ web accessibility માટેનું આંતરરાષ્ટ્રીય ધોરણ છે, જે W3C દ્વારા પ્રકાશિત થાય છે. હાલનું સંસ્કરણ WCAG 2.2 છે, જે ઓક્ટોબર 2023 માં પ્રથમ પ્રકાશિત થયું હતું. તેના success criteria A, AA અને AAA સ્તરોમાં વહેંચાયેલા છે, અને લેવલ AA એ મોટા ભાગની સંસ્થાઓ અને કાયદાઓ જેનો ઉલ્લેખ કરે છે તે લક્ષ્ય છે.

WCAG કયો colour contrast માગે છે?

લેવલ AA પર, સામાન્ય લખાણને પૃષ્ઠભૂમિ સામે ઓછામાં ઓછો 4.5:1 contrast ratio જોઈએ, અને મોટા લખાણ (લગભગ 18 point, અથવા બોલ્ડ 14 point) ને ઓછામાં ઓછો 3:1. આઇકન્સ અને નિયંત્રણોના દેખાતા ભાગોને તેની બાજુની વસ્તુ સામે ઓછામાં ઓછો 3:1 જોઈએ.

શું web accessibility કાનૂની જરૂરિયાત છે?

ઘણી જગ્યાએ, ઘણી સંસ્થાઓ માટે, હા. કાયદા દેશ અને ક્ષેત્ર પ્રમાણે જુદા છે — ઉદાહરણ તરીકે, European Accessibility Act EU માં ઘણા consumer digital products અને સેવાઓને આવરી લે છે. તમને લાગુ પડતા નિયમો તપાસો, અથવા કાનૂની સલાહકારને પૂછો.

શું accessibility overlay અથવા widget મારી સાઇટને compliant બનાવી શકે?

એકલું નહીં. Overlays તમારી સાઇટ ઉપર toolbar ઉમેરે છે, પણ લેબલ્સ ગુમ હોવા, કીબોર્ડ નેવિગેશન ન ચાલવું અથવા અસ્પષ્ટ માળખું જેવી મૂળ સમસ્યાઓ ભરોસાપાત્ર રીતે ઠીક કરી શકતા નથી. વિશ્વસનીય રીત એ છે કે સાઇટનો કોડ અને સામગ્રી ઠીક કરવી.