English 中文(简体)
Why are table based sites bad for screen reader users?
原标题:

How much easier is it for screen readers to handle <div> based websites as opposed to older <table> based websites, and why are they worse?

最佳回答

Screen readers assume the content inside a table is tabular, and reads it as such. E.g. "row 1, column 1: (contents)". If you use tables to lay out your site, this won t necessarily make any sense. You are telling the end-client you have data with tabular significance, when you actually don t.

By contrast, div have no meaning other than "section", so screen readers make no attempt to signify them. You can use divs to make arbitrary visual breaks in your layout without impacting the meaning of the markup.

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

问题回答

Table based sites may confuse the screen reader for the type of data that is being presented. Originally tables were used to show a 2D list of data. But with tables being used to fit designs, the readers would have to distinguish the intention of the table.

It depends on what a table is used for. If a table is used for layout the screen reader has no way of knowing this and reads cell by cell, starting in row one, column one, row one column two, row two column one row two column two, etc which often isn t the way the content is meant to be viewed. If data needs to be displayed in a structured form tables are the best way to go with screen readers since keystrokes can be used to read row by row and column by column. As a screen reader user I find it anoying when data doesn t appear to make any sence because it is either layed out poorly with a table, or a table isn t used at all and some other visual indication is used.

The viewpoint that DIVs work better with screen readers than tables is missing the real issue.

Current CSS and HTML standards simply don t provide any explicit tags/indicators to aid screen-readers. Until they do, regardless of whether you use DIV or tables, you have to just hope that your "semantically correct CSS page", or "get the job done tables" work with most screen-readers.

Don t forget, it is equally easy to create an incomprehensible page using DIVs only, as it is using tables.





相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

jquery ui dialog opens only once

I have a button that opens a dialog when clicked. The dialog displays a div that was hidden After I close the dialog by clicking the X icon, the dialog can t be opened again.

Drop down background url in Safari Issue

selectBox.selectCSS { background: url(/Images/replacementSelectBackground.png) top left no-repeat height:auto; } I have an issue in Safari only where the image is not rendering on top ...

CSS specific for Safari

How do you target specifically safari in css with styles?

Aligning textarea in a form

Ive used the following css code to align my form elements: form { position:relative; } form input { position:absolute; left:11em; } However, the textarea element is not aligned correctly with the ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

CSS problem with page footer

I have defined my page footer in the css file as: #footer { position: absolute; height: 50px; text-align: center; background: #66CCCC; bottom: 0px; left: 0px; width: 100%; height: ...

热门标签