HTML5 వెబ్ యాక్సెసిబిలిటీ (a11y), WAI-ARIA రోల్స్, ల్యాండ్‌మార్క్స్ & కీబోర్డ్ నావిగేషన్

• a11y అంటే ఏమిటి: "Accessibility" పదంలో 'a' మరియు 'y' మధ్య ఉన్న 11 అక్షరాల సంక్షిప్త రూపం.
• WCAG 4 ప్రాథమిక స్తంభాలు (POUR): Perceivable, Operable, Understandable, Robust.
• స్క్రీన్ రీడర్స్ & Accessibility Tree: బ్రౌజర్ HTML కోడ్‌ను దృష్టి లోపం ఉన్నవారి కోసం వాయిస్ మాటలుగా మార్చే అనాటమీ.
• The First Rule of ARIA: "చెడ్డ ARIA కంటే అసలు ARIA లేకపోవడమే మంచిది" — నేటివ్ HTML5 సెమాంటిక్స్ ప్రాధాన్యత.
• ARIA ల్యాండ్‌మార్క్స్ & రోల్స్ (Roles): role="banner", role="navigation", role="alert", role="dialog".
• ఆధునిక ARIA ఆట్రిబ్యూట్లు: aria-label, aria-labelledby, aria-describedby లతో ఐకాన్ బటన్లకు పేర్లు పెట్టడం.
• స్టేట్ మేనేజ్‌మెంట్: aria-hidden="true" (అలంకారాలను దాచడం) మరియు aria-expanded (డ్రాప్‌డౌన్ స్టేటస్).
• కీబోర్డ్ ఫోకస్ మేనేజ్‌మెంట్ (tabindex): tabindex="0", tabindex="-1", మరియు పాజిటివ్ సంఖ్యలు ఎందుకు వాడకూడదో నియమాలు.

W3C సంస్థ ప్రవేశపెట్టిన WCAG (Web Content Accessibility Guidelines) ప్రపంచవ్యాప్తంగా అన్ని దేశాల చట్టాలు (US లో ADA చట్టం, యూరప్‌లో EAA) తప్పనిసరి చేసిన అంతర్జాతీయ ప్రమాణం. ఇది 4 ప్రాథమిక సూత్రాలపై ఆధారపడి ఉంటుంది (POUR):

మనం కంటితో వెబ్‌సైట్ చూసినప్పుడు బ్రౌజర్ DOM Tree (Document Object Model) ను రెండర్ చేస్తుంది. కానీ ఒక స్క్రీన్ రీడర్ (ఉదా: NVDA లేదా Mac VoiceOver) వెబ్‌సైట్‌ను చదివేటప్పుడు బ్రౌజర్ అంతర్గతంగా Accessibility Tree (a11y Tree) ని నిర్మిస్తుంది:

ఒకవేళ మీరు కేవలం <button>☰</button> అని రాస్తే — స్క్రీన్ రీడర్ కేవలం "బటన్, అన్‌లేబుల్డ్" అని మాత్రమే చదువుతుంది; ఆ బటన్ ఎందుకుందో అంధుడైన యూజర్‌కు అస్సలు తెలియదు!

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) అనేది సాధారణ HTML ట్యాగ్‌లకు అదనపు అర్థాన్ని, రోల్స్‌ను మరియు స్టేటస్‌ను స్క్రీన్ రీడర్లకు అందించే ఒక ప్రత్యేకమైన W3C స్పెసిఫికేషన్.

ఒక వెబ్‌పేజీలోని ప్రాంతాల యొక్క ప్రయోజనాన్ని స్క్రీన్ రీడర్లకు తెలియజేయడానికి role ఆట్రిబ్యూట్‌ను ఉపయోగిస్తాం:

• role="dialog" / aria-modal="true": పాపప్ మోడల్ విండోలకు ఉపయోగిస్తారు. ఇది ఓపెన్ అయినప్పుడు స్క్రీన్ రీడర్ బ్యాక్‌గ్రౌండ్ కంటెంట్‌ను విస్మరించి, కేవలం పాపప్ లోపలి సమాచారాన్ని మాత్రమే చదువుతుంది.
• role="alert": అత్యవసర సందేశాల కోసం. పేజీ రీఫ్రెష్ కాకుండా సడన్‌గా వచ్చే ఎర్రర్‌లను (ఉదా: "పాస్‌వర్డ్ తప్పుగా ఉంది!") స్క్రీన్ రీడర్ యూజర్ చేసే పనిని ఆపి వెంటనే బిగ్గరగా చదివి వినిపిస్తుంది.
• role="status": సాధారణ లైవ్ అప్‌డేట్స్ కోసం (ఉదా: "సేవ్ అవుతోంది...", "3 ఐటమ్స్ కార్ట్‌లో చేరాయి").

<!-- లైవ్ ఎర్రర్ మెసేజ్: స్క్రీన్ రీడర్ వెంటనే చదువుతుంది -->
<div role="alert" style="background: #fef2f2; border: 1px solid #ef4444; color: #b91c1c; padding: 12px; border-radius: 6px;">
  🚨 ఎర్రర్: మీ మొబైల్ నంబర్ తప్పనిసరిగా 10 అంకెలు ఉండాలి!
</div>

ఒక బటన్ లేదా ఇన్‌పుట్ బాక్స్‌కు స్క్రీన్ రీడర్ ఏ పేరు చదవాలో నిర్ణయించే 3 శక్తివంతమైన ఆట్రిబ్యూట్‌లు:

