H48: Using ol, ul and dl for lists or groups of links

HTML Snippet Code
Scenario 1: DL Elements are structured correcly

Deque Product Information

WCAG
Web Content Accessibility Guidelines
GAAD
Global Accessibility Awareness Day
AT
Assistive Technology
ATA
Assistive Technology Act
 <h1> Deque Product Information </h1> <dl> <dt>WCAG</dt> <dd>Web Content Accessibility Guidelines</dd> <dt>GAAD</dt> <dd>Global Accessibility Awareness Day</dd> <dt>AT</dt> <dd>Assistive Technology</dd> <dt>ATA</dt> <dd>Assistive Technology Act</dd> </dl>
Scenario 2: Lists are structured correctly

List of Deque Products

  1. Workdspace
  2. FireEyes2
  3. aXe
  4. Amaze
 <p>List of Deque Products</p> <ol> <li>Workdspace</li> <li>FireEyes2</li> <li>aXe</li> <li>Amaze</li> </ol>
Scenario 3: LI elements are used semantically

Deque Product Information

  • WCAG : Web Content Accessibility Guidelines
  • GAAD : Global Accessibility Awareness Day
  • AT : Assistive Technology
  • ATA : Assistive Technology Act
 <p> Deque Product Information </p> <ul> <li>WCAG : <span>Web Content Accessibility Guidelines </span></li> <li>GAAD : <span>Global Accessibility Awareness Day </span></li> <li>AT : <span>Assistive Technology </span></li> <li>ATA : <span>Assistive Technology Act</span></li> </ul>
Scenario 4: Empty DL

Deque Product Information

WCAG
Web Content Accessibility Guidelines
GAAD
Global Accessibility Awareness Day
AT
Assistive Technology
ATA
Assistive Technology Act
 <dl id="emptydl"> </dl> <h1> Deque Product Information </h1> <dl> <dt>WCAG</dt> <dd>Web Content Accessibility Guidelines</dd> <dt>GAAD</dt> <dd>Global Accessibility Awareness Day</dd> <dt>AT</dt> <dd>Assistive Technology</dd> <dt>ATA</dt> <dd>Assistive Technology Act</dd> </dl>
Scenario 5: DL with mixed script along with DT and DD

Deque Product Information

WCAG
Web Content Accessibility Guidelines
GAAD
Global Accessibility Awareness Day
AT
Assistive Technology
ATA
Assistive Technology Act
 <h1> Deque Product Information </h1> <dl> <script> </script> <template> </template> <dt>WCAG</dt> <dd>Web Content Accessibility Guidelines</dd> <dt>GAAD</dt> <dd>Global Accessibility Awareness Day</dd> <dt>AT</dt> <dd>Assistive Technology</dd> <dt>ATA</dt> <dd>Assistive Technology Act</dd> </dl>
Scenario 6: DL with only mixed script

Deque Product Information

WCAG
Web Content Accessibility Guidelines
GAAD
Global Accessibility Awareness Day
AT
Assistive Technology
ATA
Assistive Technology Act
 <h1> Deque Product Information </h1> <dl> <script> </script> <template> </template> <dt>WCAG</dt> <dd>Web Content Accessibility Guidelines</dd> <dt>GAAD</dt> <dd>Global Accessibility Awareness Day</dd> <dt>AT</dt> <dd>Assistive Technology</dd> <dt>ATA</dt> <dd>Assistive Technology Act</dd> </dl>

Deque Systems, Inc.