List of all Examples

Representing Labelled Information

Here I am testing out different ways to displayed labelled information. The main issue that I need to solve here is to make sure that any label is clearly associated with its value and ideally the other way around as well.

Description List

A description list seems like the HTML structure which you would automatically reach for when implementing this use case, because its intention is list out a term followed by the definition which is associated with it.

However, the description list's HTML structure is sometimes not ideal, because we are not allowed to add any elements around the dt and dd tags in the HTML. This limits the amount of visual style that is possible with CSS (e.g. it isn't possible to easily show the label / value pairs next to each other in the UI), so it isn't ideal for all circumstances.

Discount
9%
Price
$14.00

An unordered list

This attempts to rectify the shortcomings of the definition list by inserting the label and value pairs as a single list entry.

However, this only groups them together in the UI within a list, but doesn't actually semantically link the label with its value. Also, it would be easy to argue that the list context in this example is superfluous, since the labelled information here isn't really a list.

No list at all (group)

This uses the group attribute to group related information together. I like this method because it semantically identifies the label and its value.

Here, we are using the aria-labelledby attribute to generate the label for the group and hiding the actual label with the aria-hidden attribute. We can hide the label because its value is already read out by the screenreader. If the group is duplicated on the page (and the label is therefore also duplicated), we need to make sure that we generate a unique id for the label element OR use aria-label instead.

Discount
9%
Price
$14.00