Opinions may differ on this, but I am of the opinion that you should not add extra instructions on the names of column headers in tables on the web. If you are going to do so, ensure it is done in a fashion that allows a screen reader to avoid announcing those instructions if the user desires not to have them communicated.
I recently encountered an experience with one of the financial services I use where some excellent table functionality is ruined by breaking this simple rule. It makes getting the actual data from the tables much more difficult. The tables properly use both column and row headers and have good keyboard navigation even when not using a screen reader as just two examples of what works well.
In the case of my financial service, an example column name is now:
Last Price, (press Enter to sort)
Because this is part of the column header, albeit hidden visually, you must now hear this or read it in braille before you get to the details for a cell when moving through a row of information with a screen reader’s table reading commands.
Instead of just hearing the column name and the value, I must hear the column name, these instructions, and then the value. This is now how the result is communicated when moving to a given cell with a screen reader’s table navigation commands.
Last Price, (press Enter to sort) $174.01-$0.81
Examining the HTML, I find this is part of the column header name.
<span class="screen-reader-only">
", (press Enter to sort)"
I would suspect this was added in an attempt to be helpful. It is complete speculation on my part but it is even entirely possible that a usability study was done on this table and one of the questions asked was if the users knew they could sort the table. I would be willing to bet, continuing my speculation, that the answer was no and this extra text for screen reader users was added.
The problem is that this breaks the actual functionality of the table. Reading through the row, you are trying to study the details of the data. That flow is interrupted by the instructions on sorting being inserted between the column header and the data. You either have to learn to tune it out or some other strategy of ignoring the instructions. Again it is inserted as part of the column name so it isn’t as if the screen reader can ignore half the column name here.
It is also interesting that prior to the table, there is a full paragraph marked up with the same “screen-reader-only” class giving all sorts of instructions on reading the table with a screen reader.
There are a range of options to improve on this in my opinion. At minimum, given the way the full site has been constructed, move these sorting instructions into the other instructions you already have for getting information from the table.
Other solutions are possible of course and my point here is more to point out how in trying to be helpful, you can easily break what works well with screen readers and other assistive technology.
Comments