Users cannot add table metadata in the visual editor

[karlgroves]

Users cannot add table metadata in the visual editor

• Severity: Medium
• Affected Populations:
  • Blind
  • Low-Vision
  • Cognitively Impaired
• Platform(s):
  • All / Universal
• Components affected:
  • Block Editing
  • Output Markup

Issue description

Authors using the visual editor can create a table, however the table
which results is only a series of rows and columns with no column-header
information, which may cause assistive technologies to assume these are
layout tables rather than data tables.

Users appear to be only able to add table headers by switching to the
HTML view. However not all authors have HTML knowledge and so may be
producing inaccessible tables.

Authors attempting to add table semantics such as a <caption>
element are shown an error, which may cause people using the editor to
think these are real errors.

Issue Code

    <!-- default resultant code in HTML view -->


    <table class="wp-block-table is-style-regular">


        <tbody>


            <tr>


                <td>This is a table!</td>


                <td>For tabular data</td>


            </tr>


            <tr>


                <td>But has no apparent way</td>


                <td>Of creating headers etc. without editing as HTML</td>


            </tr>


        </tbody>


    </table>

Remediation Guidance

Make the default Table block type assume that the first row is a header
row. This assumption is similar to what CSV files do, and will help
content authors create semantic tables despite any lack of HTML
knowledge.

Allow users to use the HTML editor to add in other semantics, such as
<caption> elements or scope attributes, without showing these
as errors to users.

Recommended Code

    <table class="wp-block-table is-style-regular">


        <thead>


            <tr>


                <th>This is a table!</th>


                <th>For tabular data</th>


            </tr>


        </thead>


        <tbody>


            <tr>


                <td>But has no apparent way</td>


                <td>Of creating headers etc. without editing as HTML</td>


            </tr>


        </tbody>


    </table>

Note: This issue may be a duplicate with other existing accessibility-related bugs in this project. This issue comes from the Gutenberg accessibility audit, performed by Tenon and funded by WP Campus. This issue is GUT-103 in Tenon's report

[afercia]

This is a long standing issues and an accessibility priority to empower users to produce accessible content. See #6923 which incorporates #1470 (June 2017). Almost 2 years from the original report and still no method to define table headers.

At some point it was also suggested to discourage the usage of tabes, see #1470 (comment)

[talldan]

I've started working on an a PR (#15409) to add table header and footers to the table block. Needs some finessing, but I don't see any major blockers to getting it merged.

I haven't marked it as closing this issue as this also mentions adding captions to tables. I could potentially roll that into the PR, but I might just tackle it on a separate PR.

[talldan]

Here's a PR for the table caption: #15554

[talldan]

After the caption PR is merged the main thing remaining (afaik) is the supporting the ability to add scope attributes to the table.

The main thing at the moment would be to ensure those scope attributes aren't stripped off or that they don't cause an invalid block if a table is pasted in, or the html is manually edited.

At the moment the table implementation isn't really sophisticated enough to handle headers outside of a <thead> element when editing visually, so I don't think we need to worry about that aspect presently.

[mapk]

The PR, #15554, looks ready for merging. I'll drop the label for design feedback. Excellent work!

[enriquesanchez]

@mapk Looks like #15554 was merged back in December. Can we close this issue now?

[mapk]

I believe so!

[afercia]

Thinking a follow-up issue should be created for further iterations. At the moment, the table block implementation is still pretty basic. Some important semantics can only by added by editing the HTML:

At the moment the table implementation isn't really sophisticated enough to handle headers outside of a element when editing visually, so I don't think we need to worry about that aspect presently.

Also, the caption implementation seems incomplete to me, see #15554 (comment)

[joedolson]

I'm not totally convinced that this should have been closed, although the letter of the issue is resolved. Regardless, I agree that there should be a follow-up issue to iterate on this. It should be possible to define table row headers, not just a thead with column-scoped headers.

• It shouldn't be an option to leave cells empty, or adding content should be prompted
• Tables without any cells should be marked as role="presentation"
• The figure/figcaption implementation is a strange choice, given that there is a standard caption element (per @afercia's comment, indicated above.)

[mapk]

I think a follow-up issue would be great! Thank you 👍