पाठ 15 / 25

सही तरीके से Lists

संरचना और संबंधों को transmit करने के लिए semantic list elements का उपयोग करें।

Ordered, unordered, description lists

Sequence के लिए <ol>, groups के लिए <ul>, definitions के लिए <dl> का उपयोग करें। स्क्रीन रीडर list की length और item position की घोषणा करते हैं।

<ol>
  <li>Clarify requirements</li>
  <li>Design mockups</li>
</ol>

<ul>
  <li>Free shipping</li>
  <li>30-day returns</li>
</ul>

<dl>
  <dt>A11y</dt>
  <dd>Accessibility</dd>
</dl>

Navigation में Lists

Navigation menus को <nav> के अंदर <ul> या <ol> का उपयोग करना चाहिए। यह स्क्रीन रीडर को संरचना समझने में मदद करता है।

Lists को accessibly style करना

<li> elements को रखें भले ही आप CSS के साथ bullets को छिपाएँ। स्क्रीन रीडर अभी भी उन्हें ठीक से घोषित करते हैं।

Nested lists

Nested lists hierarchy को properly convey करते हैं। Screen readers nesting level की घोषणा करते हैं।