గైడ్‌లు

వెబ్ యాక్సెసిబిలిటీ అంటే ఏమిటి? WCAG వివరణ

వెబ్ యాక్సెసిబిలిటీ అంటే వికలాంగులు ఉపయోగించగలిగేలా వెబ్‌సైట్‌లు మరియు యాప్‌లను నిర్మించడం — వారు అంధులై స్క్రీన్ రీడర్ ఉపయోగించినా, మౌస్ ఉపయోగించలేకపోయినా, తక్కువ దృష్టి లేదా రంగు అంధత్వం ఉన్నా, చెవిటివారైనా, లేదా అభిజ్ఞా లేదా అభ్యాస వైకల్యాలు ఉన్నా. ఆచరణలో ఇది చిత్రాలకు వచన ప్రత్యామ్నాయాలు, తగినంత రంగు కాంట్రాస్ట్, సరైన లేబుల్‌లున్న ఫారాలు, మరియు అన్నీ కీబోర్డ్ ఒక్కటితోనే పనిచేయడం వంటి విషయాలకు వస్తుంది. దీనికి అంతర్జాతీయ ప్రమాణం WCAG, W3C యొక్క Web Content Accessibility Guidelines.

యాక్సెసిబిలిటీని తరచుగా a11y అని కుదిస్తారు — "a," తర్వాత 11 అక్షరాలు, తర్వాత "y".

AI తో నిర్మించేటప్పుడు యాక్సెసిబిలిటీ ఎందుకు ముఖ్యం

AI బిల్డర్‌లు బాగా కనిపించే యాప్‌లు తయారు చేయడంలో మంచివారు. యాక్సెసిబిలిటీ ఎక్కువగా స్క్రీన్‌షాట్‌లో కనిపించని విషయాలకు సంబంధించినది: ఒక బటన్ నిజంగా బటనేనా, ఒక ఇన్‌పుట్‌కు స్క్రీన్ రీడర్ ప్రకటించగల లేబుల్ ఉందా, Tab కీతో మెనూ చేరగలరా.

అందుకే ఈ విషయాలు అడగడం ముఖ్యం:

  • ఇది సులభంగా మిస్ అవుతుంది. కస్టమ్-స్టైల్ చేసిన డ్రాప్‌డౌన్ చాలా బాగా కనిపించి మౌస్ లేకుండా అసాధ్యంగా ఉండవచ్చు. మీరు పరీక్షించకపోతే గమనించరు.
  • మొదట్లోనే సరిగ్గా చేయడం చౌక. మొదటి ప్రాంప్ట్ నుండే యాక్సెసిబుల్ కాంపోనెంట్‌లు అడగడం దాదాపు ఖర్చు లేకుండా జరుగుతుంది. పూర్తయిన యాప్‌కు తర్వాత జోడించడం ప్రతి స్క్రీన్‌ను మార్చాల్సి వస్తుంది.
  • ఇది అందరికీ సహాయపడుతుంది. శబ్దం ఉన్న ప్రదేశాల్లో ఉన్నవారికి క్యాప్షన్‌లు, ఎండలో ఫోన్ వాడేవారికి మంచి కాంట్రాస్ట్, మరియు స్పష్టమైన లేబుల్‌లు అందరికీ ఫారాలు వేగంగా నింపడంలో సహాయపడతాయి.
  • ఇది SEOతో అతివ్యాప్తి చెందుతుంది. సరైన హెడ్డింగ్‌లు, వివరణాత్మక లింక్‌లు మరియు alt టెక్స్ట్ సెర్చ్ ఇంజిన్‌లకు మీ పేజీలను అర్థం చేసుకోవడంలో సహాయపడతాయి — AI-నిర్మిత వెబ్‌సైట్‌ల కోసం SEO చూడండి.
  • ఇది అవసరం కావచ్చు. మీరు ఎక్కడ పనిచేస్తారు మరియు ఎవరికి సేవ చేస్తారు అన్నదాని ఆధారంగా, యాక్సెసిబిలిటీ చట్టపరమైన బాధ్యత కావచ్చు.

రోజువారీ ఉదాహరణ

ఒక భవనం ప్రవేశ ద్వారం గురించి ఆలోచించండి.

మెట్లు చాలామందికి సరిపోతాయి. చక్రాల కుర్చీ వినియోగదారులకు ర్యాంప్ పనిచేస్తుంది — మరియు పిల్లల బండ్లు తోసేవారికి, సామాన్లు లాగేవారికి, సూట్‌కేసులతో ప్రయాణికులకు కూడా. ఆటోమేటిక్ తలుపులు, స్పష్టమైన బోర్డులు, లిఫ్ట్ బటన్లపై బ్రెయిలీ మరియు మంచి వెలుతురు — ప్రతి ఒక్కటీ ఒకరికి అడ్డంకిని తొలగిస్తుంది.

వెబ్ యాక్సెసిబిలిటీ డిజిటల్ స్థలాలకు అదే ఆలోచన: మీ యాప్ ర్యాంపులు, బోర్డులు మరియు హ్యాండ్‌రెయిళ్లు. మరియు భవనం లాగే, ప్లాన్‌లలో ర్యాంప్ చేర్చడం కాంక్రీటు గట్టిపడిన తర్వాత జోడించడం కంటే చాలా సులభం.

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 టెక్స్ట్, వీడియోలకు క్యాప్షన్‌లు, తగినంత కాంట్రాస్ట్
Operable (ఆపరేట్ చేయదగినది)ప్రజలు నియంత్రణలను ఉపయోగించి నావిగేట్ చేయగలరుకీబోర్డ్ యాక్సెస్, పొడిగించలేని సమయ పరిమితులు లేకపోవడం, కనిపించే ఫోకస్
Understandable (అర్థమయ్యేది)కంటెంట్ మరియు ప్రవర్తన అర్థవంతంగా ఉంటాయిస్పష్టమైన లేబుల్‌లు, సహాయకరమైన ఎర్రర్ సందేశాలు, స్థిరమైన నావిగేషన్
Robust (దృఢమైనది)వివిధ బ్రౌజర్‌లు మరియు సహాయక సాంకేతికతలతో పనిచేస్తుందిసరైన HTML ఎలిమెంట్‌లు, నియంత్రణలకు సరైన పేర్లు మరియు పాత్రలు

ప్రతి మార్గదర్శకానికి మూడు స్థాయిలలో పరీక్షించదగిన సక్సెస్ క్రైటీరియా ఉంటాయి:

  • స్థాయి A — కనీస స్థాయి. వీటిలో విఫలమైతే కొంతమందికి పూర్తిగా అడ్డంకి.
  • స్థాయి AA — ప్రామాణిక లక్ష్యం, మరియు చాలా చట్టాలు, విధానాలు సూచించే స్థాయి.
  • స్థాయి AAA — అత్యధిక స్థాయి. కొన్ని చోట్ల లక్ష్యంగా పెట్టుకోవడం మంచిదే, కానీ మొత్తం సైట్‌కు దీన్ని కోరడాన్ని W3C సిఫార్సు చేయదు, ఎందుకంటే కొంత కంటెంట్ దాన్ని తీర్చలేదు.

WCAG 2.2 WCAG 2.1కు తొమ్మిది సక్సెస్ క్రైటీరియాలను జోడించింది, వాటిలో AA స్థాయిలో Target Size (Minimum) — క్లిక్ చేయదగిన లక్ష్యాలు సాధారణంగా కనీసం 24 బై 24 CSS పిక్సెల్స్ ఉండాలి, మినహాయింపులతో — మరియు Accessible Authentication (Minimum), ఇది జ్ఞాపకశక్తి లేదా పజిల్స్‌పై ఆధారపడే లాగిన్ దశలను పరిమితం చేస్తుంది, ఉదాహరణకు పేస్ట్ చేయడానికి అనుమతించకుండా పాస్‌వర్డ్ మళ్ళీ టైప్ చేయమనడం. పాత "Parsing" క్రైటీరియాను కూడా అది పాతదిగా తొలగించింది.

