This test page examines the impact of display:contents on elements that have semantic value.

Display:contents is meant to make it easier to use grid layout. It's removing the display properties of an element and allowing its children to be styled. However, there's a bug in various browsers that also strips the semantic value of the element, not just the display. This is best described by Hidde de Vries in the article More accessible markup with display: contents.

With display: contents, we can have our markup and our grid placement. This property makes the element so that it no longer seems to exist. It does not generate a box, so backgrounds, borders and other box-related properties will no longer work on it. Grid placement properties will also no longer work. But all of these things will work for the element’s children. The spec says the element behaves ‘as if it had been replaced […] by its contents’. If that sounds weird, I can recommend Ire Aderinokun’s detailed explainer.

Test examples

The following are two simple pseudo-forms. The first set is normal, the second set has display:contents on the heading, fieldset, labels, and buttons.

Normal code

This section is perfectly normal and everything should be semantic and accessible.

Favorite pet

This block uses Display:Content

Some of this information may lose its semantics and appear as generic containers.

Favorite food