టెక్స్ట్ స్పేసింగ్ యాక్సెసిబిలిటీ కాలిక్యులేటర్

టెక్స్ట్ స్పేసింగ్ యాక్సెసిబిలిటీ కాలిక్యులేటర్

ఈ కాలిక్యులేటర్ ఏమి చేస్తుంది

మీ CSS టెక్స్ట్ స్పేసింగ్ — లైన్ హైట్, లెటర్ స్పేసింగ్, వర్డ్ స్పేసింగ్, పేరాగ్రాఫ్ స్పేసింగ్ — WCAG 2.1 సక్సెస్ క్రైటీరియన్ 1.4.12 (టెక్స్ట్ స్పేసింగ్, లెవల్ AA) నిర్వచించిన కనీస అవసరాలను చేరుకుంటుందో లేదో ఇది తనిఖీ చేస్తుంది. తక్కువ దృష్టి లేదా చదవడం/అభిజ్ఞా వైకల్యాలు ఉన్న చాలా మంది వినియోగదారులు బ్రౌజర్ ఎక్స్టెన్షన్‌లు లేదా యూజర్ స్టైల్‌షీట్‌లను ఉపయోగించి ఒక సైట్ యొక్క టెక్స్ట్ స్పేసింగ్‌ను ఓవర్‌రైడ్ చేసి కంటెంట్‌ను చదవడం సులభతరం చేస్తారు కాబట్టి ఈ క్రైటీరియన్ ఉంది. వినియోగదారు ఈ మరింత ఉదారమైన స్పేసింగ్ విలువలను వర్తింపజేసినప్పుడు ఏ కంటెంట్ లేదా ఫంక్షనాలిటీ కోల్పోకపోతేనే ఒక సైట్ 1.4.12కి అనుగుణంగా ఉంటుంది — దీని ఆచరణాత్మక అర్థం ఏమిటంటే సైట్ యొక్క స్వంత డిఫాల్ట్ స్పేసింగ్ ఇప్పటికే ఈ కనీస విలువలకు సమానంగా లేదా అంతకంటే ఎక్కువగా ఉండాలి, లేదా కనీసం వీటిని పెంచినప్పుడు విరిగిపోకూడదు.

నాలుగు కనీస అవసరాలు

నాలుగు కనీస అవసరాలు అన్నీ ఎలిమెంట్ యొక్క స్వంత ఫాంట్ సైజ్ యొక్క గుణిజంగా వ్యక్తీకరించబడతాయి:

$$\text{line height} \geq 1.5 \times \text{font size}$$ $$\text{letter spacing} \geq 0.12 \times \text{font size}$$ $$\text{word spacing} \geq 0.16 \times \text{font size}$$ $$\text{spacing following paragraphs} \geq 2 \times \text{font size}$$

దీన్ని ఎలా ఉపయోగించాలి

1. మీ ఎలిమెంట్ యొక్క ఫాంట్ సైజ్ని పిక్సెల్స్‌లో నమోదు చేయండి.
2. మీరు ప్రస్తుతం ఉపయోగిస్తున్న లైన్ హైట్, లెటర్ స్పేసింగ్, వర్డ్ స్పేసింగ్, పేరాగ్రాఫ్ స్పేసింగ్ (పేరాగ్రాఫ్ కింద ఉన్న స్పేస్, ఉదా. margin-bottom) వాటిని కూడా పిక్సెల్స్‌లో నమోదు చేయండి.
3. సమర్పించినప్పుడు మీకు పాస్/ఫెయిల్ చెక్‌లిస్ట్ మరియు మీ ఫాంట్ సైజ్‌కు అవసరమైన కనీస విలువలతో మీ విలువలను పోల్చే పట్టిక కనిపిస్తుంది.

ఉదాహరణ

font-size: 16px, line-height: 22px, letter-spacing: 0px, word-spacing: 0px, margin-bottom: 24pxతో స్టైల్ చేయబడిన ఒక పేరాగ్రాఫ్:

$$\text{required line height} = 1.5 \times 16 = 24\text{px} \Rightarrow 22\text{px fails}$$ $$\text{required letter spacing} = 0.12 \times 16 = 1.92\text{px} \Rightarrow 0\text{px fails}$$ $$\text{required word spacing} = 0.16 \times 16 = 2.56\text{px} \Rightarrow 0\text{px fails}$$ $$\text{required paragraph spacing} = 2 \times 16 = 32\text{px} \Rightarrow 24\text{px fails}$$

ఈ పేరాగ్రాఫ్ 1.4.12కి అనుగుణంగా ఉండాలంటే ఎత్తైన లైన్ హైట్, జోడించిన లెటర్/వర్డ్ స్పేసింగ్, మరియు కింద ఎక్కువ స్థలం అవసరం అవుతుంది.

ఇది ఎందుకు ముఖ్యం

WCAG 1.4.12 ఒక లెవల్ AA క్రైటీరియన్, అంటే చాలా యాక్సెసిబిలిటీ కంప్లయన్స్ లక్ష్యాలు (విస్తృతంగా ప్రస్తావించబడే WCAG 2.1 AA బేస్‌లైన్‌తో సహా) దీన్ని అవసరం చేస్తాయి. కంప్లయన్స్‌కు మించి, ఉదారమైన టెక్స్ట్ స్పేసింగ్ డిస్లెక్సియా, తక్కువ దృష్టి, మరియు కొన్ని అభిజ్ఞా వైకల్యాలు ఉన్న పాఠకులకు వరుసలను ట్రాక్ చేయడానికి మరియు వ్యక్తిగత పదాలను గుర్తించడానికి నిజంగా సహాయపడుతుంది — మరెవరికీ చదవడాన్ని దెబ్బతీయకుండా.