• Success Criterion 1.3.1
  • Conformance level A

CSS Display Property Accidentally Stripping an Element’s Role

1.3.1 — Info and Relationships

Scenario

Setting

A budget airline's flight search results

What’s wrong

display:contents (style that can strip an element's role) on semantic elements stripping their role in some browsers.

Example 

<ul style="display:contents">
  <li>Flight 204, 8:00 AM, $89</li>
  <li>Flight 310, 1:15 PM, $102</li>
</ul>

Why it matters

A screen reader user in an affected browser hears the flights read as loose text, with no list announced. display:contents can drop the list's role along with its box.

How to test

Inspect elements with display: contents in DevTools' Accessibility Tree: check whether the element's role/semantics survive — some browsers strip them.

How to fix

When display:contents is needed for layout, add role=list back explicitly, since some browsers drop it with the box.

<ul class="flight-grid" role="list">
  <li>Flight 204, 8:00 AM, $89</li>
  <li>Flight 310, 1:15 PM, $102</li>
</ul>

Outcome

Weighing two fares, a traveler hears the list size instead of two floating, disconnected lines of text.

Who is affected

Screen reader users comparing flight results lose the list structure that would tell them how many options exist.

Learn more

Related scenarios