Using display: contents in CSS: Pros and Cons for Semantics and Accessibility
display: contents removes the element's box from the layout while keeping its children visible and participating in the layout as if the parent did not exist.
Allows developers to remove unnecessary wrapper elements without changing the child elements' visual layout.
Can reduce redundant divs or spans, making the HTML cleaner and more semantic.
Child elements appear as if they are direct children of the grandparent, which can simplify CSS targeting and layout rules.
Assistive technologies may ignore the parent element entirely, which can remove important semantic context (e.g., landmarks or ARIA roles).
Some browsers and screen readers have inconsistent support, leading to confusing navigation for users relying on accessibility tools.
CSS properties applied to the parent (like background, padding, or border) are not rendered, which may affect visual cues for users.
In this example, the <div> does not generate a box, but the <p> and <span> remain visible. While the markup is cleaner, screen readers may not recognize the div’s semantic role if it had one.
Use
display: contentsto simplify visual layout while removing unnecessary wrappers.Avoid using it on elements that carry important semantic meaning or ARIA roles.
Test with assistive technologies to ensure accessibility is not broken.
Consider alternative approaches (like
aria-hiddenor restructuring HTML) when accessibility may be impacted.