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