ఒక ఉదాహరణ: సైన్-అప్ ఫారం

AI ఉత్పత్తి చేయగల ఒక సైన్-అప్ ఫారం, మరియు యాక్సెసిబిలిటీ తనిఖీ ఏమి కనుగొంటుందో ఇక్కడ ఉంది:

సమస్యఎవరిపై ప్రభావంపరిష్కారం
ఇన్‌పుట్‌లు లేబుల్‌లకు బదులు ప్లేస్‌హోల్డర్ వచనం ("Email") ఉపయోగిస్తాయిస్క్రీన్ రీడర్ వినియోగదారులు; టైప్ చేయడం మొదలుపెట్టాక ఆ ఫీల్డ్ ఏమిటో మర్చిపోయే ఎవరైనాప్రతి ఇన్‌పుట్‌కు కనిపించే <label> కనెక్ట్ చేయండి
తెల్లటి నేపథ్యంపై లేత బూడిద వచనం, 4.5:1 కంటే చాలా తక్కువ కాంట్రాస్ట్తక్కువ దృష్టి ఉన్నవారు, ఆరుబయట ఉన్నవారు4.5:1 కాంట్రాస్ట్ తీర్చే ముదురు వచనం
ఎర్రర్‌లు కేవలం ఎర్ర అంచుగా చూపబడతాయిరంగు అంధ వినియోగదారులు, స్క్రీన్ రీడర్ వినియోగదారులుఫీల్డ్ పక్కన వచన సందేశం, స్క్రీన్ రీడర్‌లకు ప్రకటించబడుతుంది
"Sign up" ఒక స్టైల్ చేసిన <div>, <button> కాదుకీబోర్డ్ మరియు స్క్రీన్ రీడర్ వినియోగదారులు దాన్ని యాక్టివేట్ చేయలేరునిజమైన <button> ఎలిమెంట్ ఉపయోగించండి
ఫీల్డ్‌ల మధ్య Tab చేస్తున్నప్పుడు కనిపించే అవుట్‌లైన్ లేదుకీబోర్డ్ వినియోగదారులు తాము ఎక్కడ ఉన్నామో కోల్పోతారుస్పష్టమైన ఫోకస్ స్టైల్
లోగో చిత్రానికి alt టెక్స్ట్ లేదుస్క్రీన్ రీడర్ వినియోగదారులు ఫైల్ పేరు వింటారు"Acme Bookings" వంటి alt టెక్స్ట్

ఈ పరిష్కారాలు ఏవీ ఫారం రూపాన్ని పెద్దగా మార్చవు. కానీ ఇవన్నీ కొంతమంది దాన్ని అసలు ఉపయోగించగలరా లేదా అనేదాన్ని మారుస్తాయి.

ముఖ్య పదాలు

