A section containing listitem elements.
Description
A section containing listitem elements. See related listbox.
Lists contain children whose role is listitem, or elements whose role is group which in turn contains children whose role is listitem.
Example
Pseudo-list with ‘list’ and ‘list-item’ roles
- list: A group of non-interactive list items
- listitem: A single item in a list or directory
<div role="list">
<div role="listitem">dog</div>
<div role="listitem">cat</div>
<div role="listitem">sparrow</div>
<div role="listitem">wolf!</div>
</div>
Characteristics
Superclass Role
- section
Subclass Roles
- directory
- feed
Base Concept
- HTML ol
- HTML ul
Required Owned Elements
- group → listitem
- listitem
Inherited States and Properties
- aria-atomic
- aria-busy (state)
- aria-controls
- aria-current (state)
- aria-describedby
- aria-details
- aria-disabled (state)
- aria-dropeffect
- aria-errormessage
- aria-expanded (state)
- aria-flowto
- aria-grabbed (state)
- aria-haspopup
- aria-hidden (state)
- aria-invalid (state)
- aria-keyshortcuts
- aria-label
- aria-labelledby
- aria-live
- aria-owns
- aria-relevant
- aria-roledescription
Name From
- author
Semantic HTML
Use the HTML <ul>, <ol> or <dl> tag.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Reference
W3C (opens new window)
Leave a Reply