Ben Myers advocates for semantic HTML description lists to enhance web accessibility
A recent analysis by Ben Myers highlights how underutilised HTML description lists are for marking up structured data, citing benefits for screenreader users and versatile UI patterns.
Ben Myers has published a blog post on his website, benmyers.dev, titled "On The <dl>", arguing that the HTML description list element is an underrated tool for marking up name-value pairs. Myers contends that developers should prefer semantic markup using the `<dl>`, `<dt>`, and `<dd>` elements over nested `<div>` structures to improve web accessibility and ensure assistive technologies can interpret content accurately.
The article outlines the anatomy of the description list, explaining that the `<dl>` element serves as the container, while `<dt>` (description term) and `<dd>` (description detail) represent the name and value components respectively. Myers notes that this structure can accommodate multiple values for a single term and allows for grouping within `<div>` wrappers for styling purposes, providing a robust framework for complex data presentation.
Myers highlights the versatility of this pattern across various user interface contexts. He cites examples such as glossaries, lists of lodging amenities, itemised rent charges, and even Dungeons & Dragons stat blocks. In the case of a stat block, he identifies five distinct potential description lists within a single layout, demonstrating how the pattern can span different visual styles while maintaining semantic consistency.
A primary focus of the piece is the impact on web accessibility. Myers argues that semantic markup allows screenreaders to recognise structured name-value groups rather than treating each element as a standalone text node. He asserts that these benefits are not hypothetical, with screenreader users experiencing improved usability in most browser and screenreader combinations.
Despite these advantages, Myers acknowledges that browser support for description lists is not yet universal. He advises that developers may need to consider fallback experiences if their specific use cases require strict adherence to semantic interpretation across all platforms. For further technical guidance, he recommends consulting the MDN documentation or the official HTML specifications.
