ടെക്സ്റ്റ് സ്പേസിംഗ് ആക്സസിബിലിറ്റി കാൽക്കുലേറ്റർ

ടെക്സ്റ്റ് സ്പേസിംഗ് ആക്സസിബിലിറ്റി കാൽക്കുലേറ്റർ

ഈ കാൽക്കുലേറ്റർ എന്താണ് ചെയ്യുന്നത്

നിങ്ങളുടെ 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 ബേസ്‌ലൈൻ ഉൾപ്പെടെ) ഇത് ആവശ്യപ്പെടുന്നു. കംപ്ലയൻസിനപ്പുറം, ഉദാരമായ ടെക്സ്റ്റ് സ്പേസിംഗ് ഡിസ്ലെക്സിയ, കുറഞ്ഞ കാഴ്ചശക്തി, ചില ബോധപരമായ വൈകല്യങ്ങൾ എന്നിവയുള്ള വായനക്കാരെ വരികൾ ട്രാക്ക് ചെയ്യാനും വ്യക്തിഗത വാക്കുകൾ തിരിച്ചറിയാനും യഥാർത്ഥത്തിൽ സഹായിക്കുന്നു — മറ്റാർക്കും വായനാക്ഷമതയെ ബാധിക്കാതെ തന്നെ.