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

HTML Snippet Code
Scenario 1: DL Elements are not structured correctly

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> <p>Web Content Accessibility Guidelines</p> <dt>GAAD</dt> <p>Global Accessibility Awareness Day</p> <dt>AT</dt> <p>Assistive Technology</p> <dt>ATA</dt> <p>Assistive Technology Act</p> </dl>
Scenario 2: DT and DD elements are not contained by a DL
WCAG
Web Content Accessibility Guidelines
GAAD
Global Accessibility Awareness Day
AT
Assistive Technology
ATA
Assistive Technology Act
<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>
Scenario 3: Lists are not structured correctly

    List of Deque Products

  1. Workdspace
  2. FireEyes2
  3. aXe
  4. Amaze
<ol> <p>List of Deque Products</p> <li>Workdspace</li> <li>FireEyes2</li> <li>aXe</li> <li>Amaze</li> </ol>
Scenario 4: LI elements are not 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> <li>WCAG :</li> <span>Web Content Accessibility Guidelines </span> <li>GAAD :</li> <span>Global Accessibility Awareness Day </span> <li>AT :</li> <span>Assistive Technology </span> <li>ATA :</li> <span>Assistive Technology Act</span>
    Scenario 5: Repeated DD continusly

    Deque Product Information

    WCAG
    Web Content Accessibility Guidelines
    GAAD
    Global Accessibility Awareness Day
    AT
    Assistive Technology
    Example are NVDA, JAWA and VoiceOver
    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> <dd>Example are NVDA, JAWA and VoiceOver</dd> <dt>ATA</dt> <dd>Assistive Technology Act</dd> </dl>
    Scenario 6: DL without DT and DD

    Deque Product Information

    WCAG
    Web Content Accessibility Guidelines
    GAAD
    Global Accessibility Awareness Day
    AT
    Assistive Technology
    ATA
    Assistive Technology Act
    <dl id="divdl"><h1> Deque Product Information </h1></dl> <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 7: DT and DD are not structured properly in DL

    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> <dd>WCAG</dd> <dt>Web Content Accessibility Guidelines</dt> <dd>GAAD</dd> <dt>Global Accessibility Awareness Day</dt> <dd>AT</dd> <dt>Assistive Technology</dt> <dd>ATA</dd> <dt>Assistive Technology Act</dt> </dl>
    Scenario 8: Mixed script without DL and DD

    Deque Product Information

    WCAG
    Web Content Accessibility Guidelines
    GAAD
    Global Accessibility Awareness Day
    AT
    Assistive Technology
    ATA
    Assistive Technology Act
    <dl id="mixedscriptdl"> <script> </script> <template> </template> <h1> Deque Product Information </h1> </dl> <dl> <dd>WCAG</dd> <dt>Web Content Accessibility Guidelines</dt> <dd>GAAD</dd> <dt>Global Accessibility Awareness Day</dt> <dd>AT</dd> <dt>Assistive Technology</dt> <dd>ATA</dd> <dt>Assistive Technology Act</dt> </dl>
    Scenario 9: DT is not contained by a DL
    AT
    <dt>AT</dt>
    Scenario 10: DD is not contained by a DL
    Assertive Technology
    <dd id="uncontained">Assertive Technology </dd>