Visa Accessibility - Tabular Data (CON-008)

Content

Tabular Data (CON-WEB-008)

Markup tabular data in accessible tables

Tables should never be used to create the visual page layout.

Data tables must use proper table headers and every table header must have the scope attribute set to column or row unless it would invalidate a data relationship. If necessary, the headers= attribute can be used to hard code how headers are to be read to the user.

Tables must also include a caption that presents screen reader users with a descriptive, unique title that identifies each table. If the table has more than 4 table headings a caption must be included that summarizes the table’s layout and functional relationships.

Requirements

No Layout Tables (CON-WEB-008-01)

Tables MUST not be used for layout purposes. Layout tables are not a direct WCAG 2.0 AA failure, however when a table is linearized it can complicate or confuse the linear order of the content (See WCAG F49 for details).

Markup Tables (CON-WEB-008-02)

All data tables MUST use THs and every TH must have scope="col" or "row" set unless any implied relationships would be untrue. In that case, headers= MUST be used to hard code how headers are read to users.

<table>
	<tr>
		<th scope="col">Name</th>
		<th scope="col">Age</th>
		<th scope="col">Birthday</th>
	</tr>
	<tr>
		<th scope="row">Buzz</th>
		<td>1</td>
		<td>April 10th, 2014</td>
	</tr>
</table>

Identify Tables (CON-WEB-008-03)

Data tables MUST be identified for screen readers by including the "title" of the table in its element, e.g., "Transaction History for x2304".

Note: The caption may be hidden visually with CSS.

<table>
	<caption class="screen-reader-only">Transaction History</caption>
	<tr>
		<th scope="col">Recent Transactions</th>
		<th scope="col">Post Date</th>
		<th scope="col">Transaction Date</th>
	</tr>
	<tr>
		<td>$13.42</td>
		<td>08/01/2015</td>
		<td>07/30/2015</td>
	</tr>
</table>

Summarize Table Layout (CON-WEB-008-04)

If a data table has more than 4 table headings (THs), the layout/functionality of the table MUST be described in the caption after the "title" of the table. (e.g., Transaction History for x2304: recent transactions in column 1 and details in the next 4 columns. available actions for each transaction are available in column 6)

Note: The caption may be hidden visually with CSS.

<table>
	<caption class="screen-reader-only">Transaction History for x2304: 

recent transactions in column 1 and details in the next 4 columns. 

Available actions for each transaction are available in column 6</caption>
	<tr>
		<th scope="col">Recent Transactions</th>
		<th scope="col">Post Date</th>
		<th scope="col">Transaction Date</th>
		<th scope="col">Merchant Name</th>
		<th scope="col">Balance</th>
		<th scope="col">Actions</th>
	</tr>
	<tr>
		<td>$13.42</td>
		<td>08/01/2015</td>
		<td>07/30/2015</td>
		<td>Pat's Cats</td>
		<td>$1,459.72</td>
		<td><button id="view">View Check</button></td>
	</tr>
</table>

Table Sorting (CON-WEB-008-05)

Sorting state MUST be announced to the screen reader and all sorting controls MUST be keyboard accessible.

<table role="grid">
	<caption class="screen-reader-only">Transaction History</caption>
	<tbody>
		<tr>
			<th scope="col" aria-sort="ascending">
				<span tabindex="0" role="button">Date</span>
			</th>
			<th scope="col" tabindex="-1">Type</th>
			<th scope="col" aria-sort="none">
				<span tabindex="0" role="button">Amount</span>
			</th>
		</tr>
	</tbody>
</table>

Test Procedures

Jim Thatcher > Tables (CON-WEB-008-01-T)

Run the Jim Thatcher Table Favelet and review the tables on the page, confirming that no tables are used for layout purposes.

Jim Thatcher > Tables (CON-WEB-008-02-T)

Run the Jim Thatcher Table Favelet and review the tables on the page, Confirm that THs are used as appropriate and every TH has scope as appropriate. If present, confirm that headers point to the correct TH's IDs.

Screen reader > Tables (CON-WEB-008-03-T)

Bring up the list of tables (or cycle through each if a list is not available) with each supported screen reader and confirm that each table is identified.

Screen reader > Tables (CON-WEB-008-04-T)

Bring up the list of tables (or cycle through each if a list is not available) with each supported screen reader and confirm that each table with more than 4 THs has its layout/functionality described after the "title".

Screen reader Tables - Sorting (CON-WEB-008-05-T)

Use a screen reader to access any table sorting functionality on the page. Confirm that sorting state is announced to the screen reader and that all sorting controls are keyboard accessible.

VGAR Content Requirements