Tables

Public Article

The content of this article is certified for accuracy by the Digital Accessibility Centre.

Tables

Requirements

Data tables have appropriate markup according to W3C specifications including headers and summaries.
No layout tables are present on the site.
Abbreviations are used for long header labels

Full explanation

Tables must be made using appropriate markup to ensure that they are rendered properly by assistive technologies. Tables are not used extensively for layout.

Table without a caption:

<table>
        <tr>
                <td class=“hidden”> Times </td>
                <th>Monday</th>
        </tr>

        <tr>
                <th>8:00-9:00</th>
                <td>Meet with Sam</td>
        </tr>

        <tr>
                <th>9:00-10:00</th>
                <td>Sam again</td>
        </tr>
</table>

Browser view:

JAWS view:

Jaws view showing select a table view dialogue

Complex tables with a caption

<table>
        <caption>How do you wish to pay your early repayment charge? </caption>

        <tr>
                <td></td>
                <th scope="col" id="c1">Include charge within amount</th>
                <th scope="col" id="c2">Add charge to amount</th>
        </tr>

        <tr>
                <th scope="row" id="r1">Overpayment amount: </th>
                <td headers="c1 r1">1,990.48</td>
                <td headers="c2 r1">2,000</td>
        </tr>

        <tr>
               <th scope="row" id="r2">Early repayment charge:</th>
               <td headers="c1 r2">9.52</td>
               <td headers="c2 r2">10.00</td>
        </tr>

        <tr>
                <th scope="row" id="r3"> Your total payment: </th>
                <td headers="c1 r3"> 2,000.00 </td>
                <td headers="c2 r3"> 2,000.10 </td>
        </tr>

        <tr>
                <td></td>
                <td><button type="button">Include charge</button></td>
                <td><button type="button">Add charge</button></td>
        </tr>
</table>

Browser view:

Browser view of table

JAWS view:

Jaws view showing table dialogue

Tables was posted on 14/02/2023 @ 15:15