[css-a11y][css-display] display: contents; strips semantic role from elements · Issue #3040 · w3c/csswg-drafts (original) (raw)

The display: contents; property is part of the CSS Display Module Level 3. APA tracking of CSS Display Module Level 3

display: contents; causes an element’s children to appear as if they were direct children of the element’s parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques.

Unlike display: none; where users are unable to interact with the element to which it is applied, by using display: contents; the element is still visible and you can interact with it but only “through its contents” (See Ire Aderinokun’s blog post on “How display: contents; Works”).

Scott O’Hara raised the issue that in the latest version of Bikeshed, the use of display: contents; on the Table of Contents has led to accessibility issues for both screen readers and even standard keyboard tab use, which he notes in “display contents causing TOC issues".

Hidde de Vries blog post “More accessible markup with display: contents” explains that current browsers that support display: contents; “do not only interpret it as a layout thing, but also derive meaning from it”. The display property only affects the visual layout, but by applying display: contents; to an element, browsers strip the element of its role semantics, causing accessibility issues.

Currently, the note for display properties states that “The display property has no effect on an element’s semantics: these are defined by the document language and are not affected by CSS. Aside from the none value, which also affects the aural/speech output [CSS-SPEECH-1] and interactivity of an element and its descendants, the display property only affects visual layout: its purpose is to allow designers freedom to change the layout behavior of an element without affecting the underlying document semantics."

When display: contents; is applied to some elements, for example, form elements such as , and

Hidde de Vries has filed bugs with Firefox, Chrome 66 and Safari and Webkit. Firefox 62 apparently has a fix that is included in the next release in early September 2018. Pressure needs to be applied to the other browser vendors to fix the issues of display: contents; interfering with the element’s inherent role semantics.

The CSS A11Y Task Force recommends one or both of the following approaches: