HTML
ARIA

वाक्य - विन्यास

• aria-लाइव
• aria-प्रासंगिक
• aria-स्वत: पूर्ण
• aria-जाँच
• aria-विकलांग
• aria-विस्तार
• aria-haspopup
• aria-छिपा हुआ
• aria-अमान्य
• aria-लेबल
• aria-स्तर
• aria-बहु
• aria-multiselectable
• aria-उन्मुखीकरण
• एरिया दबाया
• aria-केवल पढ़ने के लिए
• aria-आवश्यक
• aria-चयनित
• aria-तरह
• aria-valuemax
• aria-valuemin
• aria-valuenow
• aria-valuetext
• aria-परमाणु
• aria-व्यस्त
• aria-dropeffect
• aria-घसीटा
• aria-activedescendant
• aria-नियंत्रण
• aria-describedby
• aria-flowto
• aria-labelledby
• aria-मालिक
• aria-posinset
• aria-setsize

टिप्पणियों

भूमिका = "चेतावनी"

महत्वपूर्ण और आमतौर पर समय के प्रति संवेदनशील, जानकारी वाला संदेश।

<div role="alert" aria-live="assertive">Your session will expire in 60 seconds.</div>

ध्यान दें कि मैंने एक ही समय में role="alert" और aria-live="assertive" दोनों को शामिल किया है। ये समानार्थी गुण हैं, लेकिन कुछ स्क्रीन रीडर केवल एक या दूसरे का समर्थन करते हैं। एक साथ दोनों का उपयोग करके हम इस संभावना को अधिकतम करते हैं कि लाइव क्षेत्र अपेक्षित रूप से कार्य करेगा।

स्रोत - हेयडन पिकरिंग 'कुछ व्यावहारिक ARIA उदाहरण'

भूमिका = "alertdialog"

एक प्रकार का संवाद जिसमें एक चेतावनी संदेश होता है, जहाँ प्रारंभिक ध्यान संवाद के भीतर एक तत्व पर जाता है।

<div role="alertdialog">
  <h1>Warning</h1>
  <div role="alert">Your session will expire in 60 seconds.</div>
</div>

भूमिका = "एप्लिकेशन"

एक वेब दस्तावेज़ के विपरीत एक क्षेत्र को एक वेब अनुप्रयोग के रूप में घोषित किया गया है। इस उदाहरण में, एप्लिकेशन एक साधारण कैलकुलेटर है जो दो संख्याओं को एक साथ जोड़ सकता है।

<div role="application">
  <h1>Calculator</h1>
  <input id="num1" type="text"> + <input id="num2" type="text"> =
  <span id="result"></span>
</div>

भूमिका = "लेख"

पृष्ठ का एक भाग जिसमें एक रचना होती है जो एक दस्तावेज़, पृष्ठ या साइट का एक स्वतंत्र भाग बनाती है।

---

ARIA भूमिका और / या aria- * विशेषता निर्धारित करना जो डिफ़ॉल्ट अंतर्निहित ARIA शब्दार्थ से मेल खाता है अनावश्यक है और अनुशंसित नहीं है क्योंकि ये गुण पहले से ही ब्राउज़र द्वारा निर्धारित हैं।

<article>
  <h1>My first article</h1>
  <p>Lorem ipsum...</p>
</article>

आप गैर-शब्दार्थ तत्वों पर role=article उपयोग करेंगे (अनुशंसित नहीं, अमान्य)

<div role="article">
  <h1>My first article</h1>
  <p>Lorem ipsum...</p>
</div>

---

role=article लिए W3C प्रवेश role=article

भूमिका = "बैनर"

ऐसा क्षेत्र जिसमें पृष्ठ-विशिष्ट सामग्री के बजाय अधिकतर साइट-उन्मुख सामग्री होती है।

<div role="banner">
  <h1>My Site</h1>

  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</div>

भूमिका = "बटन"

एक इनपुट जो क्लिक या दबाए जाने पर उपयोगकर्ता-ट्रिगर क्रियाओं की अनुमति देता है।

