为什么基于表格的网站对屏幕阅读器用户不利?
与旧的基于 的网站相比,屏幕阅读器处理基于
的网站要容易得多,为什么它们更糟糕?
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?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
屏幕阅读器假定
table
内的内容是表格形式,并按此方式读取。例如“第 1 行,第 1 列:(内容)”。如果您使用表格来布局您的网站,这不一定有任何意义。您告诉最终客户您拥有具有表格意义的数据,但实际上没有。相比之下,
div
除了“节”之外没有其他含义,因此屏幕阅读器不会尝试表示它们。您可以使用 div 在布局中进行任意视觉中断,而不会影响标记的含义。这就是我们所说的“语义”标记的意思。语义意味着标记准确地描述了其中内容的含义 - 表格包含表格数据,
UL
包含无序列表等。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,
UL
s 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.
认为 DIV 比表格更适合屏幕阅读器的观点忽略了真正的问题。
当前的 CSS 和 HTML 标准根本不提供任何明确的标签/指示符来帮助屏幕阅读器。在他们这样做之前,无论您使用 DIV 还是表格,您都只能希望您的“语义正确的 CSS 页面”或“完成工作的表格”适用于大多数屏幕阅读器。
不要忘记,仅使用 DIV 创建难以理解的页面与使用表格同样容易。
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.