Zoom in, zoom out, flip the phone… Argh!!! Data tables are always a problem when we have to visualize on the screen, but, in most of the times, is the best way to show the Data to users, and we can’t escape from it.
The problem
Data tables with a large amount of data in a form of a table are hard to be displayed for the user, even if they are using a computer. On a mobile device is even harder, because of the screen size limitation.
As you can see, the image on the left is showing us the content of the table, but you have to scroll to see the rest.
The image on the right shows us the full table, but it’s very small, and you have to zoom in to read.
The recommendation
- Table borders are used by screen readers for identifying a data table. This means that if a screen reader finds a table that does not have defined borders, it will possibly parse the table as a layout table and will not read its contents correctly.
- Some screen readers have difficulty identifying commonly used operands and characters usually used in data. One example is the use of hyphens to demonstrate negative numbers (for example -99.99). The screen reader will not read the hyphen in most cases, for this, it’s necessary to use the correct minus Unicode character.
- On some framework implementations, tables are not defined with the usual <table> HTML tag, but defined with <div> or custom tags. With this, the screen reader will not be able to understand the content.
- Data tables as any other content must have well defined ARIA attributes.
- There are other issues with how to present a data table so that screen readers can read it that are presented on http://webaim.org/techniques/tables/data.