Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <main>

<h1>Description List Tests</h1>

<p>
  Three patterns follow. Fork and make your own weirdness. See testing results in my post <a href="https://adrianroselli.com/2022/12/brief-note-on-description-list-support.html" target="_top"><cite>Brief Note on Description List Support</cite></a>.
</p>

<h2>1. No ARIA</h2>

<details>
  <summary>Ref:</summary>
  Native <code>&lt;dl&gt;</code>, <code>&lt;dt&gt;</code>, and <code>&lt;dd&gt;</code>.
</details>

<dl>
  <dt>farrago</dt>
  <dd>a confused mixture; hodgepodge</dd>
  <dt>louche</dt>
  <dd>not reputable or decent</dd>
  <dt>parse</dt>
  <dd>to examine in a minute way; analyze critically</dd>
  <dt>argot</dt>
  <dd>the language used by a particular type or group of people; an often more or less secret vocabulary and idiom peculiar to a particular group</dd>
</dl>

<h2>2. ARIA 1.1 Term/Definition Roles</h2>

<details>
  <summary>Ref:</summary>
  <code>&lt;dl&gt;</code> as <a href="https://www.w3.org/TR/wai-aria-1.1/#group"><code>group</code></a>, <code>&lt;dt&gt;</code> as <a href="https://www.w3.org/TR/wai-aria-1.1/#term"><code>term</code></a>, and <code>&lt;dd&gt;</code> as <a href="https://www.w3.org/TR/wai-aria-1.1/#definition"><code>definition</code></a>.
</details>

<dl role="group">
  <dt role="term">fraternize</dt>
  <dd role="definition">to associate or mingle as brothers or on fraternal terms</dd>
  <dt role="term">crux</dt>
  <dd role="definition">an essential point requiring resolution or resolving an outcome</dd>
  <dt role="term">masterful</dt>
  <dd role="definition">inclined and usually competent to act as master</dd>
  <dt role="term">envisage</dt>
  <dd role="definition">to view or regard in a certain way</dd>
</dl>

<h2>3. ARIA 1.3 (Draft) Association List Roles</h2>

<details>
  <summary>Ref:</summary>
  <code>&lt;dl&gt;</code> as <a href="https://rawgit.com/w3c/aria/master/#associationlist"><code>associationlist</code></a>, <code>&lt;dt&gt;</code> as <a href="https://rawgit.com/w3c/aria/master/#associationlistitemkey"><code>associationlistitemkey</code></a>, and <code>&lt;dd&gt;</code> as <a href="https://rawgit.com/w3c/aria/master/#associationlistitemvalue"><code>associationlistitemvalue</code>.</a>
</details>

<dl role="associationlist">
  <dt role="associationlistitemkey">stalwart</dt>
  <dd role="associationlistitemvalue">marked by outstanding strength and vigor of body, mind, or spirit</dd>
  <dt role="associationlistitemkey">conflate</dt>
  <dd role="associationlistitemvalue">to bring together; fuse </dd>
  <dt role="associationlistitemkey">harangue</dt>
  <dd role="associationlistitemvalue">a speech addressed to a public assembly</dd>
  <dt role="associationlistitemkey">null</dt>
  <dd role="associationlistitemvalue">amounting to nothing; nil</dd>
</dl>




<!--
https://www.merriam-webster.com/word-of-the-day/shaggy-dog-2020-05-23
-->
<!-- https://codepen.io/aardrian/pen/BajmMpB -->

<!--
<h2>Takeaways</h2>


<ul>
  <li>If you feel it is imperative that description lists announce a count of all nodes, then do not use them. Users may not care.</li>
  <li>If you feel it is imperative that users can navigate description lists or items with list commands, then do not use them. Users may not care.</li>
  <li>If you feel announcement (or lack) of "term" and/or "description" will be a problem for users, then do not use description lists.</li>
  <li>Do not use roles with description lists.</li>
</ul>

<h3>Key</h3>

<ul>
  <li class="good">our ideal implementation</li>
  <li class="fine">satisfactory implementation, given platform expectations</li>
  <li class="caution">unsatisfactory implementation, but provides rudimentary semantics</li>
  <li class="buggy">no or broken implementation (no semantics, as if plain text)</li>
</ul>