• aria-label="...": స్క్రీన్ మీద కనిపించే అక్షరాలు లేనప్పుడు (ఉదాహరణకు: కేవలం 🔍 ఐకాన్ లేదా ✖ క్లోజ్ బటన్ ఉన్నప్పుడు) ఆ బటన్‌కు అదృశ్య లేబుల్ ఇవ్వడానికి వాడతారు.
• aria-labelledby="ID": పేజీలో ఇప్పటికే ఉన్న వేరే హెడ్డింగ్ లేదా టెక్స్ట్ యొక్క id ని తన పేరుగా స్వీకరిస్తుంది.
• aria-describedby="ID": ఆ ఇన్‌పుట్ గురించిన అదనపు సహాయక వివరణను (Hint text) చదవడానికి లింక్ చేస్తుంది.

<!-- 1. ఐకాన్ బటన్‌కు స్పష్టమైన అదృశ్య పేరు -->
<button aria-label="సెర్చ్ చేయండి" style="padding: 8px 12px; font-size: 16px;">
  🔍
</button>

<!-- 2. ఇన్‌పుట్ మరియు దాని సహాయక వివరణ లింక్ -->
<p>
  <label for="new-pass">కొత్త పాస్‌వర్డ్:</label><br>
  <input type="password" id="new-pass" aria-describedby="pass-hint" style="padding: 8px; width: 300px;"><br>
  <small id="pass-hint" style="color: #64748b;">
    సూచన: కనీసం ఒక పెద్ద అక్షరం, ఒక సంఖ్య, మరియు ఒక ప్రత్యేక గుర్తు ఉండాలి.
  </small>
</p>

1. aria-hidden="true" (అలంకారాలను దాచడం):

వెబ్‌సైట్‌లో కేవలం అందం కోసం వాడే ఐకాన్లు, అలంకారిక ఈమోజీలు స్క్రీన్ రీడర్‌లకు అనవసరమైన గందరగోళాన్ని సృష్టిస్తాయి. అలాంటి వాటిని స్క్రీన్ రీడర్లకు కనబడకుండా పూర్తిగా దాచడానికి aria-hidden="true" వాడతాం:

<button>
  <span aria-hidden="true">🗑️</span> డిలీట్ చేయండి
</button>

2. aria-expanded="true | false" (డ్రాప్‌డౌన్ స్టేటస్):

ఒక FAQ అకార్డియన్ లేదా మెనూ బటన్ నొక్కినప్పుడు — ఆ కంటెంట్ ప్రస్తుతం ఓపెన్ అయి ఉందా (true) లేక మూసివేయబడి ఉందా (false) అని అంధులైన యూజర్లకు తక్షణమే తెలియజేయడానికి ఇది ఉపయోగపడుతుంది.

<button aria-expanded="false" onclick="toggleMenu(this)">
  మొబైల్ నావిగేషన్ మెనూ
</button>

యూజర్ కీబోర్డ్‌పై 'Tab' కీ నొక్కుతూ వెళ్ళినప్పుడు ఏయే ఎలిమెంట్స్ ఫోకస్ అవ్వాలో tabindex ఆట్రిబ్యూట్ నిర్దేశిస్తుంది:

ప్రతి వెబ్‌పేజీ పైభాగంలో 30 నుండి 50 నావిగేషన్ లింకులు ఉంటాయి. కేవలం కీబోర్డ్ మాత్రమే వాడే ఒక వ్యక్తి ప్రతి పేజీ ఓపెన్ చేసినప్పుడల్లా 50 సార్లు Tab కీ నొక్కితే తప్ప అసలైన ఆర్టికల్ చదవలేకపోతే అది అతనికి నరకం లాంటి అనుభవం!

దీన్ని నివారించడానికి ప్రపంచంలోని అన్ని ప్రొఫెషనల్ వెబ్‌సైట్లలో పేజీ మొట్టమొదటి లైన్‌లో ఒక "Skip to Content" లింక్ రాస్తారు:

<style>
  /* సాధారణంగా స్క్రీన్ బయట దాగి ఉంటుంది */
  .skip-link {
    position: absolute;
    top: -100px;
    left: 10px;
    background: #10b981;
    color: #ffffff;
    padding: 10px 18px;
    font-weight: bold;
    border-radius: 6px;
    z-index: 9999;
    text-decoration: none;
    transition: top 0.2s ease;
  }
  /* Tab కీ నొక్కిన వెంటనే స్క్రీన్ పైకి దూసుకొస్తుంది! */
  .skip-link:focus {
    top: 10px;
  }
</style>

<!-- పేజీలో మొట్టమొదటి లింక్ -->
<a href="#main-content" class="skip-link">ప్రధాన విషయానికి వెళ్ళండి (Skip to Content)</a>

<header>
  <nav>
    <!-- 50 నావిగేషన్ లింకులు ఇక్కడ ఉంటాయి -->
    <a href="/">హోమ్</a> · <a href="/about">గురించి</a> · <a href="/contact">సంప్రదించండి</a>
  </nav>
</header>

<!-- యూజర్ ఇక్కడికి నేరుగా జంప్ అవుతాడు! -->
<main id="main-content" tabindex="-1">
  <h1>ఈనాటి ప్రధాన వ్యాసం</h1>
  <p>ఆర్టికల్ పూర్తి వివరాలు...</p>
</main>

W3C ARIA ఆట్రిబ్యూట్ల శీఘ్ర మార్గదర్శిని:

ఈ అధ్యాయంలో మీరు నేర్చుకున్న విషయాలను స్వయంగా పరీక్షించుకోండి. ప్రతి ప్రశ్నను చదివి సమాధానం ఆలోచించిన తర్వాత "సమాధానం చూడండి" పై క్లిక్ చేయండి: