Good news about display: contents and Chrome

Published on the 11 March 2021.

Using display: contents should allow us to use semantic elements to ensure that our content is understandable by accessibility technology, while also not displaying boxes for those elements. It is especially useful when using grid layout and flexbox, as only direct children become grid or flex items. Essentially it allows us to promote grandchildren up to the level of direct children.

However, just as we were getting excited about the possibilities, people began to note that the value also removed the element from the accessibility tree in all browsers. This meant that you may as well have marked up your list items with divs, for all the meaning you were left with.

Just as I was preparing my talk for axe-con, I saw the bug I was tracking in Chrome become marked as fixed. On testing, I can see that a ul removed from the visual display using display: contents is still a list when inspecting it. This is really great news, as now both Firefox and Chrome have fixed the problem. You can try this out using this demo.

Keep testing

Do make sure you are still testing when using display: contents that your intent regarding semantics isn’t being damaged. There will still be some time before all Chromium browsers update, and the problem still exists in Safari. So, we’re not out of the display: contents woods yet, but it feels like a good step forward. I know from talking to engineers that this was not an easy fix at all, and I’m really happy to see that it has been prioritised and fixed in these browsers.

For more information on display: contents and this issue:

Posted a response? Enter the URL

This site uses Webmention. If you post a response to this post on your own site, and you also support Webmention I'll be notified automatically. If not you can add a link here.

The bottom of this website.

I am @rachelandrew on Twitter, and most other places online. I prefer email over other forms of communication. Read this before getting in touch.

I would love for you to check out my products. Notist, our app for public speakers - more than just slidesharing. Perch and Perch Runway, if you need a CMS for your site and care about your mark-up and site performance.