మీ వెబ్‌సైట్‌ను ఎలా అందుబాటులోకి (యాక్సెసిబుల్) తేవాలి: WCAG 2.2 ప్రారంభ గైడ్

వెబ్‌సైట్‌ను యాక్సెసిబుల్‌గా చేయాలంటే, మౌస్‌తో పాటు కీబోర్డ్, స్క్రీన్ రీడర్, జూమ్ లేదా స్విచ్ పరికరంతో కూడా ప్రజలు ఉపయోగించగలిగేలా నిర్మించండి: బటన్‌లు, లింక్‌లు, హెడ్డింగ్‌లు మరియు ఫారమ్ లేబుల్‌లకు నిజమైన HTML ఎలిమెంట్‌లు వాడండి, చిత్రాలకు అర్థవంతమైన alt టెక్స్ట్ ఇవ్వండి, టెక్స్ట్ కాంట్రాస్ట్ ఎక్కువగా ఉంచండి, మరియు ఫోకస్ కనిపించేలా చేయండి. లక్ష్యంగా పెట్టుకోవాల్సిన ప్రమాణం WCAG 2.2 Level AA. ఆటోమేటిక్ చెకర్లు సమస్యలో కొంత భాగాన్ని మాత్రమే పట్టుకుంటాయి; పది నిమిషాల కీబోర్డ్ మరియు స్క్రీన్ రీడర్ పరీక్ష మిగిలిన వాటిలో చాలా భాగాన్ని పట్టుకుంటుంది.

ఆచరణలో “యాక్సెసిబుల్” అంటే ఏమిటి

యాక్సెసిబిలిటీ ప్రజల గురించి: స్క్రీన్ రీడర్ వాడే అంధ వ్యక్తి, కీబోర్డ్‌తో నావిగేట్ చేసే చేతి వణుకు ఉన్న వ్యక్తి, జూమ్ చేసే తక్కువ దృష్టి ఉన్న వ్యక్తి, ఎండలో చదివే వ్యక్తి, తాత్కాలికంగా చేయి విరిగిన వ్యక్తి. మంచి యాక్సెసిబిలిటీ అందరికీ సైట్‌ను మెరుగ్గా చేస్తుంది — స్పష్టమైన నిర్మాణం, చదవగలిగే టెక్స్ట్, తమ లోపాలను వివరించే ఫారమ్‌లు.

ప్రామాణిక సూచన W3C యొక్క Web Content Accessibility Guidelines (WCAG). సెప్టెంబర్ 2026 నాటికి, ప్రస్తుత వెర్షన్ WCAG 2.2 (అక్టోబర్ 2023లో ప్రచురించబడి, డిసెంబర్ 2024లో అప్‌డేట్ చేయబడింది); WCAG 3 ప్రారంభ డ్రాఫ్ట్. WCAG నాలుగు సూత్రాల చుట్టూ నిర్మించబడింది — కంటెంట్ గ్రహించదగినదిగా (perceivable), పనిచేయదగినదిగా (operable), అర్థమయ్యేలా (understandable) మరియు దృఢంగా (robust) ఉండాలి — మరియు మూడు కన్ఫార్మెన్స్ స్థాయిలు ఉన్నాయి:

అనేక చోట్ల చట్టాలు WCAG ను ప్రస్తావిస్తాయి — ఉదాహరణకు యూరోపియన్ యాక్సెసిబిలిటీ చట్టం, ఇది జూన్ 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 అట్రిబ్యూట్‌లు వాడండి — ఉదాహరణకు కస్టమ్ ట్యాబ్ సెట్ లేదా 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 టెక్స్ట్ కావాలి (“ట్యాస్టింగ్ మెనూ ప్లేట్ చేస్తున్న చెఫ్”, “image1.jpg” కాదు). అలంకార చిత్రాలకు ఖాళీ alt="" ఇవ్వండి, తద్వారా స్క్రీన్ రీడర్లు వాటిని దాటేస్తాయి. ఐకాన్-మాత్రమే బటన్‌లకు యాక్సెసిబుల్ పేరు కావాలి (“మూసివేయి”, “వెతుకు”). వీడియోలకు క్యాప్షన్‌లు, ఆడియోకు ట్రాన్స్‌క్రిప్ట్ కావాలి.

రంగు మరియు కాంట్రాస్ట్

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 టెక్స్ట్ మరియు అలంకార వాటికి alt="", మరియు html lang సెట్ చేయబడి ఉండాలి.

/signup మరియు /checkout పేజీల యాక్సెసిబిలిటీని ఆడిట్ చేయండి. కేవలం కీబోర్డ్ వాడకం, ఫోకస్ క్రమం, కనిపించే ఫోకస్, లేబుల్‌లు, ఎర్రర్ మెసేజ్‌లు, కాంట్రాస్ట్, మరియు ఐకాన్ బటన్‌ల స్క్రీన్ రీడర్ పేర్లను తనిఖీ చేయండి. ప్రతి సమస్యను WCAG ప్రమాణంతో జాబితా చేయండి, తర్వాత అవసరానికి మించి దృశ్య డిజైన్ మార్చకుండా వాటిని సరిచేయండి.

మొబైల్ మెనూను కీబోర్డ్‌తో ఉపయోగించలేరు. దాన్ని aria-expanded ఉన్న బటన్‌గా చేయండి, తెరిచినప్పుడు ఫోకస్‌ను మెనూలోకి తరలించండి, Escape తో మూసివేయండి మరియు ఫోకస్‌ను బటన్‌కు తిరిగి ఇవ్వండి.

దశలవారీగా

1. ఆటోమేటిక్ తనిఖీ నడపండి. Chrome DevTools లోని Lighthouse యొక్క Accessibility విభాగం, లేదా axe బ్రౌజర్ ఎక్స్‌టెన్షన్, ప్రతి ప్రధాన పేజీలో. అది నివేదించిన ప్రతిదాన్ని సరిచేయండి.
2. మౌస్ తీసేయండి. ప్రతి పేజీలో Tab నొక్కి, ప్రతి ముఖ్య పని పూర్తి చేయండి — సైన్ అప్, శోధన, చెక్‌అవుట్. చేరుకోలేని, ఫోకస్ కనిపించని, లేదా తప్పించుకోలేని వాటిని గమనించండి.
3. 200% వరకు జూమ్ చేసి విండోను ఫోన్ వెడల్పుకు కుదించండి. ఏదీ కత్తిరించబడకూడదు లేదా పక్కకు స్క్రోల్ అవసరం కాకూడదు.
4. పది నిమిషాలు స్క్రీన్ రీడర్ ప్రయత్నించండి: Mac మరియు iPhone లో VoiceOver, Android లో TalkBack, లేదా Windows లో NVDA (ఉచితం). హెడ్డింగ్‌లు, లింక్‌లు మరియు ఫారమ్ ఫీల్డ్‌లు వినండి. పేరు లేని “button”, లేదా “link, click here” అంటే ఇంకా పని ఉంది.
5. కాంట్రాస్ట్ తనిఖీ చేయండి టెక్స్ట్, బటన్‌లు మరియు ఇన్‌పుట్‌ల కోసం కాంట్రాస్ట్ చెకర్‌తో.
6. సరిచేసి, మళ్లీ పరీక్షించండి అవే పనులు.
7. యాక్సెసిబిలిటీ స్టేట్‌మెంట్ ప్రచురించండి మీరు ఏ ప్రమాణాన్ని లక్ష్యంగా పెట్టుకుంటున్నారో, సమస్యలను ఎలా నివేదించాలో చెబుతూ — మరియు ఆ నివేదికలకు సమాధానం ఇవ్వండి.

సాధారణ తప్పులు

• కోడ్‌ను సరిచేయకుండా ఓవర్‌లే విడ్జెట్‌పై ఆధారపడటం.
• ఫోకస్ అవుట్‌లైన్‌లు తొలగించడం, అవి అపరిశుభ్రంగా కనిపిస్తాయని, ప్రత్యామ్నాయం లేకుండా.
• ప్లేస్‌హోల్డర్ టెక్స్ట్‌ను ఏకైక లేబుల్‌గా వాడటం. ఎవరైనా టైప్ చేయడం మొదలుపెట్టగానే అది మాయమవుతుంది, మరియు తరచుగా తక్కువ కాంట్రాస్ట్ ఉంటుంది.
• “Click here” మరియు “Read more” లింక్‌లు. సందర్భం లేకుండా, స్క్రీన్ రీడర్ వినియోగదారులు ఒకే లింక్‌ల జాబితా వింటారు.
• కీవర్డ్‌లతో నింపిన alt టెక్స్ట్. Alt టెక్స్ట్ ప్రజల కోసం; చిత్రాన్ని వివరించండి.
• ఒక్కసారి మాత్రమే పరీక్షించడం. ప్రతి కొత్త ఫీచర్ కీబోర్డ్ యాక్సెస్‌ను విరగొట్టవచ్చు. మీ ప్రారంభానికి ముందు పరీక్షకు కీబోర్డ్ పాస్ జోడించండి.

యాక్సెసిబిలిటీ చెక్‌లిస్ట్

• ప్రధాన పేజీలలో ఆటోమేటిక్ తనిఖీ (Lighthouse లేదా axe) శుభ్రంగా ఉంది
• ప్రతి పని కేవలం కీబోర్డ్‌తో పూర్తి చేయగలరు
• ఫోకస్ ఎల్లప్పుడూ కనిపిస్తుంది మరియు స్టిక్కీ ఎలిమెంట్‌ల వెనుక దాగదు
• సెమాంటిక్ హెడ్డింగ్‌లు, ల్యాండ్‌మార్క్‌లు, బటన్‌లు మరియు లింక్‌లు; lang సెట్ చేయబడింది
• అర్థవంతమైన alt టెక్స్ట్; అలంకార చిత్రాలకు alt=""; వీడియోపై క్యాప్షన్‌లు
• టెక్స్ట్ కాంట్రాస్ట్ ≥ 4.5:1 (పెద్ద టెక్స్ట్ ≥ 3:1); UI భాగాలు ≥ 3:1
• 200% జూమ్ మరియు 320 px వెడల్పు వద్ద పనిచేస్తుంది
• ప్రతి ఫారమ్ ఫీల్డ్‌కు కనిపించే లేబుల్ మరియు స్పష్టమైన ఎర్రర్ మెసేజ్‌లు ఉన్నాయి
• సమస్యలను నివేదించే మార్గంతో యాక్సెసిబిలిటీ స్టేట్‌మెంట్

ఇక్కడి భావనల వెనుక ఉన్నదాని కోసం, వెబ్ యాక్సెసిబిలిటీ అంటే ఏమిటి చదవండి. యాక్సెసిబుల్ డిజైన్ మరియు మంచి డిజైన్ చాలా అతివ్యాప్తి చెందుతాయి; AI తో మంచి కనిపించే యాప్ ఎలా డిజైన్ చేయాలి దృశ్య వైపును కవర్ చేస్తుంది.

Mythex లో యాక్సెసిబిలిటీ

Mythex మీరు అడిగే ప్రమాణంతో నిర్మిస్తుంది, కాబట్టి మీ మొదటి ప్రాంప్ట్‌లో మరియు అనుసరణల్లో “WCAG 2.2 AA” పెట్టండి. చిన్న స్క్రీన్‌లను తనిఖీ చేయడానికి ప్రివ్యూ యొక్క ఫోన్-సైజ్ ఫ్రేమ్ ఉపయోగించవచ్చు (Preview and Code), కానీ కీబోర్డ్, జూమ్ మరియు స్క్రీన్ రీడర్ పరీక్షలు ప్రచురించిన URL పై లేదా దాని స్వంత ట్యాబ్‌లో తెరిచిన ప్రివ్యూపై ఉత్తమంగా పనిచేస్తాయి. ఒక పేజీని ఆడిట్ చేయమని, అది కనుగొన్నదాన్ని సరిచేయమని ఏజెంట్‌ను అడగండి, తర్వాత పరిష్కారాలను మీరే పరీక్షించండి — ఆటోమేటిక్ పాస్ ఒక ప్రారంభం, తుది ఆమోదం కాదు.

ప్రశ్నలు