It’s Mid-2022 and Browsers (Mostly Safari) Still Break Accessibility via Display Properties

It was late 2020 when I last tested how browsers use CSS display properties to break the semantics of elements.

I had been waiting for Safari to fix how it handles display: contents for four years now, and was excited when the announcement came in June. Then I started testing the latest Safari Technical Preview and the results were not good. That prompted me to give each of Chrome, Firefox, and Safari a fresh run to see how they performed.

The following results are each set in a table with a numbered list following that provides more detail on any cells that are numbered:

Chrome 103 / Windows 11
CSS <tr>, <th>, <td> <ul>, <ol>, <dl> <h#> <button>
display: flex
display: grid
display: block
display: inline-block
display: contents 1 2
  1. <ol>s and <ul>s are not treated as lists, but <dl>s perform fine.
  2. Shows as a button in the accessibility inspector, but does not receive keyboard focus; cannot be navigated with JAWS 2022 button command (B); can be activated with a mouse, touch, and screen reader virtual cursor.
Firefox 102 / Windows 11
CSS <tr>, <th>, <td> <ul>, <ol>, <dl> <h#> <button>
display: flex 1,2
display: grid 1,2
display: block
display: inline-block 3
display: contents 3 4
  1. <th>s with flex and grid are exposed as cells, not headers.
  2. Using NVDA 2022.1, the table reports the wrong number of rows and columns and cannot be navigated with table navigation commands (Ctrl + Alt + ).
  3. Inserts text leaf between each list item; NVDA announces each item in the list when navigating by list (L).
  4. Shows as a button in the accessibility inspector, but does not receive keyboard focus; cannot be navigated with NVDA button command (B); can be activated with a mouse, touch, and screen reader virtual cursor; dev tools show a keyboard use warning.
Safari Technology Preview 148, 149, 150 (Safari 16) / macOS 12.4, 12.5
CSS <tr>, <th>, <td> <ul>, <ol>, <dl> <h#> <button>
display: flex 1
display: grid 1
display: block 1 2
display: inline-block 1 2
display: contents 1 2 3
  1. VoiceOver announces the wrong column and row count for each table; VoiceOver table navigation commands do not work (Ctrl + Option + + ).
  2. VoiceOver does not announce ordered or unordered lists as lists (description lists are fine); VoiceOver does not navigate to ordered or unordered lists with list navigation (Ctrl + Option + + X).
  3. Does not receive keyboard focus; cannot be navigated with VoiceOver button command (Ctrl + Option + + J); can be activated with a mouse.
Chrome 103 / Android 12
CSS <tr>, <th>, <td> <ul>, <ol>, <dl> <h#> <button>
display: flex
display: grid
display: block
display: inline-block
display: contents 1
  1. <ol>s and <ul>s are not treated as lists, but <dl>s perform fine.
Safari / iPadOS 15.5
CSS <tr>, <th>, <td> <ul>, <ol>, <dl> <h#> <button>
display: flex
display: grid
display: block 1 2
display: inline-block 1 2
display: contents 1 2 3
  1. VoiceOver treats all cells as in column 1.
  2. VoiceOver does not announce ordered or unordered lists as lists (description lists are fine).
  3. Fires on double-tap with VoiceOver.

Verdict

Chrome cleaned itself up and has held steady for more than 20 versions. Firefox needs work, but at least saw a tiny improvement. Safari made one tiny improvement but has a much bigger deficit, and I don’t trust it will improve much given its now twice-promised fix for display: contents.

Tests

The following four embedded CodePens are what I used for testing. These do not account for all scenarios or use cases, but at least provide a baseline set of results. They were all created in early 2020. I adapted them by adding horizontal rules between each test since VoiceOver was concatenating some elements with display: contents to the prior element.

Each links to a CodePen debug mode so you can test it directly, without the iframe or wrapper cruft.

HTML Tables

Visit the tables test in debug mode.

See the Pen Tables with Assorted Display Properties by Adrian Roselli (@aardrian) on CodePen.

Lists

Visit the lists test in debug mode.

See the Pen Lists with Assorted Display Properties by Adrian Roselli (@aardrian) on CodePen.

Headings

Visit the headings test in debug mode.

See the Pen Headings with Assorted Display Properties by Adrian Roselli (@aardrian) on CodePen.

Buttons

Visit the buttons test in debug mode.

See the Pen Buttons with Assorted Display Properties by Adrian Roselli (@aardrian) on CodePen.

References

I have not gone through all the old browser bugs, identified outstanding open bugs, nor filed fresh bugs. I just don’t have the energy. I am hoping readers can confirm or deny my findings, however, so if/when I muster that energy I have confirmation these issues aren’t just a failing on my end.

I have written about display properties, tables, and accessibility a bunch over the last few years. Others have also kicked in a pile of posts. This list is not exhaustive.

Update: 15 July 2022

I heard back from someone who works on WebKit (finally) and he confirmed the issues I found with the following bugs:

Update: 22 July 2022

I tested Safari Technology Preview 149 today. No change.

Update: 4 August 2022

I tested Safari Technology Preview 150 today on macOS 12.5. No change.

Update: 6 August 2022

More updates from Tyler Wilcock, namely that three commits have landed in WebKit that address the heading and button examples in this post:

I am thrilled to see the now-rapid progress from Tyler specifically. Compared to the current silence from Apple’s dedicated developer relations arm, past Apple mis-representation of fixes, and years of Apple’s failure to test for these obvious issues, this has been a breath of fresh air.

No idea which Safari Technical Preview will see these updates, but I am hopeful they will make it to Safari 16.

2 Comments

Reply

I encounter similar issues when I wish to set grid on the body element and display contents on the main element. The main issue I have is implementing a skip to content link that targets the main[display: contents] element :(
I think this should be of interest to the community since the following is a common DOM pattern:

Skipping the main element would really be a shame

Neil Osman; . Permalink
In response to Neil Osman. Reply

part of my comment was sanitized, so here is a demo that illustrates my point
https://codepen.io/WW3/pen/XWEVoqN

Leave a Comment or Response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>