Description List

[mrosvik]

We need built-in support for description lists (dl), where each list item consists of two elements:

• dt (description term)
• dd (description details)

This will allow us to present paired information (term + definition) in a consistent way

[mrosvik]

@Febakke
Check with @oddvernes / @Barsnes if we need to do something in code to support this

[Camulos]

Proof of concept was created for Figma, and presented for review in the start of October.

The component could be set up as a single DL-list-item.

Combine one or more DL-list-item in a group to recreate what would be the DL-element with content.

Styling using auto-layout, minimum-width, and size-tokens allow the component to be responsive and switch from two columns to one for small screens.

If you want the indent for the dd-element when in single column you would keep the left-padding on the element as is, however if you want to have it left-aligned fully, you would change this to 0 and set the gap for the list-item to 16px.

In code the dl-list may be mostly built using css, however some of the options the dl-list allow in code is somewhat difficult to to build into the Figma component, like allowing multiple dt-elements before a single dd-element, or a single dt-element with multiple dd-elements (if we should, how many should we support?). another thing that may be easy to do using javascript and/or css is to automate the insertion of colon after the dt-element text only when presented on the same line as the dd-element.

[Camulos]

There may be accessibility issues with the dl-element, we need to research this a bit.

• If there are any such issues, we can still make the component but use more generic html-elements, so that we get the component either way.

[Camulos]

WCAG

• wcag 2.2 mention dl as part of a valid technique for 1.3.1 unusual words: https://www.w3.org/TR/WCAG20-TECHS/H40.html , this teqnicue was introduced for wcag 2.0 (?) and is still mentioned.

HTML-spec

• https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element

Support in Jaws and VO, source is updated in 2021, and may not be correct:

• dl Seem to be well supported in Jaws, but there may be something still not fully supported in VO for iOS
• dt and dd may be lacking for support in all screen readers