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.
Role=List 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)