How can you use display: contents to remove extra wrappers in semantic HTML structures? How can incorrect use of display lead to accessibility or SEO problems?
Using display: contents and Its Accessibility Considerations
display: contents allows an element to disappear visually and in the layout, while its children remain in the DOM and inherit layout from the parent. This is useful for removing unnecessary wrapper elements without affecting styling of child elements.
- 1
Removing extra
<div>or<span>wrappers that are semantically unnecessary but interfere with CSS Grid or Flexbox layout. - 2
Maintaining semantic HTML structure while avoiding extra boxes in layout calculations.
- 3
Simplifying component markup in frameworks where wrapper elements are automatically added.
Here, .wrapper does not create a box in the layout. Its children (.child) are rendered as if they were direct children of the parent container.
- 1
display: contentsremoves the box of the element from the accessibility tree in some browsers, which may make landmarks, roles, or ARIA attributes ineffective. - 2
Screen readers may ignore the element entirely, so using it on elements that provide semantic meaning (like
<section>,<header>,<nav>) can reduce accessibility. - 3
Search engines may not recognize the semantic wrapper, potentially affecting indexing or heading hierarchy.
- 4
Use
display: contentsonly on elements that are purely presentational, not on elements that carry semantic or interactive meaning.
- 1
Prefer
display: contentsfor layout-only wrappers that are unnecessary in the rendered box model. - 2
Avoid using it on semantic HTML elements that provide meaning, roles, or landmarks.
- 3
Test with screen readers (NVDA, VoiceOver) to ensure accessibility is preserved.
- 4
Combine with ARIA roles on children if necessary to maintain accessibility.