<button role="button">Add</button>

भूमिका = "सेल"

एक सारणीबद्ध कंटेनर में एक सेल।

<table>
  <thead>
    <!-- etc -->
  </thead>
  <tbody>
    <td role="cell">95</td>
    <td role="cell">14</td>
    <td role="cell">25</td>
  </tbody>
</table>

भूमिका = "checkbox"

एक जाँच योग्य इनपुट जिसमें तीन संभावित मान होते हैं: सत्य, असत्य या मिश्रित।

<p>
  <input type="checkbox" role="checkbox" aria-checked="false">
  I agree to the terms
</p>

भूमिका = "columnheader"

एक सेल जिसमें एक कॉलम के लिए हेडर की जानकारी होती है।

<table role="grid">
  <thead>
    <tr>
      <th role="columnheader">Day 1</th>
      <th role="columnheader">Day 2</th>
      <th role="columnheader">Day 3</th>
    </tr>
  </thead>
  <tbody>
    <!-- etc -->
  </tbody>
<table>

भूमिका = "बता गया"

एक चयन की एक प्रस्तुति; आमतौर पर एक टेक्स्टबॉक्स के समान जहां उपयोगकर्ता एक विकल्प का चयन करने के लिए आगे टाइप कर सकते हैं, या सूची में नए आइटम के रूप में मनमाना पाठ दर्ज करने के लिए टाइप कर सकते हैं।

<input type="text" role="combobox" aria-expanded="false">

आमतौर पर, आप बाकी टंकियों के निर्माण के लिए जावास्क्रिप्ट का उपयोग करेंगे या सूची का चयन करेंगे।

भूमिका = "पूरक"

डॉम पदानुक्रम में समान स्तर पर मुख्य सामग्री के पूरक होने के लिए डिज़ाइन किए गए दस्तावेज़ का एक सहायक अनुभाग, लेकिन मुख्य सामग्री से अलग होने पर सार्थक रहता है।

<div role="complementary">
  <h2>More Articles</h2>

  <ul>
    <!-- etc -->
  </ul>
</div>

भूमिका = "contentinfo"

एक बड़ा विचारशील क्षेत्र जिसमें मूल दस्तावेज के बारे में जानकारी होती है।

<p role="contentinfo">
  Author: Albert Einstein<br>
  Published: August 15, 1940
</p>

भूमिका = "परिभाषा"

एक शब्द या अवधारणा की परिभाषा।

<span role="term" aria-labelledby="def1">Love</span>
<span id="def1" role="definition">an intense feeling of deep affection.</span>

भूमिका = "संवाद"

डायलॉग एक एप्लिकेशन विंडो है जिसे एप्लिकेशन के वर्तमान प्रसंस्करण को बाधित करने के लिए डिज़ाइन किया गया है ताकि उपयोगकर्ता को जानकारी दर्ज करने या प्रतिक्रिया की आवश्यकता हो।

<div role="dialog">
  <p>Are you sure?</p>
  <button role="button">Yes</button>
  <button role="button">No</button>
</div>

भूमिका = "निर्देशिका"

किसी समूह के सदस्यों की संदर्भ सूची, जैसे कि सामग्री की स्थिर तालिका।

<ul role="directory">
  <li><a href="/chapter-1">Chapter 1</a></li>
  <li><a href="/chapter-2">Chapter 2</a></li>
  <li><a href="/chapter-3">Chapter 3</a></li>
</ul>

भूमिका = "दस्तावेज़"

एक संबंधित क्षेत्र जिसमें दस्तावेज़ सामग्री के रूप में घोषित किया गया है, एक वेब अनुप्रयोग के विपरीत।

<div role="document">
  <h1>The Life of Albert Einstein</h1>
  <p>Lorem ipsum...</p>
</div>

भूमिका = "फार्म"