<div role="region" aria-labelledby="Caption01" tabindex="0">
  <table>
    <caption id="Caption01">Testing Results</caption>
    <tr>
      <th>Browser / Screen Reader</th>
      <th>1. No ARIA</th>
      <th>2. ARIA 1.1 Term/Definition Roles</th>
      <th>3. ARIA 1.3 (Draft) Association List Roles</th>
      <th>Round-up</th>
    </tr>
    <tr>
      <th scope="row">Firefox 107 / NVDA 2022.3.2: read-all (<kbd>NVDA</kbd> + <kbd>A</kbd>)</th>
      <td class="good">Announced as a list with 8 items, it announces each DT and DD with a pause.</td>
      <td class="good">Announced as a list with 8 items, it announces each DT and DD with a pause.</td>
      <td class="good">Announced as a list with 8 items, it announces each DT and DD with a pause.</td>
      <td>Each pattern announces the same.</td>
    </tr>
    <tr>
      <th scope="row">Firefox 107 / NVDA 2022.3.2: virtual cursor (<kbd>↓</kbd>)</th>
      <td class="good">Announced as a list with 8 items, arrow key stops at each DT and DD.</td>
      <td class="good">Announced as a list with 8 items, arrow key stops at each DT and DD.</td>
      <td class="good">Announced as a list with 8 items, arrow key stops at each DT and DD.</td>
      <td>Each pattern announces the same.</td>
    </tr>
    <tr>
      <th scope="row">Firefox 107 / NVDA 2022.3.2: list navigation (<kbd>L</kbd>)</th>
      <td class="good">Announces as a list with 8 items.</td>
      <td class="good">Announces as a list with 8 items.</td>
      <td class="good">Announces as a list with 8 items.</td>
      <td>Each pattern announces the same.</td>
    </tr>
    <tr>
      <th scope="row">Firefox 107 / NVDA 2022.3.2: list item navigation (<kbd>I</kbd>)</th>
      <td class="fine">Only navigates DTs.</td>
      <td class="fine">Only navigates DTs.</td>
      <td class="fine">Only navigates DTs.</td>
      <td>Each pattern announces the same.</td>
    </tr>
    <tr>
      <th scope="row">Chrome 107 / JAWS 2023: read-all (<kbd>JAWS</kbd> + <kbd>↓</kbd>)</th>
      <td class="fine">Announced as a definition list with 4 items, it announces each DT and DD together.</td>
      <td class="fine">Announced as a definition list with 4 items, it announces each DT and DD together.</td>
      <td class="fine">Announced as a definition list with 4 items, it announces each DT and DD together.</td>
      <td>Each pattern announces the same.</td>
    </tr>
    <tr>
      <th scope="row">Chrome 107 / JAWS 2023: virtual cursor (<kbd>↓</kbd>)</th>
      <td class="fine">Announced as a list with 4 items, arrow key stops at each DT and DD.</td>
      <td class="fine">Announced as a list with 4 items, arrow key stops at each DT and DD.</td>
      <td class="fine">Announced as a list with 4 items, arrow key stops at each DT and DD.</td>
      <td>Each pattern announces the same.</td>
    </tr>
    <tr>
      <th scope="row">Chrome 107 / JAWS 2023: list navigation (<kbd>L</kbd>)</th>
      <td class="fine">Announced as a list with 4 items.</td>
      <td class="fine">Announced as a list with 4 items.</td>
      <td class="fine">Announced as a list with 4 items.</td>
      <td>Each pattern announces the same.</td>
    </tr>
    <tr>
      <th scope="row">Chrome 107 / JAWS 2023: list item navigation (<kbd>I</kbd>)</th>
      <td class="fine">Only DTs get announced.</td>
      <td class="fine">Only DTs get announced.</td>
      <td class="fine">Only DTs get announced.</td>
      <td>Each pattern announces the same.</td>
    </tr>
    <tr>
      <th scope="row">Edge 107 / Narrator / Win11 22H2: read-all (<kbd>Narrator</kbd> + <kbd>R</kbd>)</th>
      <td class="fine">Announced as a definition list with 4 items, it announces each DT and DD together.</td>
      <td class="fine">Announced as a definition list with 4 items, it announces each DT and DD together.</td>
      <td class="fine">Announced as a definition list with 4 items, it announces each DT and DD together.</td>
      <td>Each pattern announces the same.</td>
    </tr>
    <tr>
      <th scope="row">Edge 107 / Narrator / Win11 22H2: virtual cursor (<kbd>↓</kbd>)</th>
      <td class="fine">Announced as a list with 4 items, arrow key stops at each DT and DD.</td>
      <td class="fine">Announced as a list with 4 items, arrow key stops at each DT and DD.</td>
      <td class="fine">Announced as a list with 4 items, arrow key stops at each DT and DD.</td>
      <td>Each pattern announces the same.</td>
    </tr>
    <tr>
      <th scope="row">Safari 16.1 / VoiceOver / macOS 12.6.1: read-all (<kbd>VO</kbd> + <kbd>A</kbd>)</th>
      <td class="fine">Announced as a description list with 4 items, it announces each DT and DD with a pause.</td>
      <td class="good">Announced as a description list with 8 items, it announces each DT and DD with a pause.</td>
      <td class="buggy">Does not announce the list, but it announces each DT and DD with a pause.</td>
      <td>Applying ARIA 1.1 <code>term</code> and <code>definition</code> roles adjusts count. Applying ARIA 1.3 roles breaks list announcement completely.</td>
    </tr>
    <tr>
      <th scope="row">Safari 16.1 / VoiceOver / macOS 12.6.1: virtual cursor (<kbd>↓</kbd>)</th>
      <td class="buggy">Does not announce presence of list nor count, each DT and DD is exposed as a text element.</td>
      <td class="buggy">Does not announce presence of list nor count, each DT and DD is exposed as a text element.</td>
      <td class="buggy">Does not announce presence of list nor count, each DT and DD is exposed as a text element.</td>
      <td>Each pattern announces the same.</td>
    </tr>
    <tr>
      <th scope="row">Safari 16.1 / VoiceOver / macOS 12.6.1: list navigation (<kbd>VO</kbd> + <kbd>X</kbd>)</th>
      <td class="fine">Announces description list with 4 items.</td>
      <td class="good">Announces description list with 8 items.</td>
      <td class="good">Does not recognize the presence of the list.</td>
      <td>Applying ARIA 1.1 <code>term</code> and <code>definition</code> roles adjusts count. Applying ARIA 1.3 roles breaks list announcement completely.</td>
    </tr>
    <tr>
      <th scope="row">Chrome 107 / TalkBack 13 / Android 13: read-all (swipe L, "Read from next item")</th>
      <td class="caution">Does not announce list, but announces DD with trailing "definition".</td>
      <td class="fine">Does not announce list, but announces DT with trailing "term" and DD with trailing "definition".</td>
      <td class="caution">Does not announce list, but announces DD with trailing "definition".</td>
      <td>Adding the <code>term</code> role gets it announced.</td>
    </tr>
    <tr>
      <th scope="row">Chrome 107 / TalkBack 13 / Android 13: virtual cursor (swipe right)</th>
      <td class="caution">Does not announce list, but announces DD with trailing "definition".</td>
      <td class="fine">Does not announce list, but announces DT with trailing "term" and DD with trailing "definition".</td>
      <td class="caution">Does not announce list, but announces DD with trailing "definition".</td>
      <td>Adding the <code>term</code> role gets it announced.</td>
    </tr>
    <tr>
      <th scope="row">Chrome 107 / TalkBack 13 / Android 13: list navigation (<kbd>Alt</kbd> + <kbd>O</kbd>)</th>
      <td class="fine">Announces as list, no count.</td>
      <td class="fine">Announces as list, no count.</td>
      <td class="fine">Announces as list, no count.</td>
      <td>Each pattern announces the same.</td>
    </tr>
    <tr>
      <th scope="row">Chrome 107 / TalkBack 13 / Android 13: list navigation (<kbd>Alt</kbd> + <kbd>I</kbd>)</th>
      <td class="fine">Navigates DT only.</td>
      <td class="caution">Navigates DT only but announces DT with trailing "term"</td>
      <td class="fine">Navigates DT only.</td>
      <td>Uses <code>term</code> role to add more context.</td>
    </tr>
    <tr>
      <th scope="row">Safari 16.1 / VoiceOver / iPadOS 16.1: read-all (two finger swipe down)</th>
      <td class="fine">Announces desciption list, no count. Each DT is appended with "term", each DD with "description".</td>
      <td class="buggy">Announces as a single string, no pauses, no roles, no list items.</td>
      <td class="fine">Announces desciption list, no count. Each DT is appended with "term", each DD with "description".</td>
      <td>Uses <code>term</code> and <code>definition</code> roles to break lists.</td>
    </tr>
    <tr>
      <th scope="row">Safari 16.1 / VoiceOver / iPadOS 16.1: virtual cursor (swipe right)</th>
      <td class="fine">Announces desciption list, no count. Each DT is appended with "term", each DD with "description".</td>
      <td class="fine">Announces desciption list, no count.</td>
      <td class="fine">Announces desciption list, no count. Each DT is appended with "term", each DD with "description".</td>
      <td>Uses <code>term</code> and <code>definition</code> roles to break lists.</td>
    </tr>
    <tr>
      <th scope="row">Safari 16.1 / VoiceOver / iPadOS 16.1: list navigation (<kbd>X</kbd>)</th>
      <td class="buggy">"List not found"</td>
      <td class="buggy">"List not found"</td>
      <td class="buggy">"List not found"</td>
      <td>Does not recognize them as lists for keyboard navigation.</td>
    </tr>
  </table>
  
  -->
  </main>
              
            
