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