Add WCAG 1.3.1 scope attributes to Tablefield table headers [#3582410]

Problem/Motivation

The Tablefield module renders structurally correct <th> elements in both <thead> (when "Display first row as a table header" is on) and <tbody> (when "Display first column as a table header" is on), but it omits the scope attribute. Without scope, assistive technology has no programmatic way to associate data cells with their headers in tables that have both column and row headers. This is a WCAG 2.1 SC 1.3.1 (Info and Relationships) failurehttps://www.w3.org/WAI/WCAG22/Techniques/html/H43

Steps to reproduce

A table with both row and column headers

Proposed resolution

The fix: add scope="col" to <thead> cells and scope="row" to row-header <th> cells in <tbody>. And ID and Header attribute tags to better convey the tabular data to screen readers.

Remaining tasks

User interface changes

API changes

Data model changes

Issue fork tablefield-3582410

Show commands

Start within a Git clone of the project using the version control instructions.

Add & fetch this issue fork’s repository

Or, if you do not have SSH keys set up on git.drupalcode.org:

Add & fetch this issue fork’s repository

3582410-add-wcag-with-41 changes, plain diff MR !77
Check out this branch for the first time

Check out existing branch, if you already have it locally
3582410-add-wcag-1.3.1 changes, plain diff MR !76 / changes, plain diff MR !75
Check out this branch for the first time

Check out existing branch, if you already have it locally

About issue forks

Comments

Comment #1

31 March 2026 at 10:49

nicholass created an issue. See original summary.

Comment #2

31 March 2026 at 10:59

nicholass opened merge request !75

Comment #3

31 March 2026 at 11:00

nicholass opened merge request !76

Comment #4

31 March 2026 at 11:00

nicholass closed merge request !75

Comment #5

nicholass

English

commented 31 March 2026 at 11:05

Comment #6

nicholass

English

commented 31 March 2026 at 11:09

Tested this patch on our site and seems to be working correctly and now have more ADA friendly complex tables.

<table id="tablefield-paragraph-156001-field_pg_table_tablefield-0" class="tablefield table table-hover table-striped" data-striping="1">

      <thead class="">
      <tr>
                            <th class="row_0 col_0" scope="col">Grant Amount</th>
                            <th class="row_0 col_1" scope="col">Affordability Period</th>
              </tr>
    </thead>

      <tbody>
                      <tr class="odd">
                      <th class="row_1 col_0" scope="row">$0-$14,999</th>
                      <td class="row_1 col_1">5 Years</td>
                  </tr>
                      <tr class="even">
                      <th class="row_2 col_0" scope="row">$15,000 - $30,000</th>
                      <td class="row_2 col_1">10 Years</td>
                  </tr>
                      <tr class="odd">
                      <th class="row_3 col_0" scope="row">$30,001 - $50,000</th>
                      <td class="row_3 col_1">15 Years</td>
                  </tr>
                      <tr class="even">
                      <th class="row_4 col_0" scope="row">$50,001 - $75,000</th>
                      <td class="row_4 col_1">20 Years</td>
                  </tr>
                      <tr class="odd">
                      <th class="row_5 col_0" scope="row">$75,001 - $100,000</th>
                      <td class="row_5 col_1">30 Years</td>
                  </tr>
          </tbody>
    </table>

Show less

Comment #7

nicholass

English

commented 31 March 2026 at 11:10

Issue summary:

View changes

Comment #8

nicholass

English

commented 31 March 2026 at 11:11

Issue summary:	View changes
Status:	Active	» Needs review

Comment #9

nicholass

English

commented 31 March 2026 at 14:03

Status:

Needs review

» Needs work

This doesn't fully satisfy my ADA scanner, need to add id and header attributes to complex tables :(

Comment #10

nicholass

English

commented 31 March 2026 at 16:35

Ok now this patch produces tables with headers and ID to make our accessibility scanner happy. We use #3128030 patch so its also compatible with that and with the stock way this module allows you to set headers (globally) so it shouldn't affect people who lack the #3128030 patch.

Example:

<table id="tablefield-paragraph-156001-field_pg_table_tablefield-0" class="tablefield table table-hover table-striped" data-striping="1">
  
  
      <thead class="">
      <tr>
                            <th class="row_0 col_0" scope="col" id="tablefield-156001-field_pg_table_tablefield-0-row0-col0">Grant Amount</th>
                            <th class="row_0 col_1" scope="col" id="tablefield-156001-field_pg_table_tablefield-0-row0-col1">Affordability Period</th>
              </tr>
    </thead>
  
      <tbody>
                      <tr class="odd">
                      <th class="row_1 col_0" scope="row" id="tablefield-156001-field_pg_table_tablefield-0-row0-col0" headers="tablefield-156001-field_pg_table_tablefield-0-row0-col0">$0-$14,999</th>
                      <td class="row_1 col_1" headers="tablefield-156001-field_pg_table_tablefield-0-row0-col1 tablefield-156001-field_pg_table_tablefield-0-row0-col0">5 Years</td>
                  </tr>
                      <tr class="even">
                      <th class="row_2 col_0" scope="row" id="tablefield-156001-field_pg_table_tablefield-0-row1-col0" headers="tablefield-156001-field_pg_table_tablefield-0-row0-col0">$15,000 - $30,000</th>
                      <td class="row_2 col_1" headers="tablefield-156001-field_pg_table_tablefield-0-row0-col1 tablefield-156001-field_pg_table_tablefield-0-row1-col0">10 Years</td>
                  </tr>
                      <tr class="odd">
                      <th class="row_3 col_0" scope="row" id="tablefield-156001-field_pg_table_tablefield-0-row2-col0" headers="tablefield-156001-field_pg_table_tablefield-0-row0-col0">$30,001 - $50,000</th>
                      <td class="row_3 col_1" headers="tablefield-156001-field_pg_table_tablefield-0-row0-col1 tablefield-156001-field_pg_table_tablefield-0-row2-col0">15 Years</td>
                  </tr>
                      <tr class="even">
                      <th class="row_4 col_0" scope="row" id="tablefield-156001-field_pg_table_tablefield-0-row3-col0" headers="tablefield-156001-field_pg_table_tablefield-0-row0-col0">$50,001 - $75,000</th>
                      <td class="row_4 col_1" headers="tablefield-156001-field_pg_table_tablefield-0-row0-col1 tablefield-156001-field_pg_table_tablefield-0-row3-col0">20 Years</td>
                  </tr>
                      <tr class="odd">
                      <th class="row_5 col_0" scope="row" id="tablefield-156001-field_pg_table_tablefield-0-row4-col0" headers="tablefield-156001-field_pg_table_tablefield-0-row0-col0">$75,001 - $100,000</th>
                      <td class="row_5 col_1" headers="tablefield-156001-field_pg_table_tablefield-0-row0-col1 tablefield-156001-field_pg_table_tablefield-0-row4-col0">30 Years</td>
                  </tr>
          </tbody>
    </table>