CODEWITHSUNDEEP
htmlhtml-tableaccessibility
Vecta
Vecta

Reputation: 2350

Accessible table with Vertical and Horizontal Headers

I'm working on a table that looks similar to my example below where X's in cells denote certain criteria based on the intersection of the respective horizontal/vertical headings.

For instance, in this situation an orange would have the qualities of "sweet" and "sour" but not salty or bitter.

<table>
    <tr>
        <th></th>
        <th scope="col">Sweet</th>
        <th scope="col">Sour</th>
        <th scope="col">Salty</th>
        <th scope="col">Bitter</th>
    </tr>
    <tr>
        <th scope="row">Apple</th>
        <td>x</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <th scope="row">Orange</th>
        <td>x</td>
        <td>x</td>
        <td></td>
        <td></td>
    </tr>
</table>

What would be the appropriate way to mark this up so that it is semantic and accessible? It seems as if cells should contain something more extensive than just an "X" to be meaningful, even if visually it just shows an "X".

Also, should the visibly empty cells actually contain some visually hidden text that states that said cell is not applicable?

Upvotes: 1

Views: 356

Answers (1)

Adam
Adam

Reputation: 18807

I would assume that "Yes" and "No" are great indicators, but do require some context (i.e scrolling to the heading of the table)

Having the text "sweet" "sour" "salty" or "bitter" is also an evident choice that would perfectly fit.

Everybody hates ticks in a consecutive table columns which do require a lot of attention.

<table>
    <tr>
        <th scope="row">Apple</th>
        <td>Sweet</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <th scope="row">Orange</th>
        <td>Sweet</td>
        <td>Sour</td>
        <td></td>
        <td></td>
    </tr>
</table>

Upvotes: 1

Related Questions