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 · 10 comments
Closed

Users cannot add table metadata in the visual editor #15283

karlgroves opened this issue Apr 30, 2019 · 10 comments
Assignees
Labels
[Block] Table Affects the Table Block [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Status] In Progress Tracking issues with work in progress

Comments

@karlgroves
Copy link

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

@gziolo gziolo added the Needs Accessibility Feedback Need input from accessibility label Apr 30, 2019
@afercia
Copy link
Contributor

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)

@afercia afercia added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). and removed Needs Accessibility Feedback Need input from accessibility labels May 1, 2019
@talldan
Copy link
Contributor

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.

@karmatosed karmatosed added the Needs Design Feedback Needs general design feedback. label May 6, 2019
@talldan talldan added the [Block] Table Affects the Table Block label May 10, 2019
@talldan talldan self-assigned this May 10, 2019
@talldan
Copy link
Contributor

talldan commented May 10, 2019

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

@talldan
Copy link
Contributor

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
Copy link
Contributor

mapk commented Nov 19, 2019

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

@mapk mapk removed the Needs Design Feedback Needs general design feedback. label Nov 19, 2019
@enriquesanchez
Copy link
Contributor

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

@mapk
Copy link
Contributor

mapk commented Mar 6, 2020

I believe so!

@mapk mapk closed this as completed Mar 6, 2020
@afercia
Copy link
Contributor

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)

@joedolson
Copy link
Contributor

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
Copy link
Contributor

mapk commented Jul 24, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Table Affects the Table Block [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Status] In Progress Tracking issues with work in progress
Projects
None yet
Development

No branches or pull requests

8 participants