!

CSS

              
                body {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  line-height: 1.4;
  /*   line-height: 1.5; */
  /*   letter-spacing: 0.12em; */
  /*   word-spacing: 0.16em; */
}

td, th {
  min-width: 12em;
}

/* Standard Tables */

table {
  margin: 1em 0;
  border-collapse: collapse;
  border: 0.1em solid #d6d6d6;
}

caption {
  text-align: left;
  font-style: italic;
  padding: 0.25em 0.5em 0.5em 0.5em;
}

th,
td {
  padding: 0.25em 0.5em 0.25em 1em;
  vertical-align: text-top;
  text-align: left;
  text-indent: -0.5em;
}

th {
  vertical-align: bottom;
  background-color: #666;
  color: #fff;
}

tr:nth-child(even) th[scope="row"] {
  background-color: #f2f2f2;
}

tr:nth-child(odd) th[scope="row"] {
  background-color: #fff;
}

/* tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.05);
}

tr:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.05);
} */

tr {
  border-top: .05em solid #333;
  border-top: .05em solid #333;
}

/* Responsive Tables */

[role="region"][aria-labelledby][tabindex] {
  overflow: auto;
  border: 0.1em solid #d6d6d6;
  max-height: 100vh;
}

[role="region"][aria-labelledby][tabindex]:focus {
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
  outline: 0.1em solid rgba(0, 0, 0, 0.1);
}

