Problem Statement
The Block Editor's Table node renders tables that are not compliant with basic accessibility (WCAG 1.3.1 Info and Relationships, 4.1.2 Name, Role, Value). When a content author inserts a table via the Block Editor and the page is rendered, the output
markup is missing the attributes screen readers rely on to convey table structure:
<th> elements have no scope attribute (so screen readers can't determine column vs row headers).
No
element is rendered, and there is no way for authors to add one from the UI.
<table> has no aria-label or aria-labelledby attribute.Current behavior
Inserting a table via the Block Editor produces markup of the form:
<table>
<tbody>
<tr><th><p>Header 1</p></th><th><p>Header 2</p></th></tr>
<tr><td><p>Cell</p></td><td><p>Cell</p></td></tr>
</tbody>
</table>
No scope, no <caption>, no aria-* attributes.
Expected behavior
Authors should be able to produce accessible tables out of the box:
<th> cells in the first row default to scope="col"; <th> cells in the first column default to scope="row" (sensible defaults — author override optional).
A <caption> node is part of the Table schema and editable from a table-properties popover.
aria-label and aria-labelledby can be set on the <table> from the same popover.
Steps to Reproduce
- Open any Block Editor field.
- Insert a table (with header row).
- Save and view the rendered page source.
- Observe: no scope, no
<caption>, no aria-* attributes on <table> or <th>.
Acceptance Criteria
<th> cells render a scope attribute (default col for first row, row for first column; author-editable).<caption> is a first-class node in the table schema, addable/removable from the table-properties UI.- aria-label and aria-labelledby can be set on the and round-trip correctly through save/load.
- All attributes round-trip through serialization (no loss on save → fetch → re-render).
- Existing tables continue to render without breakage (back-compat).
- Unit test coverage for the new attributes on the Table / TableHeader / TableCaption extensions.
dotCMS Version
latest
Severity
Medium - Some functionality impacted
Links
https://helpdesk.dotcms.com/a/tickets/37339
Problem Statement
The Block Editor's Table node renders tables that are not compliant with basic accessibility (WCAG 1.3.1 Info and Relationships, 4.1.2 Name, Role, Value). When a content author inserts a table via the Block Editor and the page is rendered, the output
markup is missing the attributes screen readers rely on to convey table structure:<th>elements have no scope attribute (so screen readers can't determine column vs row headers).No
<table>has no aria-label or aria-labelledby attribute.Current behavior
Inserting a table via the Block Editor produces markup of the form:
No scope, no
<caption>, no aria-* attributes.Expected behavior
Authors should be able to produce accessible tables out of the box:
<th>cells in the first row default to scope="col";<th>cells in the first column default to scope="row" (sensible defaults — author override optional).A
<caption>node is part of the Table schema and editable from a table-properties popover.aria-label and aria-labelledby can be set on the
<table>from the same popover.Steps to Reproduce
<caption>, no aria-* attributes on<table>or<th>.Acceptance Criteria
<th>cells render a scope attribute (default col for first row, row for first column; author-editable).<caption>is a first-class node in the table schema, addable/removable from the table-properties UI.dotCMS Version
latest
Severity
Medium - Some functionality impacted
Links
https://helpdesk.dotcms.com/a/tickets/37339