Why are table-based sites poorly suited for screen users?

How much easier is it for screen readers to process <div> -based websites, unlike older <table> websites, and why are they worse?

+3
source share
4 answers

Screen readers assume that the content inside the table is tabular and reads it as such. For example. "row 1, column 1: (contents)". If you use tables to host your site, this does not necessarily make sense. You tell the end client that you have data with a table value when you are not actually doing this.

In contrast, div have no meaning other than a “section,” so screen readers are not trying to label them. You can use divs to create arbitrary visual breaks in your layout without affecting the markup value.

This is what we mean when we say “semantic” markup. Semantic means that the markup accurately describes the meaning of the content inside it - tables wrap around tabular data, UL wrap unordered lists, etc.

+8
source

Table based sites may confuse a screen reader for the type of data that is presented. The tables were originally used to display a 2D list of data. But when using tables suitable for design, readers would have to distinguish between the intent of the table.

+3
source

It depends on what the table is used for. If the table is used for layout, the screen reader does not know this and reads the cell by cell, starting from the first row, column one, row one column two, row two columns one row two columns two, etc., which is often not The content is intended to be viewed. If data should be displayed in tables with a structured form, this is the best way to read from the screen, because keystrokes can be used to read line by line and column by column. As a screen user, I find it anonymous when the data does not seem to make any sense, because it is either poorly laid out by the table or the table is not used at all, and some other visual indication is used.

+1
source

The view that DIVs works better with screen readers than tables does not contain a real problem.

Existing CSS and HTML standards simply do not contain any obvious signs / indicators to assist screen readers. Until they do, whether you use DIVs or tables, you just need to hope that your “semantically correct CSS page” or “get worksheets” will work with most on-screen readers.

Remember that it is also easy to create an incomprehensible page using only the DIV, as it uses tables.

0
source

All Articles