एक लैंडमार्क क्षेत्र जिसमें वस्तुओं और वस्तुओं का एक संग्रह होता है, जो एक पूरे के रूप में, एक फॉर्म बनाने के लिए गठबंधन करते हैं।

शब्दार्थ रूप से सही HTML तत्व का उपयोग करना <form> तात्पर्य डिफ़ॉल्ट ARIA शब्दार्थ से है, जिसका अर्थ role=form की आवश्यकता नहीं है क्योंकि आपको किसी तत्व के विपरीत भूमिका को लागू नहीं करना चाहिए जो पहले से ही शब्दार्थ है, क्योंकि भूमिका जोड़ना किसी तत्व के मूल शब्दार्थ को ओवरराइड करता है।

ARIA भूमिका और / या aria- * विशेषता निर्धारित करना जो डिफ़ॉल्ट अंतर्निहित ARIA शब्दार्थ से मेल खाता है अनावश्यक है और अनुशंसित नहीं है क्योंकि ये गुण पहले से ही ब्राउज़र द्वारा निर्धारित हैं।

<form action="">
  <fieldset>
    <legend>Login form</legend>
    <div>
      <label for="username">Your username</label>
      <input type="text" id="username" aria-describedby="username-tip" required />
      <div role="tooltip" id="username-tip">Your username is your email address</div>
    </div>
    <div>
      <label for="password">Your password</label>
      <input type="text" id="password" aria-describedby="password-tip" required />
      <div role="tooltip" id="password-tip">Was emailed to you when you signed up</div>
    </div>
  </fieldset>
</form>

आप गैर-शब्दार्थ तत्वों पर role=form उपयोग करेंगे (अनुशंसित नहीं, अमान्य)

<div role=form>
  <input type="email" placeholder="Your email address">
  <button>Sign up</button>
</div>

भूमिका = "ग्रिड"

ग्रिड एक संवादात्मक नियंत्रण है जिसमें एक तालिका की तरह पंक्तियों और स्तंभों में व्यवस्थित सारणीबद्ध डेटा की कोशिकाएं होती हैं।

<table role="grid">
  <thead>
    <!-- etc -->
  </thead>
  <tbody>
    <!-- etc -->
  </tbody>
</table>

भूमिका = "gridcell"

एक ग्रिड या ट्रीग्रिड में एक सेल।

<table role="grid">
  <thead>
    <!-- etc -->
  </thead>
  <tbody>
    <tr>
      <td role="gridcell">17</td>
      <td role="gridcell">64</td>
      <td role="gridcell">18</td>
    </tr>
  </tbody>
<table>

भूमिका = "समूह"

उपयोगकर्ता इंटरफ़ेस ऑब्जेक्ट्स का एक सेट जो सहायक तकनीकों द्वारा पृष्ठ सारांश या सामग्री की तालिका में शामिल करने का इरादा नहीं है।

<div role="group">
  <button role"button">Previous</button>
  <button role"button">Next</button>
</div>

भूमिका = "शीर्षक"

पृष्ठ के एक भाग के लिए एक शीर्षक।

<h1 role="heading">Introduction</h1>
<p>Lorem ipsum...</p>

भूमिका = "img"

तत्वों के संग्रह के लिए एक कंटेनर जो एक छवि बनाता है।

<figure role="img">
  <img alt="A cute cat." src="albert.jpg">
  <figcaption>This is my cat, Albert.</figcaption>
<figure>

भूमिका = "लिंक"

एक आंतरिक या बाहरी संसाधन का एक इंटरैक्टिव संदर्भ जो सक्रिय होने पर, उपयोगकर्ता एजेंट को उस संसाधन पर नेविगेट करने का कारण बनता है।

ARIA भूमिका और / या aria- * विशेषता वाले अधिकांश मामलों में डिफ़ॉल्ट निहित ARIA शब्दार्थ से मेल खाने वाली विशेषता अनावश्यक है और अनुशंसित नहीं है क्योंकि ये गुण ब्राउज़र द्वारा पहले से सेट हैं।

