Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

Save Automatically?

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

              
                <h1>Description Lists for VoiceOver on iOS / iPadOS</h1>

<p>
  The <code>&lt;dl&gt;</code> has <a href="https://www.w3.org/MarkUp/HTMLPlus/htmlplus_34.html">existed since HTML+, or 1993</a>, when it was called definition list. VoiceOver on <a href="https://en.wikipedia.org/wiki/VoiceOver#iOS">iOS has existed since 2009</a>, when it was introduced with the iPhone 3GS.
</p>

<p>
  Neither VoiceOver on iOS nor iPadOS has added support for this core feature of HTML that was in existence for 16 years when VoiceOver was released.
</p>

<p>
  Following are my failed attempts to use ARIA to expose them properly for users.
</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>

<details>
  <summary>Results:</summary>
  <dl>
    <dt>iPhone 8, iOS 12.3.1</dt>
    <dd>Reads as plain text, no pauses between nodes, no announcement of elements.</dd>
    <dt>iPad Mini 4, iPadOS 13.4.1</dt>
    <dd>Reads as plain text, no pauses between nodes, no announcement of elements.</dd>
    <dt>iPhone 8, iOS 14.0</dt>
    <dd>Reads first item, then "definition list start", then "term", reads second item, then "definition"; repeats term/definition differentiator throughout list; for last item reads item, then "definition list end", then "definition".</dd>
  </dl>
</details>

<h2>2. ARIA Unordered List Roles</h2>

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

<dl role="list">
  <dt role="listitem">incontrovertible</dt>
  <dd role="listitem">not open to question; indisputable</dd>
  <dt role="listitem">yokel</dt>
  <dd role="listitem">a naive or gullible inhabitant of a rural area or small town</dd>
  <dt role="listitem">omnipotent</dt>
  <dd role="listitem">having virtually unlimited authority or influence</dd>
  <dt role="listitem">gourmand</dt>
  <dd role="listitem">one who is excessively fond of eating and drinking</dd>
</dl>

<details>
  <summary>Results:</summary>
  <dl>
    <dt>iPhone 8, iOS 12.3.1</dt>
    <dd>Reads as plain text, no pauses between nodes, no announcement of elements.</dd>
    <dt>iPad Mini 4, iPadOS 13.4.1</dt>
    <dd>Reads as plain text, no pauses between nodes, no announcement of elements.</dd>
    <dt>iPhone 8, iOS 14.0</dt>
    <dd>Reads first item, then "definition list start"; for last item reads item, then "definition list end".</dd>
  </dl>  
</details>

<h2>3. 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>

<details>
  <summary>Results:</summary>
  <dl>
    <dt>iPhone 8, iOS 12.3.1</dt>
    <dd>Reads as plain text, no pauses between nodes, no announcement of elements.</dd>
    <dt>iPad Mini 4, iPadOS 13.4.1</dt>
    <dd>Reads as plain text, no pauses between nodes, no announcement of elements.</dd>
    <dt>iPhone 8, iOS 14.0</dt>
    <dd>Reads as plain text, no announcement of elements.</dd>
  </dl>  
</details>

