WebAIM - Web Accessibility In Mind

创建可访问表格万博体育官网网址
Layout Tables

介绍

If you're not a screen reader user, let's pretend that you are for just a moment. You're going to a web site to find out where the biology 205 class is going to be held. You go to a web page that has this information, and this is what you hear:

Table with 10 columns and 7 rows. Department Code, Class Number, Section, Max Enrollment, Current Enrollment, Room Number, Days, Start Time, End Time, Instructor, BIO, 100, 1, 15, 13, 5, Mon,Wed,Fri, 10:00, 11:00, Magde, 100, 2, 15, 7, 5, Tue,Thu, 11:00, 12:30, Indge, 205, 1, 15, 9, 6, Tue,Thu, 09:00, 10:30, Magde, 315, 1, 12, 3, 6, Mon,Wed,Fri, 13:00, 14:00, Indge, BUS, 150, 1, 15, 15, 13, Mon,Wed,Fri, 09:00, 10:00, Roberts, 210, 1, 10, 9, 13, Mon,Wed,Fri, 08:00, 09:00, Rasid.

在收听此信息后,您是否有任何想法,其中生物学205应该举行?可能不会。当你直接听取表格时,没有进入table reading modein a screen reader, this type of information can be quite confusing. Even when you do go into table reading mode, it can still be confusing if the table is not marked up properly.

Layout Tables vs. Data Tables

Web上的表有两个基本用途:数据表和布局表。原始预期使用HTML表是为了表格数据. A table is a data table when row headers, column headers, or both are present. For example, here is a simple data table:

Shelly's Daughters
名称 年龄 Birthday
杰基 5 4月5日
Beth 8 1月14日

Tables are also commonly used for page layout. Layout tables do not have logical headers that can be mapped to information within the table cells. Layout tables were traditionally used to overcome limitations in visual presentation and layout using HTML. With CSS, however, there is much more flexibility in controlling page layout, so it is best to not use tables to do this. Using CSS results in cleaner and more simple HTML code, better end user adaptability, and few potential accessibility issues. Layout tables are also not supposed to be used in HTML5.

It is sometimes suggested, even by some accessibility advocates, that layout tables are bad for accessibility. In reality, layout tables do not pose inherent accessibility issues. There are certainly many worse things that you could do in terms of accessibility. People with all kinds of disabilities can easily access layout tables, as long as the tables are designed with accessibility in mind - ensuring proper linearized reading order, content scaling, etc.

布局表线性化

Content linearization refers to the order of the content when all formatting is removed. For both data and layout tables, the order in which content is presented can affect its meaning. Many web sites use tables for layout, and most of them use spanned rows and columns to achieve formatting effects. The end result is that the linearized reading order may not be the same as the visual reading order. This can lead to confusion on the part of people who access the linearized reading and navigation order, such as individuals who use screen readers or who navigate with keyboards.

Screen readers essentially ignore the fact that the content is inside of a table. The screen reader just reads the content in the literal order that it appears in the code. If the literal order of the content in the code is logical, then your linearized reading order is logical.

Important

Screen readers treat layout tables and data tables very differently. For layout tables, they simple read the content of table based on the source code order. For data tables, however, they will identify the presence of the table including number of columns and row, provide table navigation functionality, read row and column headers, etc.

So how does a screen reader know if a table is a data table or a layout table?它们对表标记和结构进行了一些分析,以“猜”。因此,数据表标记是至关重要的,例如,, etc. areNEVER在布局表中使用,否则屏幕阅读器可能错误地将该表作为数据表呈现,导致增加开销和混淆。

Let's take a look at an example in which reading order becomes an issue. Here is a layout table which was created for visual effect:

Basement 向上!
Toilets 厕所 fl
Must

视觉用户将阅读:“地下室厕所必须冲洗!”

屏幕阅读器将听到(或通过盲文的感受):“地下室!厕所冲洗必须”

为什么在视觉秩序和屏幕阅读器订单之间存在这种差异?要回答这个问题,我们必须查看表格结构。以下是具有边界的相同表格,并添加到每个单元格中的数字,以指示屏幕阅读器将读取它们的顺序:

1 - 地下室 2 3 4 - UP!
5 - Toilets 6 -厕所 7 - 冲洗 8
9 10 - 必须 11 12

如果查看此表的源代码,则会注意到源代码顺序与上面指定的顺序匹配。工具,如海浪, the Web Developer Toolbar, etc. can help you visually see the linearized reading order of tables.

布局桌尺寸

当作者使用表格的布局时,它们通常会这样做,以便更精确地和(据说)灵活地控制页面内元素的定位。在执行此操作时,布局表通常定义像素值以尝试控制精确位置。由于存在巨大的最终用户浏览器和设备,因此从仅限文本的移动浏览器到大屏幕,高清显示器,定义基于像素的尺寸非常有限。

布局表的主要关心的是他们缺乏of flexibility for accommodating end-user content adjustments, primarily text sizing by users with low vision. If text within a pixel-sized table cell is enlarged by the end user, this can cause readability issues, especially if the text can no longer fit within the pixel dimensions defined. This may result in horizontal scrollbars, text bleeding out of the cell and overlapping other page components, etc. If using layout tables, ensure that the structure of the table allows end user customization and text scaling.

使用最简单的表配置可能

一些设计师用布局表疯狂。他们使用每种方式的跨行行和列创建各种嵌套表和不必要的行和列,直到桌子几乎看起来几乎看起来就像一个表格一样。如果表边框设置为零,所以所有这一切都可能是看不见的,但盲用户将“查看”这一切。他们的屏幕阅读器可以通知他们表中的行数和列。当他们尝试从一个区域导航到表中的另一个区域时,它们可能变得迷失方向。这里的拇指规则是更糟糕的。