स्रोत - https://www.w3.org/TR/html5/dom.html#aria-usage-note

भूमिका = "सूची"

गैर-संवादात्मक सूची आइटम का एक समूह।

<ul role="list">
  <li role="listitem">One</li>
  <li role="listitem">Two</li>
  <li role="listitem">Three</li>
</ul>

भूमिका = "लिस्टबॉक्स"

एक विजेट जो उपयोगकर्ता को विकल्पों की सूची से एक या अधिक आइटम का चयन करने की अनुमति देता है।

<ul role="listbox">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

आमतौर पर, आप कई-चयन कार्यक्षमता बनाने के लिए जावास्क्रिप्ट का उपयोग करेंगे।

भूमिका = "ListItem"

एक सूची या निर्देशिका में एक एकल आइटम।

<ul role="list">
  <li role="listitem">One</li>
  <li role="listitem">Two</li>
  <li role="listitem">Three</li>
</ul>

भूमिका = "लॉग ऑन"

एक प्रकार का लाइव क्षेत्र जहां नई जानकारी सार्थक क्रम में जोड़ी जाती है और पुरानी जानकारी गायब हो सकती है।

<ul role="log">
  <li>User 1 logged in.</li>
  <li>User 2 logged in.</li>
  <li>User 1 logged out.</li>
</ul>

भूमिका = "मुख्य"

एक दस्तावेज़ की मुख्य सामग्री।

<!-- header & nav here -->
<div role="main">
  <p>Lorem ipsum...</p>
</div>
<!-- footer here -->

भूमिका = "मार्की"

एक प्रकार का लाइव क्षेत्र जहां गैर-जरूरी जानकारी बार-बार बदलती है।

<ul role="marquee">
  <li>Dow +0.26%</li>
  <li>Nasdaq +0.54%</li>
  <li>S&amp;P +0.44%</li>
</ul>

भूमिका = "गणित"

वह सामग्री जो गणितीय अभिव्यक्ति का प्रतिनिधित्व करती है।

<img role="math" alt="y=mx+b" src="slope.png">

भूमिका = "मेनू"

एक प्रकार का विजेट जो उपयोगकर्ता को विकल्पों की एक सूची प्रदान करता है।

<ul role="menu">
  <li role="menuitem">New</li>
  <li role="menuitem">Open</li>
  <li role="menuitem">Save</li>
  <li role="menuitem">Close</li>
</ul>

भूमिका = "मेनूबार"

मेनू की एक प्रस्तुति जो आमतौर पर दिखाई देती है और आमतौर पर क्षैतिज रूप से प्रस्तुत की जाती है।

<ul role="menubar">
  <li role="menuitem">File</li>
  <li role="menuitem">Edit</li>
  <li role="menuitem">View</li>
  <li role="menuitem">Help</li>
</ul>

भूमिका = "MENUITEM"

मेनू या मेनूबार द्वारा निहित विकल्पों के समूह में एक विकल्प।

<ul role="menubar">
  <li role="menuitem">File</li>
  <li role="menuitem">Edit</li>
  <li role="menuitem">View</li>
  <li role="menuitem">Help</li>
</ul>

भूमिका = "menuitemcheckbox"

एक चेक करने योग्य मेनूइटम जिसमें तीन संभावित मान हैं: सत्य, गलत, या मिश्रित।

<ul role="menu">
  <li role="menuitem">Console</li>
  <li role="menuitem">Layout</li>
  <li role="menuitemcheckbox" aria-checked="true">Word wrap</li>
</ul>

भूमिका = "menuitemradio"

मेनूइट्रेड्रियो भूमिकाओं के एक समूह में एक चेक करने योग्य मेनूइटम, जिसमें से केवल एक बार में जांच की जा सकती है।

<ul role="menu">
  <li role="menuitemradio" aria-checked="true">Left</li>
  <li role="menuitemradio" aria-checked="false">Center</li>
  <li role="menuitemradio" aria-checked="false">Right</li>
</ul>

भूमिका = "नेविगेशन"

