WebAIM -考虑网页的可访问性

创建可访问表万博体育官网网址
布局表

介绍

如果您不是屏幕阅读器用户,让我们暂时假设您是。你要去一个网站找出205生物课将在哪里上课。你去到一个有这些信息的网页,你听到的是:

表有10列7行。部门代码、组数、节中,马克斯招生,目前的招生,房间号码,天,开始时间,结束时间,导师,生物,100年,1日,15日,13日,5日,星期一,星期三,星期五,10点,11点,Magde, 100, 2, 15日,7日,5日,星期二,星期四,11点,12:30,Indge, 205年,1日,15日,9日,6日,星期二,星期四,上午9点,10:30,Magde, 315年,1、12、3、6,妈,结婚,,星期五13:00,日14:00 Indge,公共汽车,150年,1日,15日,15日,13日,星期一,星期三,星期五,上午9点,10点,罗伯茨210年1、10、9、13日,星期一,星期三,星期五,上午9点,Rasid喂饲。

听了这个信息,你知道生物课205应该在哪里举行吗?可能不会。当你听表的时候直接通过,不用进去表阅读模式在屏幕阅读器中,这种类型的信息可能非常令人困惑。即使进入了表读取模式,如果表没有被正确标记,仍然会使人感到困惑。

布局表与数据表

web上的表有两种基本用途:数据表和布局表。HTML表的最初用途是表格数据。当行标头、列标头或两者同时存在时,表就是数据表。例如,这里有一个简单的数据表:

雪莱的女儿
的名字 年龄 生日
杰基 5 4月5日
贝丝 8 1月14日

表格也通常用于页面布局。布局表没有可以映射到表单元格内信息的逻辑标头。布局表传统上用于克服使用HTML的可视化表示和布局的限制。然而,使用CSS,在控制页面布局方面有更多的灵活性,所以最好不要使用表来实现这一点。使用CSS可以使HTML代码更简洁、更简单、更好的终端用户适应性和更少的潜在可访问性问题。布局表也不应该在HTML5中使用。

有时,甚至一些可访问性倡导者也认为,布局表不利于可访问性。实际上,布局表不会带来固有的可访问性问题。当然,在可访问性方面,您还可以做许多更糟糕的事情。各种残疾的人都可以轻松访问布局表,只要在设计时考虑了可访问性——确保正确的线性阅读顺序、内容缩放等。

布局表线性化

内容线性化指的是删除所有格式后内容的顺序。对于数据表和布局表,内容呈现的顺序可能会影响其含义。许多web站点使用表格进行布局,其中大多数使用跨越式行和列来实现格式效果。最终的结果是,线性化的阅读顺序可能不同于视觉阅读顺序。这可能会导致使用线性阅读和导航顺序的人(比如使用屏幕阅读器或使用键盘导航的人)感到困惑。

屏幕阅读器基本上忽略了内容在表中这一事实。屏幕阅读器只是按照内容在代码中出现的文字顺序读取内容。如果代码中内容的文字顺序是合乎逻辑的,那么线性化的阅读顺序就是合乎逻辑的。

重要的

屏幕阅读器对待布局表和数据表非常不同。对于布局表,他们简单地根据源代码顺序读取表的内容。然而,对于数据表,它们将识别表的存在,包括列和行数,提供表导航功能,读取行和列标题,等等。

那么,屏幕阅读器如何知道一个表是数据表还是布局表呢?它们对表标记和结构执行一些分析以进行“猜测”。因此,数据表标记(例如)至关重要<标题>,< th >等,是从来没有在布局表中使用,否则屏幕阅读器可能会错误地将表显示为数据表,从而增加开销和混淆。

让我们看一个例子,在这个例子中,阅读顺序成为一个问题。下面是为视觉效果创建的布局表:

地下室 起来!
厕所 一个厕所 冲洗
必须

视觉用户会读到:“地下室厕所必须冲水!”

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

为什么在视觉顺序和屏幕阅读器顺序之间存在这种差异?要回答这个问题,我们必须看看表的结构。下面是相同的表格,每个单元格都有可见的边框和数字,以指示屏幕阅读器读取它们的顺序:

1 -地下室 2 3. 4 - !
5 -厕所 6 -一个厕所 7 -平 8
9 10 -必须 11 12

如果您查看这个表的源代码,您会注意到源代码的顺序与上面指定的顺序相匹配。工具,如、Web Developer工具栏等可以帮助您直观地看到线性化的表的阅读顺序。

布局表大小

当作者使用表格进行布局时,他们通常这样做是为了对页面内元素的位置进行更精确和更灵活的控制。这样做时,布局表通常会定义像素值来尝试控制精确位置。由于终端用户浏览器和设备的范围非常广泛,从纯文本移动浏览器到大屏幕、高清晰度显示器,因此定义基于像素的大小是非常有限的。

布局表的一个主要问题是,它们缺乏灵活性来适应最终用户的内容调整,主要是由视力较低的用户调整文本大小。如果最终用户放大了像素大小的表格单元格中的文本,这可能会导致可读性问题,特别是当文本不再适合定义的像素尺寸时。这可能会导致水平滚动条、文本溢出单元格以及与其他页面组件重叠等等。如果使用布局表,请确保表的结构允许终端用户自定义和文本缩放。

尽可能使用最简单的表配置

一些设计师疯狂地使用布局表。它们创建各种嵌套的表和不必要的行和列,以各种方式使用跨行和列,直到表看起来根本不像表。如果表格的边框被设置为0,那么所有这些对于有视力的用户来说都是不可见的,但是盲人用户会“看到”所有这些。它们的屏幕阅读器可能会告诉它们表中的行数和列数。当它们试图在表中从一个区域导航到另一个区域时,它们可能会迷失方向。这里的经验法则是,越简单越好。