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: