Data Tables: Exposing row headers

Here is a bank statement presented as a simple data table. Rows in the table cannot be
clearly identified by reference to a single attribute like transaction type or its date or description.

Option 1: Use headers-id method

Perhaps concatenating the date and description may provide a useful reference point for screen reader users while navigating the table. This requires using the headers-id method. This is done in Table 1. Admittedly, using headers-id
is tedious. Some users may feel this is too verbose especially as this appears to be a simple data table that has no colspan or rowspan markup.

Option 2: Use the scope attribute for a single column

Table 2uses only the scope attribute for the date column. This is much easier to implement and provides a reference point as one navigates down one of the columns on the right.

User experience when row headers are not marked up

The above two methods work well using JAWS or NVDA. However, VoiceOver does not
support these methods. Table 3 does not use either of the two methods; nor are row header cells marked up as TH. So a screen reader user's experience with Table 3 is very poor. JAWS, NVDA (on Windows) and VoiceOver (on OSX) permit users to interrogate any table cell's coordinates. But this is done by a user when no other orientation info is available.

User experience on iPhone / iPad

After selecting “rows” in the rotor on an iPhone / iPad, VoiceOver does announce the row# as one flicks up/down within a table that does not have row headers marked up with the TH element like in any of the three tables above. The rotor navigation using rows (not vertical navigation) is a helpful fallback for VoiceOver users on an iPhone when no other orientation info is available.

Leave a Reply

Your email address will not be published. Required fields are marked *