दस्तावेज़ या संबंधित दस्तावेजों को नेविगेट करने के लिए नेविगेशनल तत्वों (आमतौर पर लिंक) का एक संग्रह।

<ul role="navigation">
  <li><a href="/">Home</a></li>
  <li><a href="/about">About</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

भूमिका = "टिप्पणी"

एक खंड जिसकी सामग्री संसाधन की मुख्य सामग्री के लिए पैतृक या सहायक है।

<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p role="note">Lorem ipsum...</p>

भूमिका = "विकल्प"

एक चयन सूची में एक चयन करने योग्य आइटम।

<ul role="listbox">
  <li role="option">Option 1</li>
  <li role="option">Option 2</li>
  <li role="option">Option 3</li>
</ul>

भूमिका = "प्रस्तुति"

एक तत्व जिसका निहित मूल भूमिका अर्थ विज्ञान पहुंच एपीआई के लिए मैप नहीं किया जाएगा।

<div style="float:left;">Some content on the left.</div>
<div style="float:right;">Some content on the right</div>
<div role="presentation" style="clear:both;"></div> <!-- Only used to clear floats -->

भूमिका = "प्रगति"

ऐसा तत्व जो लंबे समय तक काम करने वाले कार्यों के लिए प्रगति की स्थिति प्रदर्शित करता है।

<progress role="progressbar" value="25" max="100">25%</progress>

भूमिका = "रेडियो"

रेडियो भूमिकाओं के एक समूह में एक जाँच योग्य इनपुट, जिसमें से केवल एक समय में जाँच की जा सकती है।

<div role="radiogroup">
  <input role="radio" type="radio" aria-checked="true"> One<br>
  <input role="radio" type="radio" aria-checked="false"> Two<br>
  <input role="radio" type="radio" aria-checked="false"> Three
</div>

भूमिका = "क्षेत्र"

एक वेब पेज या दस्तावेज़ का एक बड़ा बोधगम्य खंड, जो लेखक को लगता है कि पेज सारांश या सामग्री की तालिका में शामिल किया जाना महत्वपूर्ण है, उदाहरण के लिए, पृष्ठ का एक क्षेत्र जिसमें लाइव स्पोर्ट्स इवेंट आँकड़े हैं।

<div role="region">
  Home team: 4<br>
  Away team: 2
</div>

भूमिका = "RadioGroup"

रेडियो बटन का एक समूह।

<div role="radiogroup">
  <input role="radio" type="radio" aria-checked="true"> One<br>
  <input role="radio" type="radio" aria-checked="false"> Two<br>
  <input role="radio" type="radio" aria-checked="false"> Three
</div>

भूमिका = "पंक्ति"

एक सारणीबद्ध कंटेनर में कोशिकाओं की एक पंक्ति।

<table>
  <thead>
    <!-- etc -->
  </thead>
  <tbody>
    <tr role="row">
      <!-- etc -->
    </tr>
  </tbody>
</table>

भूमिका = "rowgroup"

एक समूह जिसमें ग्रिड में एक या अधिक पंक्ति तत्व होते हैं।

<table>
  <thead role="rowgroup">
    <!-- etc -->
  </thead>
  <tbody role="rowgroup">
    <!-- etc -->
  </tbody>
</table>

भूमिका = "rowheader"

ग्रिड में एक पंक्ति के लिए हेडर जानकारी युक्त सेल।

<table role="grid">
  <thead>
    <!-- etc -->
  </thead>
  <tbody>
    <tr>
      <th role="rowheader">Day 1</th>
      <td>65</td>
    </tr>
    <tr>
      <th role="rowheader">Day 2</th>
      <td>74</td>
    </tr>
  </tbody>
</table>

भूमिका = "स्क्रॉलबार"

एक चित्रमय वस्तु जो देखने के क्षेत्र के भीतर सामग्री की स्क्रॉलिंग को नियंत्रित करती है, भले ही सामग्री को देखने के क्षेत्र में पूरी तरह से प्रदर्शित किया गया हो।