పదంఅర్థం
Screen readerతెరపై ఉన్నదాన్ని బిగ్గరగా లేదా బ్రెయిలీ డిస్‌ప్లేకు చదివే సాఫ్ట్‌వేర్, ఉదాహరణకు VoiceOver, NVDA లేదా JAWS.
Alt textచిత్రం యొక్క వచన వివరణ, స్క్రీన్ రీడర్‌లు చదువుతాయి. అలంకార చిత్రాలకు ఖాళీ alt ఇస్తారు కాబట్టి అవి దాటవేయబడతాయి.
Contrast ratioవచనం మరియు నేపథ్య రంగులు ఎంత భిన్నంగా ఉంటాయో, 1:1 నుండి 21:1 వరకు.
Keyboard navigationమౌస్‌కు బదులు Tab, Enter, Space మరియు బాణం కీలతో సైట్ ఉపయోగించడం.
Focus indicatorకీబోర్డ్ ఏ ఎలిమెంట్‌పై ఉందో చూపే కనిపించే అవుట్‌లైన్.
Semantic HTMLసరైన పని కోసం సరైన ఎలిమెంట్ వాడటం — <button>, <nav>, <h2> — తద్వారా బ్రౌజర్‌లు మరియు సహాయక సాంకేతికత పేజీని అర్థం చేసుకుంటాయి.
ARIAకస్టమ్ నియంత్రణలను సహాయక సాంకేతికతకు వివరించే అదనపు లక్షణాలు. తక్కువగా వాడాలి; స్థానిక HTML ఎలిమెంట్‌లే మొదట.
Assistive technologyస్క్రీన్ రీడర్‌ల నుండి స్విచ్ పరికరాలు మరియు వాయిస్ కంట్రోల్ వరకు, కంప్యూటర్లను యాక్సెస్ చేయడానికి ప్రజలు ఉపయోగించే సాధనాలు.

సాధారణ అపోహలు

  • "యాక్సెసిబిలిటీ అంధ వినియోగదారులకు మాత్రమే ముఖ్యం." ఇది దృశ్య, మోటార్, వినికిడి, మాట్లాడే మరియు అభిజ్ఞా వైకల్యాలను, అలాగే విరిగిన చేయి వంటి తాత్కాలిక పరిస్థితులను కవర్ చేస్తుంది.
  • "యాక్సెసిబుల్ సైట్‌లు సాదాగా కనిపిస్తాయి." యాక్సెసిబిలిటీ కొన్ని విషయాలను పరిమితం చేస్తుంది — కాంట్రాస్ట్, ఫోకస్ స్టైల్స్, వచన పరిమాణం — కానీ మంచిగా కనిపించే యాక్సెసిబుల్ సైట్‌లే సాధారణం, అరుదు కాదు.
  • "ఆటోమేటెడ్ చెకర్ 100 అంటే పూర్తయింది." ఆటోమేటెడ్ టూల్స్ కొన్ని సమస్యలను మాత్రమే పట్టుకుంటాయి. alt టెక్స్ట్ నిజంగా అర్థవంతమా, లేదా ఒక ఫ్లో స్క్రీన్ రీడర్‌తో అర్థమవుతుందా అనేది తనిఖీ చేయడానికి ఒక వ్యక్తి కావాలి.
  • "ఓవర్‌లే విడ్జెట్ మమ్మల్ని కంప్లయింట్ చేస్తుంది." పైన అతికించిన టూల్‌బార్లు మీ కోడ్‌లోని లేని లేబుల్‌లు లేదా విరిగిన కీబోర్డ్ యాక్సెస్‌ను సరిచేయలేవు. మూలాన్ని సరిచేయండి.
  • "మాకు వికలాంగ వినియోగదారులు లేరు." మీకు తెలియకపోవచ్చు. చాలా వైకల్యాలు కనిపించవు, మరియు అడ్డంకి ఎదురైన వ్యక్తులు సాధారణంగా వెళ్ళిపోతారు.

