How to use headers attribute to make table A11Y compliant?

Question

I'm creating an application that should be WCAG 2.0 compliant. I'm checking my pages using AChecker and I'm experiencing some problems with table. I get the following 2 issues:

Data table with both row and column headers does not use scope to identify cells
Data table with more than one row/column of headers does not use id and headers attributes to identify cells

Here is the source code of my table:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
    <body>
        <table class="ui celled center aligned unstackable table seven column day">
            <thead>
                <tr>
                    <th colspan="7">
                        <span class="link">Giugno 2017</span>
                        <span class="prev link">
                            <span class="ifix chevron left icon"></span>
                        </span>
                        <span class="next link">
                            <span class="ifix chevron right icon"></span>
                        </span>
                    </th>
                </tr>
                <tr>
                    <th>Dom</th>
                    <th>Lun</th>
                    <th>Mar</th>
                    <th>Mer</th>
                    <th>Gio</th>
                    <th>Ven</th>
                    <th>Sab</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="link adjacent disabled">28</td>
                    <td class="link adjacent disabled">29</td>
                    <td class="link adjacent disabled">30</td>
                    <td class="link adjacent disabled">31</td>
                    <td class="link">1</td>
                    <td class="link">2</td>
                    <td class="link">3</td>
                </tr>
                <tr>
                    <td class="link">4</td>
                    <td class="link today focus">5</td>
                    <td class="link">6</td>
                    <td class="link">7</td>
                    <td class="link">8</td>
                    <td class="link">9</td>
                    <td class="link">10</td>
                </tr>
                <tr>
                    <td class="link">11</td>
                    <td class="link">12</td>
                    <td class="link">13</td>
                    <td class="link">14</td>
                    <td class="link">15</td>
                    <td class="link">16</td>
                    <td class="link">17</td>
                </tr>
                <tr>
                    <td class="link">18</td>
                    <td class="link">19</td>
                    <td class="link">20</td>
                    <td class="link">21</td>
                    <td class="link">22</td>
                    <td class="link">23</td>
                    <td class="link">24</td>
                </tr>
                <tr>
                    <td class="link">25</td>
                    <td class="link">26</td>
                    <td class="link">27</td>
                    <td class="link">28</td>
                    <td class="link">29</td>
                    <td class="link">30</td>
                    <td class="link adjacent disabled">1</td>
                </tr>
                <tr>
                    <td class="link adjacent disabled">2</td>
                    <td class="link adjacent disabled">3</td>
                    <td class="link adjacent disabled">4</td>
                    <td class="link adjacent disabled">5</td>
                    <td class="link adjacent disabled">6</td>
                    <td class="link adjacent disabled">7</td>
                    <td class="link adjacent disabled">8</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Link to related Plunker.

According to this W3C documentation page do you know the right way to use headers in my case?

I tried to do it by myself and I edited my code. Here is the result:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
    <body>
        <table class="ui celled center aligned unstackable table seven column day">
            <thead>
                <tr>
                    <th id="month" scope="col" colspan="7">
                        <span class="link">Giugno 2017</span>
                        <span class="prev link">
                            <span class="ifix chevron left icon"></span>
                        </span>
                        <span class="next link">
                            <span class="ifix chevron right icon"></span>
                        </span>
                    </th>
                </tr>
                <tr>
                    <th id="dom" headers="month" scope="col">Dom</th>
                    <th id="lun" headers="month" scope="col">Lun</th>
                    <th id="mar" headers="month" scope="col">Mar</th>
                    <th id="mer" headers="month" scope="col">Mer</th>
                    <th id="gio" headers="month" scope="col">Gio</th>
                    <th id="ven" headers="month" scope="col">Ven</th>
                    <th id="sab" headers="month" scope="col">Sab</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td headers="dom" class="link adjacent disabled">28</td>
                    <td headers="lun" class="link adjacent disabled">29</td>
                    <td headers="mar" class="link adjacent disabled">30</td>
                    <td headers="mer" class="link adjacent disabled">31</td>
                    <td headers="gio" class="link">1</td>
                    <td headers="ven" class="link">2</td>
                    <td headers="sab" class="link">3</td>
                </tr>
                <tr>
                    <td headers="dom" class="link">4</td>
                    <td headers="lun" class="link today focus">5</td>
                    <td headers="mar" class="link">6</td>
                    <td headers="mer" class="link">7</td>
                    <td headers="gio" class="link">8</td>
                    <td headers="ven" class="link">9</td>
                    <td headers="sab" class="link">10</td>
                </tr>
                <tr>
                    <td headers="dom" class="link">11</td>
                    <td headers="lun" class="link">12</td>
                    <td headers="mar" class="link">13</td>
                    <td headers="mer" class="link">14</td>
                    <td headers="gio" class="link">15</td>
                    <td headers="ven" class="link">16</td>
                    <td headers="sab" class="link">17</td>
                </tr>
                <tr>
                    <td headers="dom" class="link">18</td>
                    <td headers="lun" class="link">19</td>
                    <td headers="mar" class="link">20</td>
                    <td headers="mer" class="link">21</td>
                    <td headers="gio" class="link">22</td>
                    <td headers="ven" class="link">23</td>
                    <td headers="sab" class="link">24</td>
                </tr>
                <tr>
                    <td headers="dom" class="link">25</td>
                    <td headers="lun" class="link">26</td>
                    <td headers="mar" class="link">27</td>
                    <td headers="mer" class="link">28</td>
                    <td headers="gio" class="link">29</td>
                    <td headers="ven" class="link">30</td>
                    <td headers="sab" class="link adjacent disabled">1</td>
                </tr>
                <tr>
                    <td headers="dom" class="link adjacent disabled">2</td>
                    <td headers="lun" class="link adjacent disabled">3</td>
                    <td headers="mar" class="link adjacent disabled">4</td>
                    <td headers="mer" class="link adjacent disabled">5</td>
                    <td headers="gio" class="link adjacent disabled">6</td>
                    <td headers="ven" class="link adjacent disabled">7</td>
                    <td headers="sab" class="link adjacent disabled">8</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Link to related Plunker.

Now AChecker says that there are "No known problems" in the page. Anyway can you confirm that my modification is the right way to use id and headers in case of more than one th element in a table?

score 2 · Accepted Answer · answered Jun 05 '17 at 13:06

2

What you are doing in the second table is technically correct. When you have colspans and rowspans, or when you have multiple <th>s, then this approach makes it accessible. Some resources (which you may have already read):

H43: Using id and headers attributes to associate data cells with header cells in data tables from W3C's Techniques for WCAG 2.0.
Creating Accessible Tables from WebAIM (linked to the relevant section on the page).

This approach is verbose, though. You may want to use <caption> instead for your month/year so it is not announced with every cell (for most screen readers, maybe all).

This means your users still get context, but do not have to listen to it on every cell. At any time they can pop back out to confirm what the table caption is.

answered Jun 05 '17 at 13:06

aardrian

8,581
30
40

Are you saying to use `` instead of `` ? – smartmouse Jun 05 '17 at 14:30
This might help (I made a CodePen): https://codepen.io/aardrian/pen/pwvwzG You will have to test it with your pagination links, but those are out of the scope of your question (which is why I did not discuss their need to be proper links). – aardrian Jun 05 '17 at 17:08
Thank you for your support ;) – smartmouse Jun 06 '17 at 07:48

How to use headers attribute to make table A11Y compliant?

1 Answers1