Table dimensions are read as "0 by 0" by Windows Narrator

[lkszzajac]

📝 Provide detailed reproduction steps (if any)

1. Open any editor and remove its initial content (e.g. https://ckeditor.com/ckeditor-5/demo/feature-rich/)
2. Create a table (e.g. 3x3, can be empty)
3. Enable Windows Narrator
4. Focus the table widget

✔️ Expected result

Narrator reads the widget as a table and announces its dimensions

❌ Actual result

Narrator reads the widget as a table and reports its dimensions as 0x0

narrator-table-0x0.mp4

📃 Other details

• Browser: Edge
• OS: Windows 11
• First affected CKEditor version: …
• Installed CKEditor plugins: …
• Related issues in other screen readers:
  • Missing labels for all the widget editables #11867
  • Mark grid UI components with semantical markup #12224
  • Table cells are marked as textbox but without any label #13479
• Issue does not reproduce in other screen readers because no other reader reports on table dimension by default on focus. VoiceOver can read the table dimensions only after focusing a cell and going "up" in focus by one level

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[lkszzajac]

We've checked the behavior in these setups:

Windows/Edge:

• Narrator - announces the table with "Enter table, 0x0"
• JAWS - announces the table with "Edit, land, type of text"
• NVDA - announces the table with "Figure, table, mutliline, blank"

macOS/Chrome:

• VoiceOver - announces the table with "table" without any dimensions.

macOS/Firefox/Safari:

• VoiceOver - announces the table with dimensions correctly, does not announce the cells as editable

[Comandeer]

According to the ARIA spec, elements with the row role (and <tr> elements have it by default) can only contain children with the cell role. However, due to how we implemented nested editables, we overwrite the role of the <td> elements to textbox, creating an accessibility tree that is invalid according to the specification. Probably we should rethink our approach to nested editables in tables.

Some possible solutions:

• remove the textbox role – however it could lead to loss of information about cells being editable; needs testing,
• move the textbox role into a dynamically injected div element that would reside inside the cell – sounds quite brittle and error-prone,
• keep the current structure and provide the table info ourselves – that's a really dirty hack, though.

[Mati365]

@Comandeer I checked few solutions:

remove the textbox role – however it could lead to loss of information about cells being editable; needs testing,

It works, but it stopped announcing that content is editable. At this moment, after focusing the first cell of the table, it's announcing: Tabela, przejdź do tabeli, zero na zero, edytuj, spacja but after modification: Tabela, Przejdź do tabeli, 5 na 6, wejście angielski, kolumna 3 z 5, koniec wiersza. So imo, it's even worse.

move the textbox role into a dynamically injected div element that would reside inside the cell – sounds quite brittle and error-prone,

I tried to add role: textbox to ck-table-bogus-paragraph that is directly under td and removing role: textbox from td. It's not announcing info about editable content, identically as with the missing role: textbox.

keep the current structure and provide the table info ourselves – that's a really dirty hack, though.

I'm not sure. Do you mean adding aria-label to td?

[Comandeer]

What screen reader did you test? VoiceOver? It would be better to test it in English and to also test JAWS and NVDA.

It works, but it stopped announcing that content is editable. At this moment, after focusing the first cell of the table, it's announcing: Tabela, przejdź do tabeli, zero na zero, edytuj, spacja but after modification: Tabela, Przejdź do tabeli, 5 na 6, wejście angielski, kolumna 3 z 5, koniec wiersza. So imo, it's even worse.

Isn't "wejście angielski" supposed to mean that the field is editable and its language is set to English? 🤔 Yet it's super cryptic (at least in Polish).

I'm not sure. Do you mean adding aria-label to td?

More of [aria-describedby] on the table/figure with the dimensions of the table.

[Mati365]

@Comandeer

What screen reader did you test? VoiceOver? It would be better to test it in English and to also test JAWS and NVDA.

Microsoft Reader using this HTML file:
index.html

Isn't "wejście angielski" supposed to mean that the field is editable and its language is set to English? 🤔 Yet it's super cryptic (at least in Polish).

Checked, it reads it as "Passed to cell". Nothing about editing.

More of [aria-describedby] on the table/figure with the dimensions of the table.

I checked it using aria-describedby / aria-labeledby and it doesn't work. I tested it using:

      <figure class="table ck-widget ck-widget_with-selection-handle" style="width:29.68%;" contenteditable="false" >
         <table class="ck-table-resized" aria-labelledby="trash-desc">
            <tbody>
               <tr>
                  <td class="ck-editor__editable ck-editor__nested-editable" tabindex="-1" role="textbox" aria-labelledby="trash-desc" aria-describedby="trash-desc" contenteditable="true">
                     <span>Cześć!</span>
                  </td>

Basically it read content of trash-desc but always append 0 x 0 😞

---

move the textbox role into a dynamically injected div element that would reside inside the cell – sounds quite brittle and error-prone,

imho, it's the only correct way to fix this issue, and seems to be working correctly but it's the most complex one. At this moment Microsoft Narrator does not recognize td tags as cells so it's reading table size as 0x0.

[Mati365]

I added draft PoC of table with adjusted HTML structure that works on Microsoft Narrator: #17083

Unfortunately, it looks it's buggy and needs refactor of major parts of table CSS and investigation why Firefox hangs.

[Witoso]

@Mati365 could you prepare a comparison table of screen readers of current solution vs the one you tested.

[Mati365]

@Witoso Checked few screen readers on that table:

It looks like changing structure of table HTML improved support for Microsoft Narrator and JAWS. NVDA works the same as before.

I did not test Apple VoiceOver.

Microsoft Narrator:

It's improved ✅ 0 by 0 issue has been fixed.

Before: Enter table, 0 by 0, <content editable content>
After: Enter table, 10 by 12, <content editable content>

NVDA

Nothing changed, but it was ok already. ✅

Before: Table, Object with Data, Editing fields, <content editable content>
After: Table, Object with Data, Editing fields, <content editable content>

JAWS

It looks like changing structure of table improved JAWS navigation a lot. ✅

Before: Type and test
After: Terrestrial planets, Diameter (km), (from time to time coordinates of cell in the table), Type and test