[role="region"][aria-labelledby][tabindex] table {
  margin: 0;
  border: none;
}

/* Scrolling Visual Cue */

[role="region"][aria-labelledby][tabindex] {
  background: linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(255, 255, 255, 0), #fff 70%) 0 100%,
    radial-gradient(
      farthest-side at 0% 50%,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ),
    radial-gradient(
        farthest-side at 100% 50%,
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0)
      )
      0 100%;
  background-repeat: no-repeat;
  background-color: #fff;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-position: 0 0, 100%, 0 0, 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Fixed Headers */

th:not([scope=row]) {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

th[scope=row] {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 1;
}

th[scope=row] {
  vertical-align: top;
  color: inherit;
  background-color: inherit;
  background: linear-gradient(90deg, transparent 0%, transparent calc(100% - .05em), #d6d6d6 calc(100% - .05em), #d6d6d6 100%);
}

table:nth-of-type(2) th:not([scope=row]):first-child {
  left: 0;
  z-index: 3;
  background: linear-gradient(90deg, #666 0%, #666 calc(100% - .05em), #ccc calc(100% - .05em), #ccc 100%);
}




.good::before {
  content: "\02714\0fe0f ";
  display: inline;
}

.good {
    background-color: #E3FCEF;
}

.fine::before {
  content: "\02714  ";
  display: inline;
}

.fine {
    background-color: #DEEBFF;
}

.caution::before {
  content: "‽ ";
  font-weight: bold;
  font-size: 125%;
  line-height: 0;
  display: inline;
}

.caution {
    background-color: #FFFAE6;
}

.buggy::before {
  content: "\0274c ";
  display: inline;
}

.buggy {
    background-color: #FFEBE6;
}

              
            
!

JS

              
                
              
            
!
999px

Console