• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Logo for DigitalA11Y

Digital A11Y

Your Accessibility Partner

  • About
    • Bio
      • Conference Speaking
      • Videos
      • mentions
  • Articles
  • Resources
    • WAI-ARIA
    • WCAG
    • Cheat Sheets
    • A11Y Blogs
    • A11Y Toolkit
  • Contact
You are here: Home / WAI-ARIA: Role=List

WAI-ARIA: Role=List

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)

Share A11Y Love

  • Twitter
  • LinkedIn
  • Facebook
  • Reddit

Primary Sidebar

Get Digital A11Y in Your Inbox

Recent A11Y Articles

  • WCAG 2.1 Checklist
  • A Sneak peek into WCAG 3.0 First Public Draft
  • Understanding SC 4.1.3 Status messages
  • Understanding SC 2.5.4 Motion Actuation
  • Understanding SC 2.5.3 Label in Name

Recent Comments

  • Donal Rice on Digital Accessibility Companies Roundup
  • Rajath on A Sneak peek into WCAG 3.0 First Public Draft
  • Raghavendra Satish Peri on Foresee Your Colors: Tools to Evaluate your design for Color contrast Accessibility
  • Raghavendra Satish Peri on Digital Accessibility Companies Roundup
  • Andrew Somers on Foresee Your Colors: Tools to Evaluate your design for Color contrast Accessibility

A11Y Categories

  • Design
  • Events
  • HTML
  • IOS
  • Mobile Accessibility
  • News
  • Tools
  • WAI-ARIA
  • WCAG
  • Web Accessibility

  • Privacy Policy
  • Sitemap
© 2021 Digital A11Y