Description Lists

These are our most complicated form of list, as a description list allows you to define key value pairs.

The problem is that Safari Voiceover doesn't support this tyle of list, as such you have to "hack it" into behaving like a table.

This can be achieved by firstly adding a row="table" to the outermost <dl> tag.

For each term you wish to define, you then need to wrap it, and the definitions in a <div role="row"> tag.

The term then needs role="rowheader" applied to it, and each definition then needs role="cell" applied.


For example, a Single Definition:

Apple
The round fruit of a tree of the rose family, which typically has thin green or red skin and crisp flesh.

They can also have multiple definitions of the same term:

Banana
A long curved fruit which grows in clusters and has soft pulpy flesh and yellow skin when ripe.
The tropical and subtropical palmlike plant that bears bananas, having very large leaves but lacking a woody trunk.

This can be taken further to allow multiple terms:

Cherry
A small, soft round stone fruit that is typically bright or dark red.
Damson
Also called damson plum. the small, dark-blue or purple fruit of a plum, Prunus insititia, of the rose family, introduced into Europe from Asia Minor.

And finally allowing multiple terms with multiple definitions

Elderberry
The bluish-black or red berry of the elder, used for making jelly or wine.
An elder tree or shrub.
Fig
Any tree or shrub belonging to the genus Ficus, of the mulberry family, especially a small tree, F. carica, native to southwestern Asia, bearing a turbinate or pear-shaped fruit that is eaten fresh, preserved, or dried.
The fruit of such a tree or shrub, or of any related species.

Powered by Angular | JamStack | Netlify

View code on GitHub