How can display: contents help improve semantic markup but hurt accessibility?
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.
- 1
Allows developers to remove unnecessary wrapper elements without changing the child elements' visual layout.
- 2
Can reduce redundant divs or spans, making the HTML cleaner and more semantic.
- 3
Child elements appear as if they are direct children of the grandparent, which can simplify CSS targeting and layout rules.
- 1
Assistive technologies may ignore the parent element entirely, which can remove important semantic context (e.g., landmarks or ARIA roles).
- 2
Some browsers and screen readers have inconsistent support, leading to confusing navigation for users relying on accessibility tools.
- 3
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.
- 1
Use
display: contentsto simplify visual layout while removing unnecessary wrappers. - 2
Avoid using it on elements that carry important semantic meaning or ARIA roles.
- 3
Test with assistive technologies to ensure accessibility is not broken.
- 4
Consider alternative approaches (like
aria-hiddenor restructuring HTML) when accessibility may be impacted.