<h2>4. ARIA 1.2 (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>

<details>
  <summary>Results:</summary>
  <dl>
    <dt>iPhone 8, iOS 12.3.1</dt>
    <dd>Reads as plain text, no pauses between nodes, no announcement of elements.</dd>
    <dt>iPad Mini 4, iPadOS 13.4.1</dt>
    <dd>Reads as plain text, no pauses between nodes, no announcement of elements.</dd>
    <dt>iPhone 8, iOS 14.0</dt>
    <dd>Reads first item, then "definition list start", then "term", reads second item, then "definition"; repeats term/definition differentiator throughout list; for last item reads item, then "definition list end", then "definition".</dd>
  </dl>  
</details>

<h2>5. HTML Unordered List</h2>

<details>
  <summary>Ref:</summary>
  Native <code>&lt;ul&gt;</code> and <code>&lt;li&gt;</code>.
</details>

<ul>
  <li>bellwether</li>
  <li>one that takes the lead or initiative; leader; also an indicator of trends</li>
  <li>divagate</li>
  <li>to wander or stray from a course or subject; diverge, digress</li>
  <li>whodunit</li>
  <li>a detective story or mystery story</li>
  <li>fictitious</li>
  <li>of, relating to, or characteristic of fiction; imaginary</li>
</ul>

<details>
  <summary>Results:</summary>
  <dl>
    <dt>iPhone 8, iOS 12.3.1</dt>
    <dd>Announces list start,</dd>
    <dd>Announces each bullet,</dd>
    <dd>Does not announce list count,</dd>
    <dd>Does not announce position in list.</dd>
    <dt>iPad Mini 4, iPadOS 13.4.1</dt>
    <dd>Announces list start,</dd>
    <dd>Announces each bullet,</dd>
    <dd>Does not announce list count,</dd>
    <dd>Does not announce position in list.</dd>
    <dt>iPhone 8, iOS 14.0</dt>
    <dd>Announces list start,</dd>
    <dd>Announces each bullet,</dd>
    <dd>Does not announce list count,</dd>
    <dd>Does not announce position in list.</dd>
  </dl>  
</details>

<h2>6. Unordered List with ARIA 1.1 Term/Definition Roles</h2>

<details>
  <summary>Ref:</summary>
  Native <code>&lt;ul&gt;</code> as <a href="https://www.w3.org/TR/wai-aria-1.1/#group"><code>group</code></a> and <code>&lt;li&gt;</code> with <code>&lt;li&gt;</code> as either <a href="https://www.w3.org/TR/wai-aria-1.1/#term"><code>term</code></a> or <a href="https://www.w3.org/TR/wai-aria-1.1/#definition"><code>definition</code></a>.
</details>

<ul role="group">
  <li role="term">vilipend</li>
  <li role="definition">to hold or treat as of little worth or account; contemn</li>
  <li role="term">troubadour</li>
  <li role="definition">a singer especially of folk songs</li>
  <li role="term">lissome</li>
  <li role="definition">easily flexed</li>
  <li role="term">gest</li>
  <li role="definition">a tale of adventures; especially a romance in verse</li>
</ul>

<details>
  <summary>Results:</summary>
  <dl>
    <dt>iPhone 8, iOS 12.3.1</dt>
    <dd>Reads as plain text, no pauses between nodes, no announcement of elements or bullets.</dd>
    <dt>iPad Mini 4, iPadOS 13.4.1</dt>
    <dd>Reads as plain text, no pauses between nodes, no announcement of elements.</dd>
    <dt>iPhone 8, iOS 14.0</dt>
    <dd>Reads as plain text, no announcement of elements or bullets.</dd>
  </dl>
</details>

<h2>7. Unordered List with ARIA 1.1 Term/Definition, then List Roles</h2>

<details>
  <summary>Ref:</summary>
  Native <code>&lt;ul&gt;</code> as <a href="https://www.w3.org/TR/wai-aria-1.1/#group"><code>group</code></a> with fallback to <a href="https://www.w3.org/TR/wai-aria-1.1/#list"><code>list</code></a> (which is a terrible idea), and <code>&lt;li&gt;</code> as either <a href="https://www.w3.org/TR/wai-aria-1.1/#term"><code>term</code></a> or <a href="https://www.w3.org/TR/wai-aria-1.1/#definition"><code>definition</code></a> with fallbacks to <a href="https://www.w3.org/TR/wai-aria-1.1/#listitem"><code>listitem</code></a> roles.
</details>

<ul role="group list">
  <li role="term listitem">compunction</li>
  <li role="definition listitem">anxiety arising from awareness of guilt</li>
  <li role="term listitem">eolian</li>
  <li role="definition listitem">borne, deposited, produced, or eroded by the wind</li>
  <li role="term listitem">stiction</li>
  <li role="definition listitem">the force required to cause one body in contact with another to begin to move</li>
  <li role="term listitem">palmy</li>
  <li role="definition listitem">marked by prosperity; flourishing</li>
</ul>

<details>
  <summary>Results:</summary>
  <dl>
    <dt>iPhone 8, iOS 12.3.1</dt>
    <dd>Reads as plain text, no pauses between nodes, no announcement of elements or bullets.</dd>
    <dt>iPad Mini 4, iPadOS 13.4.1</dt>
    <dd>Reads as plain text, no pauses between nodes, no announcement of elements.</dd>
    <dt>iPhone 8, iOS 14.0</dt>
    <dd>Reads as plain text, no announcement of elements or bullets.</dd>
  </dl>  
</details>

<h2>8. Unordered List, No Bullets, ARIA 1.1 Term/Definition Roles</h2>

<details>
  <summary>Ref:</summary>
  Native <code>&lt;ul&gt;</code> as <a href="https://www.w3.org/TR/wai-aria-1.1/#group"><code>group</code></a> and <code>&lt;li&gt;</code> with <code>&lt;li&gt;</code> as either <a href="https://www.w3.org/TR/wai-aria-1.1/#term"><code>term</code></a> or <a href="https://www.w3.org/TR/wai-aria-1.1/#definition"><code>definition</code></a>.
</details>

<ul class="li-as-dt" role="group">
  <li role="term">advocate</li>
  <li role="definition">to support or argue for (a cause, policy, etc.); to plead in favor of</li>
  <li role="term">capricious</li>
  <li role="definition">governed or characterized by caprice; impulsive, unpredictable</li>
  <li role="term">rendition</li>
  <li role="definition">the act or result of rendering something: such as</li>
  <li role="term">posture</li>
  <li role="definition">to cause to assume a given posture; pose</li>
</ul>

<details>
  <summary>Results:</summary>
  <dl>
    <dt>iPhone 8, iOS 12.3.1</dt>
    <dd>Reads as plain text, no pauses between nodes, no announcement of elements.</dd>
    <dt>iPad Mini 4, iPadOS 13.4.1</dt>
    <dd>Reads as plain text, no pauses between nodes, no announcement of elements.</dd>
    <dt>iPhone 8, iOS 14.0</dt>
    <dd>Reads as plain text, no announcement of elements.</dd>
  </dl>  
</details>



<h2>9. Description List, Bullets, No Roles</h2>

<details>
  <summary>Ref:</summary>
  Native <code>&lt;dl&gt;</code>, <code>&lt;dt&gt;</code>, and <code>&lt;dd&gt;</code> but with <code>list-style-type</code> and <code>display: list-item</code> CSS properties added.
</details>

<dl class="dl-with-bullets">
  <dt>gamut</dt>
  <dd>an entire range or series</dd>
  <dt>assail</dt>
  <dd>to attack violently; assault</dd>
  <dt>empirical</dt>
  <dd>originating in or based on observation or experience</dd>
  <dt>longueur</dt>
  <dd>a dull and tedious passage or section (as of a book, play, or musical composition) — usually used in plural</dd>
</dl>

<details>
  <summary>Results:</summary>
  <dl>
    <dt>iPhone 8, iOS 12.3.1</dt>
    <dd>Reads as plain text, announces each bullet, otherwise no pauses between nodes, no announcement of elements.</dd>
    <dt>iPad Mini 4, iPadOS 13.4.1</dt>
    <dd>Reads as plain text, announces each bullet, otherwise no pauses between nodes, no announcement of elements.</dd>
    <dt>iPhone 8, iOS 14.0</dt>
    <dd>Reads first bullet, then "definition list start"; repeats bullet announcement throughout list; for last item reads bullet, then item, then "definition list end".</dd>
  </dl>  
</details>



<h2>10. Description List, Bullets, List Roles</h2>

<details>
  <summary>Ref:</summary>
  Native <code>&lt;dl&gt;</code>, <code>&lt;dt&gt;</code>, and <code>&lt;dd&gt;</code>, with <code>list-style-type</code> and <code>display: list-item</code> CSS properties, and <a href="https://www.w3.org/TR/wai-aria-1.1/#list"><code>list</code></a> and <a href="https://www.w3.org/TR/wai-aria-1.1/#listitem"><code>listitem</code></a> roles.
</details>

<dl class="dl-with-bullets" role="list">
  <dt role="listitem">homonymous</dt>
  <dd role="listitem">ambiguous</dd>
  <dt role="listitem">instigate</dt>
  <dd role="listitem">to goad or urge forward; provoke</dd>
  <dt role="listitem">xeriscape</dt>
  <dd role="listitem">a landscaping method developed especially for arid and semiarid climates that utilizes water-conserving techniques (such as the use of drought-tolerant plants, mulch, and efficient irrigation)</dd>
  <dt role="listitem">shaggy-dog</dt>
  <dd role="listitem">of, relating to, or being a long-drawn-out circumstantial story concerning an inconsequential happening that impresses the teller as humorous or interesting but the hearer as boring and pointless</dd>
</dl>

<details>
  <summary>Results:</summary>
  <dl>
    <dt>iPhone 8, iOS 12.3.1</dt>
    <dd>Reads as plain text, announces each bullet, otherwise no pauses between nodes, no announcement of elements.</dd>
    <dt>iPad Mini 4, iPadOS 13.4.1</dt>
    <dd>Reads as plain text, announces each bullet, otherwise no pauses between nodes, no announcement of elements.</dd>
    <dt>iPhone 8, iOS 14.0</dt>
    <dd>Reads first bullet, then "definition list start"; repeats bullet announcement throughout list; for last item reads bullet, then item, then "definition list end".</dd>
  </dl>  
</details>

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

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; */
}

dt, li:nth-child(odd) {
  font-style: italic;
}

ul.li-as-dt {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}

ul.li-as-dt li:nth-child(even) {
  padding-left: 2.5em;
}

dl.dl-with-bullets {
  list-style-type: disc;
  padding: 0;
  margin-left: 0;
}

dl.dl-with-bullets > * {
  display: list-item;
  margin: 0;
  padding: 0;
  margin-left: 2em;
}
              
            
!

JS

              
                
              
            
!
999px

Console