<div id="content1">Lorem ipsum...</div>
<div
  role="scrollbar"
  aria-controls="content1"
  aria-orientation="vertical"
  aria-valuemax="100"
  aria-valuemin="0"
  aria-valuenow="25">
    <div class="scrollhandle"></div>
</div>

भूमिका = "खोज"

एक लैंडमार्क क्षेत्र जिसमें वस्तुओं और वस्तुओं का एक संग्रह होता है, जो एक संपूर्ण सुविधा के रूप में संयोजित होता है।

<div role="search">
  <input role="searchbox" type="text">
  <button role="button">Search</button>
</div>

भूमिका = "खोज बॉक्स"

खोज मानदंडों को निर्दिष्ट करने के उद्देश्य से एक प्रकार का टेक्स्टबॉक्स।

<div role="search">
  <input role="searchbox" type="text">
  <button role="button">Search</button>
</div>

भूमिका = "विभाजक"

एक विभक्त जो सामग्री या अनुभागों के समूह को अलग और अलग करता है।

<p>Lorem ipsum...</p>
<hr role="separator">
<p>Lorem ipsum...</p>

भूमिका = "स्लाइडर"

एक उपयोगकर्ता इनपुट जहां उपयोगकर्ता किसी दिए गए रेंज के भीतर से एक मूल्य का चयन करता है।

<div
  role="slider"
  aria-valuemax="100"
  aria-valuemin="0"
  aria-valuenow="25">
    <div class="sliderhandle"></div>
</div>

भूमिका = "स्पिन बटन"

रेंज का एक रूप जो उपयोगकर्ता को असतत विकल्पों में से चयन करने की उम्मीद करता है।

<input
  role="spinbutton"
  aria-valuemax="100"
  aria-valuemin="0"
  aria-valuenow="25"
  type="number"
  value="25">

भूमिका = "स्थिति"

एक कंटेनर जिसकी सामग्री उपयोगकर्ता के लिए सलाहकार सूचना है, लेकिन एक चेतावनी को उचित ठहराने के लिए पर्याप्त महत्वपूर्ण नहीं है, अक्सर लेकिन जरूरी नहीं कि एक स्थिति पट्टी के रूप में प्रस्तुत किया जाए।

<div role="status">Online</div>

भूमिका = "स्विच"

एक प्रकार का चेकबॉक्स, जो चेक / अनचेक किए गए मानों के विपरीत, चालू / बंद मूल्यों का प्रतिनिधित्व करता है।

<select role="switch" aria-checked="false">
  <option>On</option>
  <option selected>Off</option>
</select>

भूमिका = "टैब"

उपयोगकर्ता द्वारा प्रदान की जाने वाली टैब सामग्री का चयन करने के लिए एक तंत्र प्रदान करने वाला एक समूह लेबल।

<ul role="tablist">
  <li role="tab">Introduction</li>
  <li role="tab">Chapter 1</li>
  <li role="tab">Chapter 2</li>
</ul>

भूमिका = "तालिका"

पंक्तियों और स्तंभों में व्यवस्थित डेटा वाला एक खंड। तालिका की भूमिका सारणीबद्ध कंटेनरों के लिए अभिप्रेत है जो संवादात्मक नहीं हैं।

<table role="table">
  <thead>
    <!-- etc -->
  </thead>
  <tbody>
    <!-- etc -->
  </tbody>
</table>

भूमिका = "tablist"

टैब तत्वों की एक सूची, जो टैबपेल तत्वों के संदर्भ हैं।

<ul role="tablist">
   <li role="tab">Introduction</li>
   <li role="tab">Chapter 1</li>
   <li role="tab">Chapter 2</li>
</ul>

भूमिका = "tabpanel"

एक टैब से जुड़े संसाधनों के लिए एक कंटेनर, जहां प्रत्येक टैब एक टैबलिस्ट में निहित होता है।

