ways2read/InDesignA11Y

Tables

Opened this issue · 8 comments

LauraB7 commented

User story "As a user, when alt text is not sufficient to understand a complex image I can access an extended description (also would be useful for PDF)."

awkawk commented

@LauraB7 Is that the correct user story for this issue?

jonaslil commented

Dear @Racmathu, @raman211, @NawneetG,

Here is some more detailed information about this issue.

Three main features of accessible table markup are missing in Indesign's output for EPUB/HTML. In order of importance:

  1. Markup of header cells - both column and row headers - as <th>
  2. Use of the scope attribute to distinguish column headers (scope="col") from row headers (scope="row")
  3. Support for the <caption> element for table titles.

We suggest approaching the issue in the following order:

  1. Use <th> markup and scope="col" for cells in rows that are converted to header.

    Indesign has a menu option for converting table rows to header, body or footer.
    Currently, when rows are converted to header, the rows will be nested in a <thead> but the cells are not marked as <th>. An easy fix would be to use <th scope="col"> for any non-empty cells within the <thead>. (Empty cells in <thead> should not be marked as <th>, as this will trigger an error in Ace by Daisy, so they should be exported as <td>.)

  2. Create a mechanism for the user to mark up row headers.

    Row headers are usually found in the leftmost column(s). In some cases, especially in right to left languages, they can be found in the rightmost column(s). Row headers are marked up with <th scope="row">. They are expected to be found only in <tbody> and <tfoot>, not in <thead>.

  3. Create a mechanism to mark up table titles as a <caption> nested within the table.

    The caption is a visible title for the table. Currently, while you can create caption markup using paragraph style export tagging, the resulting HTML will not be valid since the caption cannot be nested within the table. There is a parallel here to #23, which is about creating a <figcaption> that is properly nested within the <figure>.

Examples

Table with caption, column headers and row headers, using scope attribute: table_example.zip
(Adapted from an example in the Daisy KB, Table Basics)

MDN, <th>: The Table Header element

MDN, <caption>: The Table Caption element

raman211 commented

@jonaslil In InDesign we don't have the concept of Column Headers for the Table
Given this what is expected here for the things like <th scope="row">Alberta</th>?

jonaslil commented

@raman211 The example "Alberta" refers to a row header, so what seems to be missing in Indesign is the concept of row headers, rather than column headers.

We believe the ideal solution would be to add support for converting columns to header, similar to the existing menu option: Table > Convert Rows > To Header. This would only impact the HTML output, not the visual layout of the columns in InDesign.

In the HTML output, any non-empty cells within a column converted to header would be tagged as <th scope="row">, except when a cell is a part of <thead> (i.e., when it belongs to a row that has been converted to a header). In such cases, the cell should be treated as a column header and tagged as <th scope="col">.

NawneetG commented

@awkawk @gregoriopellegrino @ways2read @LauraB7 @jonaslil We have release InDesign 20.0.0.55 PR build. This includes table support as discussed above. Please do check and provide feedback if any
cc/ @raman211 @Racmathu

NawneetG commented

@awkawk @gregoriopellegrino @ways2read @LauraB7 @jonaslil please do share your feedback so that if anything needs to be done, we can try to accomodate it in MAX.

gregoriopellegrino commented

Dear @NawneetG,
thank you for the update on table accessibility in the latest prerelease build. We've had a chance to review the implementation, here are our comments.

We’ve seen that 1 from our proposal (column header markup for cells in header rows) has been implemented, and it works correctly in most situations.

Areas for Improvement:

  1. Empty Header Cells:
    • The <th> markup is currently being applied to empty cells, which triggers a best practice error in Ace by DAISY (empty-table-header)
    • Suggestion: apply table header markup only to cells with content, as we originally proposed
  2. CSS for Header Cells:
    • The default CSS applied by InDesign doesn't account for the <th> element, resulting in borders around data cells but not header cells.
    • Quick fix: add th.Basic-table after the td.Basic-table selector in the CSS (td.Basic-table, th.Basic-table).

Apart from this development items 2 (row headers) and 3 (captions) from our proposal still appear to be missing.