I'm banum 技术回归人本

WEB可用性学习<七>圆桌

表格的基础

我们需要为table添加额外的信息，用来描述它，这对屏幕阅读器的依赖者有益。

马上使用<thead>

<thead>和<tfoot>标签用于设置表头和表尾，在其中用<th>来标记单元格。而表格的主要内容在<tbody>中
tips:

• 只能有一个<thead>和<tfoot>（<tfoot>是可选的），但是<tbody>可以有多个；
• <thead>和<tfoot>要出现在<tbody>之前。

为表格加标签

用<caption>标签为表格指定标题，它位于<table>之后的第一个标签（<thead>之前），在<table>中添加summary属性来对表格进行描述。

啊！我所不知道的<table>

为了使屏幕阅读器使用表格，我们需要添加信息将表头内的单元格和内容联系起来。

连接表头与表格其余部分

通过scope=row/cols属性来明确某个单元格的表头是标题行还是标题列。

双重表头

通过对单元格设定headers属性可以为表格中的一项指定多个表头，这个要通过id属性为表头赋予标志（banum注：与页内锚点的使用类似）。
abbr属性是缩写，在阅读器中可能读出abbr的值，headers顺序和阅读顺序可能是相关的。

轴：信息的联盟

有的时候信息是多个维度的（超过两个维度）。一种较高的的要求是指使用一个表格来表现。这需要使用axis属性。
有的时候将表格拆开是更好的做法，因为使用axis对于普通用户和屏幕阅读器都是相当的负担。当很难讲表格按维度分割时，才使用这个属性。
附例子：
（请通过源码查看该示例）

My Music

Artist	Album Title	Media Format
		Compact Disc	MP3
Magnetic Fields	69 Love Songs	Yes	No
Song Title			Rating
Absolutely Cuckoo			****
I Don’t Believe In The Sun			****
U2	Zooropa	Yes	Yes
Song Title			Rating
Zooropa			*****
Babyface			**

布局和其他不良的表格习惯

滥用表格导致的3个问题：

• 布局管理困难
• 降低网页速度
• 降低页面可用性（请考虑屏幕阅读器是线性的）

如果必须使用表格布局

为了可用性，请考虑表格的线性顺序（从左到右、从上到下）。处理不当，会使用户的操作流程不断被打断，甚至产生误解，最糟糕的结果是失去用户。

当表格不是表格

列表不是表格

表格和表单

尝试用<fieldset>来代替表格作为表单的容器。