Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Users cannot add table metadata in the visual editor #15283

Closed
karlgroves opened this issue Apr 30, 2019 · 8 comments
Closed

Users cannot add table metadata in the visual editor #15283

karlgroves opened this issue Apr 30, 2019 · 8 comments

Comments

@karlgroves
Copy link

@karlgroves karlgroves commented Apr 30, 2019

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 comment has been minimized.

Copy link
Contributor

@afercia afercia commented May 1, 2019

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

This comment has been minimized.

Copy link
Contributor

@talldan talldan commented May 3, 2019

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

This comment has been minimized.

Copy link
Contributor

@talldan talldan commented May 10, 2019

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

@talldan

This comment has been minimized.

Copy link
Contributor

@talldan talldan commented May 10, 2019

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

This comment has been minimized.

Copy link
Contributor

@mapk mapk commented Nov 19, 2019

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

@enriquesanchez

This comment has been minimized.

Copy link
Contributor

@enriquesanchez enriquesanchez commented Feb 4, 2020

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

@mapk

This comment has been minimized.

Copy link
Contributor

@mapk mapk commented Mar 6, 2020

I believe so!

@mapk mapk closed this Mar 6, 2020
Accessibility Audit automation moved this from In progress to Closed Mar 6, 2020
@afercia

This comment has been minimized.

Copy link
Contributor

@afercia afercia commented Mar 9, 2020

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
7 participants
You can’t perform that action at this time.