మీ AI బిల్డర్‌ను ఏమి అడగాలి

  • "దీన్ని WCAG 2.2 స్థాయి AA ప్రకారం నిర్మించండి."
  • "సెమాంటిక్ HTML ఉపయోగించండి: నిజమైన బటన్‌లు, లింక్‌లు, క్రమంలో హెడ్డింగ్‌లు, మరియు ప్రతి ఫారం ఫీల్డ్‌కు లేబుల్‌లు."
  • "ప్రతి ఇంటరాక్టివ్ ఎలిమెంట్ కీబోర్డ్ ఒక్కటితోనే పనిచేసేలా మరియు కనిపించే ఫోకస్ స్టైల్ ఉండేలా చూడండి."
  • "అన్ని వచనం మరియు ఐకాన్ రంగులను కాంట్రాస్ట్ కోసం తనిఖీ చేయండి — సాధారణ వచనానికి 4.5:1, పెద్ద వచనం మరియు ఐకాన్‌లకు 3:1."
  • "సమాచారాత్మక చిత్రాలకు అర్థవంతమైన alt టెక్స్ట్, అలంకార వాటికి ఖాళీ alt టెక్స్ట్ జోడించండి."
  • "ఫారం ఎర్రర్‌లను రంగు మాత్రమే కాకుండా ఫీల్డ్‌తో లింక్ అయిన వచనంగా చూపించండి."
  • "యానిమేషన్‌ల కోసం వినియోగదారు రిడ్యూస్డ్-మోషన్ సెట్టింగ్‌ను గౌరవించండి."
  • "ఆటోమేటెడ్ యాక్సెసిబిలిటీ తనిఖీని నడిపి, అది పరీక్షించలేనివి జాబితా చేయండి, తద్వారా నేను వాటిని చేతితో తనిఖీ చేయగలను."

అప్పుడు మీరే పరీక్షించండి: మౌస్ పక్కన పెట్టి, Tab, Shift+Tab, Enter మరియు Space మాత్రమే ఉపయోగించి మీ ప్రధాన ఫ్లోను పూర్తి చేయడానికి ప్రయత్నించండి. మీ ఫోన్‌లోని అంతర్నిర్మిత స్క్రీన్ రీడర్‌ను ప్రధాన పేజీపై ప్రయత్నించండి. బ్రౌజర్‌ను 200%కి జూమ్ చేసి ఏదైనా విరుగుతుందా చూడండి.

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

Mythex లో ప్రత్యేకమైన యాక్సెసిబిలిటీ చెకర్ లేదు, కాబట్టి యాక్సెసిబిలిటీని మీ ప్రాంప్ట్‌లలో మరియు మీ పరీక్షలో భాగంగా చూడండి. మొదటి ప్రాంప్ట్ నుండే WCAG 2.2 AA అడగండి, ప్రివ్యూలో కీబోర్డ్‌తో ఫలితాన్ని తనిఖీ చేయండి, మరియు ప్రచురించే ముందు ఏజెంట్ మీ ప్రధాన ఫ్లోలను క్లిక్ చేసి చూడటానికి /test ఉపయోగించండి — App Testing చూడండి. SEO రెసిపీ కూడా సెమాంటిక్ హెడ్డింగ్‌లు మరియు అర్థవంతమైన alt టెక్స్ట్ అడుగుతుంది, ఇవి రెండు లక్ష్యాలకూ సహాయపడతాయి.

చేతితో చేయగల చెక్‌లిస్ట్ కోసం, మీ వెబ్‌సైట్‌ను యాక్సెసిబుల్ చేయడం ఎలా చూడండి. డిజైన్ కోసం, AIతో మంచి రూపంలో యాప్‌ను ఎలా డిజైన్ చేయాలి చదవండి, మరియు ప్రారంభానికి ముందు, ప్రారంభించే ముందు మీ యాప్‌ను ఎలా పరీక్షించాలి. W3C యొక్క స్వంత WCAG అవలోకనం అధికారిక మూలం.

ప్రశ్నలు

వెబ్ యాక్సెసిబిలిటీ సరళంగా చెప్పాలంటే ఏమిటి?

వెబ్ యాక్సెసిబిలిటీ అంటే వికలాంగులు చూడగలిగేలా, అర్థం చేసుకునేలా, నావిగేట్ చేయగలిగేలా మరియు ఉపయోగించగలిగేలా వెబ్‌సైట్‌లు మరియు యాప్‌లను డిజైన్ చేయడం మరియు నిర్మించడం. ఇందులో స్క్రీన్ రీడర్‌లు వాడే అంధులు, మౌస్ ఉపయోగించలేని వ్యక్తులు, తక్కువ దృష్టి లేదా రంగు అంధత్వం ఉన్నవారు, చెవిటి వినియోగదారులు మరియు అభిజ్ఞా వైకల్యాలు ఉన్నవారు ఉంటారు.

WCAG అంటే ఏమిటి?

WCAG (Web Content Accessibility Guidelines) అనేది వెబ్ యాక్సెసిబిలిటీకి అంతర్జాతీయ ప్రమాణం, W3C ప్రచురించింది. ప్రస్తుత వెర్షన్ WCAG 2.2, అక్టోబర్ 2023లో మొదటిసారి ప్రచురించబడింది. దాని సక్సెస్ క్రైటీరియా A, AA మరియు AAA స్థాయిలలో ఉంటాయి, మరియు చాలా సంస్థలు మరియు చట్టాలు సూచించే లక్ష్యం AA స్థాయి.

WCAG ఏ కాంట్రాస్ట్ కోరుతుంది?

AA స్థాయిలో, సాధారణ వచనానికి దాని నేపథ్యంతో కనీసం 4.5:1 కాంట్రాస్ట్ నిష్పత్తి కావాలి, మరియు పెద్ద వచనానికి (సుమారు 18 పాయింట్, లేదా బోల్డ్ 14 పాయింట్) కనీసం 3:1 కావాలి. ఐకాన్‌లు మరియు నియంత్రణల కనిపించే భాగాలకు వాటి పక్కన ఉన్న దానితో కనీసం 3:1 కావాలి.

వెబ్ యాక్సెసిబిలిటీ చట్టపరమైన అవసరమా?

చాలా చోట్ల, చాలా సంస్థలకు, అవును. చట్టాలు దేశం మరియు రంగం ప్రకారం మారుతాయి — ఉదాహరణకు, యూరోపియన్ యాక్సెసిబిలిటీ చట్టం EUలో అనేక వినియోగదారు డిజిటల్ ఉత్పత్తులు మరియు సేవలను కవర్ చేస్తుంది. మీకు వర్తించే నియమాలను తనిఖీ చేయండి, లేదా న్యాయ సలహాదారును అడగండి.

యాక్సెసిబిలిటీ ఓవర్‌లే లేదా విడ్జెట్ నా సైట్‌ను కంప్లయింట్ చేస్తుందా?

ఒంటరిగా కాదు. ఓవర్‌లేలు మీ సైట్‌పై టూల్‌బార్ జోడిస్తాయి, కానీ లేబుల్‌లు లేకపోవడం, కీబోర్డ్ నావిగేషన్ పనిచేయకపోవడం లేదా అస్పష్టమైన నిర్మాణం వంటి మౌలిక సమస్యలను నమ్మకంగా సరిచేయలేవు. నమ్మదగిన మార్గం సైట్ కోడ్ మరియు కంటెంట్‌ను సరిచేయడం.

Mythex · Pricing · AIతో ఏదైనా నిర్మించండి · వెబ్‌సైట్, యాప్ టెంప్లేట్‌లు · Mythex పోలికలు · AI యాప్ నిర్మాణ పదకోశం · ఉచిత AI యాప్ నిర్మాణ టూల్స్ · English

English አማርኛ العربية Български বাংলা Bosanski Català Čeština Dansk Deutsch Ελληνικά Español Español (España) Eesti فارسی Suomi Français Français (Canada) ગુજરાતી हिन्दी Hrvatski Magyar Հայերեն Bahasa Indonesia Íslenska Italiano 日本語 ქართული Қазақ тілі ಕನ್ನಡ 한국어 Lietuvių Latviešu Македонски മലയാളം Монгол मराठी Bahasa Melayu မြန်မာ Norsk bokmål Nederlands ਪੰਜਾਬੀ Polski Português (Brasil) Português (Portugal) Română Русский Slovenčina Slovenščina Soomaali Shqip Srpski Svenska Kiswahili தமிழ் ไทย Tagalog Türkçe Українська اردو Tiếng Việt 简体中文 繁體中文(香港) 繁體中文(台灣)