<ul role="tablist">
  <li role="tab">Introduction</li>
  <li role="tab">Chapter 1</li>
  <li role="tab">Chapter 2</li>
</ul>
<div role="tabpanel">
  <!-- etc -->
</div>

भूमिका = "पाठ बॉक्स"

इनपुट जो मुक्त रूप पाठ को इसके मूल्य के रूप में अनुमति देता है।

<textarea role="textbox"></textarea>

भूमिका = "टाइमर"

एक प्रकार का सजीव क्षेत्र जिसमें एक संख्यात्मक काउंटर होता है, जो प्रारंभ बिंदु से बीता हुआ समय, या अंतिम बिंदु तक शेष समय को इंगित करता है।

<p>
  <span role="timer">60</span> seconds remaining.
</p>

भूमिका = "उपकरण पट्टी"

आमतौर पर उपयोग किए जाने वाले फ़ंक्शन बटन का एक संग्रह कॉम्पैक्ट दृश्य रूप में दिखाया गया है।

<ul role="toolbar">
  <li><img alt="New" src="new.png"></li>
  <li><img alt="Open" src="open.png"></li>
  <li><img alt="Save" src="save.png"></li>
  <li><img alt="Close" src="close.png"></li>
</ul>

भूमिका = "टूलटिप"

एक प्रासंगिक पॉपअप जो किसी तत्व के लिए विवरण प्रदर्शित करता है।

<span aria-describedby="slopedesc">Slope</span>
<div role="tooltip" id="slopedesc">y=mx+b</div>

आमतौर पर, टूलटिप छिपाया जाएगा। जावास्क्रिप्ट का उपयोग करते हुए, टूलटिप को देरी के बाद प्रदर्शित किया जाएगा जब उपयोगकर्ता उस तत्व पर होवर करता है जो इसका वर्णन करता है।

भूमिका = "पेड़"

एक प्रकार की सूची जिसमें उप-स्तरीय नेस्टेड समूह हो सकते हैं जो ढह सकते हैं और विस्तारित हो सकते हैं।

<ul role="tree">
  <li role="treeitem">
    Part 1
    <ul>
      <li role="treeitem">Chapter 1</li>
      <li role="treeitem">Chapter 2</li>
      <li role="treeitem">Chapter 3</li>
    </ul>
  </li>
  <li role="treeitem">
    Part 2
    <ul>
      <li role="treeitem">Chapter 4</li>
      <li role="treeitem">Chapter 5</li>
      <li role="treeitem">Chapter 6</li>
    </ul>
  </li>
  <li role="treeitem">
    Part 3
    <ul>
      <li role="treeitem">Chapter 7</li>
      <li role="treeitem">Chapter 8</li>
      <li role="treeitem">Chapter 9</li>
    </ul>
  </li>
</ul>

भूमिका = "TreeGrid"

एक ग्रिड जिसकी पंक्तियों का विस्तार किया जा सकता है और एक पेड़ के लिए उसी तरह ढह सकता है।

भूमिका = "treeitem"

एक पेड़ का एक विकल्प आइटम। यह एक पेड़ के भीतर का एक तत्व है जिसे विस्तारित किया जा सकता है या ढह सकता है यदि इसमें वृक्षों का एक उप-स्तरीय समूह होता है।

<ul role="tree">
  <li role="treeitem">
    Part 1
    <ul>
      <li role="treeitem">Chapter 1</li>
      <li role="treeitem">Chapter 2</li>
      <li role="treeitem">Chapter 3</li>
    </ul>
  </li>
  <li role="treeitem">
    Part 2
    <ul>
      <li role="treeitem">Chapter 4</li>
      <li role="treeitem">Chapter 5</li>
      <li role="treeitem">Chapter 6</li>
    </ul>
  </li>
  <li role="treeitem">
    Part 3
    <ul>
      <li role="treeitem">Chapter 7</li>
      <li role="treeitem">Chapter 8</li>
      <li role="treeitem">Chapter 9</li>
    </ul>
  </li>
</ul>