规范五、建立编排良好的表格

5-1对于存放资料的表格,标示出行和列的标题[第一优先等级]

视障者多藉由语音合成器或是点字阅读机来辨读网页表格,但也仅能阅读表格中的文字,无法理解表格的行列间相对从属关系。因此针对表格的设计,必须使用headers或scope提供表格资料之间的结构关系,以方便非视觉性的浏览器解读表格内容。
可使用id与headers属性的配合,提供表格资料之间的结构关系。
headers属性的范例:

    <TR>
      <TH id="header1">议员姓名</TH>
      <TH id="header2">消费咖啡杯数</TH>
      <TH id="header3">咖啡种类</TH>
      <TH id="header3">是否加糖?</TH>
    </TR>
<TR>
      <TD headers="header1">李小安</TD>
      <TD headers="header2">10</TD>
      <TD headers="header3">摩卡</TD>
      <TD headers="header4"></TD>
    </TR>
    <TR>
      <TD headers="header1">吴大义</TD>
      <TD headers="header2">5</TD>
      <TD headers="header3">拿铁</TD>
      <TD headers="header4"></TD>
</TR>
语音合成器所呈现的如下:

语音合成器解读结果:
 议员姓名:李小安,消费咖啡杯数:10,咖啡种类:摩卡,是否加糖:是
议员姓名:吴大义,消费咖啡杯数:5,咖啡种类:拿铁,是否加糖:否。

对于一般使用者而言,此表格所呈现的如下:
议员姓名    消费咖啡杯数    咖啡种类    是否加糖
李小安    10    摩卡    是
吴大义    5    拿铁    否

也可以使用scope属性来呈现表格资料之间的结构关系。
cope属性的范例:
    <TR>
      <TH scope="col">议员姓名</TH>
      <TH scope="col">消费咖啡杯数</TH>
      <TH scope="col" >咖啡种类</TH>
      <TH scope="col">是否加糖?</TH>
    </TR>
<TR>
      <TD>李小安</TD>
 <TD>10</TD>
      <TD>摩卡</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>吴大义</TD>
      <TD>5</TD>
      <TD>拿铁</TD>
      <TD></TD>
    </TR>

5-2当表格中超过二行/列以上的标题时,须以结构化的标记确认彼此间的从属关系[第一优先等级

当表格内容必须结合行与列的标题提供完整信息时,应针对表格中各行与列的标题,使用axis提供表格内容从属关系,以利线性浏览器读取表格内的信息。
以下范例是使用axis属性来提供下面这个表格之间的结构关系:
axis属性正确范例:
<TABLE border="1" summary="王小强与李大明的旅行开支表,第一横列是旅行支出的类别,第一直行是两人消费的日期。">
    <CAPTION>王小强与李大名的旅行开支表</CAPTION>
    <TR>
      <TH></TH>
      <TH id="a2" axis="费用">餐饮费</TH>
      <TH id="a3" axis="费用">住宿费</TH>
<TH id="a4" axis="费用">交通费</TH>
      <TD>小计</TD>
</TR>
<TR>
      <TH id="a6" axis="姓名">王小强</TH>
      <TH></TH><TH></TH><TH></TH>
      <TD></TD>
</TR>
<TR>
      <TD id="a7" axis="日期">92年10月18日</TD>
      <TD headers="a6 a7 a2">350</TD>
      <TD headers="a6 a7 a3">1200</TD>
      <TD headers="a6 a7 a4">240</TD>
      <TD></TD>
    </TR>
<TR>
      <TD id="a8" axis="日期">92年10月19日</TD>
<TD headers="a6 a8 a2">400</TD>
  <TD headers="a6 a8 a3">1500</TD>

<TD headers="a6 a8 a4">300</TD>
      <TD></TD>
    </TR>
<TR>
      <TD>小計</TD><TD>750</TD><TD>2700</TD><TD>540</TD>
      <TD>3990</TD>
    </TR>
<TR>
      <TH id="a10" axis="姓名">李大明</TH>
      <TH></TH><TH></TH><TH></TH>
      <TD></TD>
    </TR>
<TR>
      <TD id="a11" axis="日期">92年10月20日</TD>
      <TD headers="a10 a11 a2">310</TD>
<TD headers="a10 a11 a3">1350</TD>
      <TD headers="a10 a11 a4">320</TD>
      <TD></TD>
    </TR>
<TR>
      <TD id="a12" axis="日期">92年10月21日</TD>
      <TD headers="a10 a12 a2">440</TD>
      <TD headers="a10 a12 a3">1740</TD>
      <TD headers="a10 a12 a4">230</TD>
      <TD></TD>
 </TR>
<TR>
      <TD>小计</TD><TD>750</TD><TD>3090</TD><TD>550</TD>
      <TD>4390</TD>
</TR>
<TR>
      <TH>总计</TH><TD>1500</TD><TD>5790</TD><TD>1090</TD>
      <TD>8380</TD>
     </TR>
  </TABLE>
     上述例子在一般浏览器中所呈现的表格资料如下:
王小强与李大明旅行开支表
    餐饮费    住宿费    交通费    小计
王小强                
92年10月18日    350    1200    240    
92年10月19日    400    1500    300    
小计    750    2700    540    3990
李大明                
92年10月20日    310    1350    320    
92年10月21日    440    1740    230    
小计    750    3090     550    4390
总计    1500    5790    1090    8380

5-3避免以表格作多栏文字呈现的设计[第二优先等级]

5-3-1结构与呈现
同2-1-1

5-3-2表格排版

纯文字浏览器皆以由左而右、由上而下的方式阅读表格。因此如果要使用表格编排版面时,必须确保表格内容能够以由左而右、由上而下的方式呈现,否则应该提供替代的方式表达信息。
虽然某些标签可以产生视觉效果,但却容易造成视障者阅读网页时的困扰(例如使用TH标签虽然可以呈现表格内容置中及粗体字效果,但容易误导视障者将该标签内容视为表格中行或列的标题)。因此为了避免混淆表格内的信息,勿以表格的标题标签呈现网页格式的视觉效果。

5-3-3透过样式表呈现排版、定位、层次及对齐的效果 同3-3-5

5-4若表格作为版面配置时,勿使用架构性的元件(如TH表格的标题资料标签)作为网页视觉效果[第二优先等级]

5-4-1结构与呈现

当设计网页内容时,网页开发者应该先规划此网页的理想结构。许多网页开发者常常使用水平线分隔来区分章节,但是,水平线分隔的方式对于视障者或是非图像式的浏览器而言是没有意义的,网页开发者应该使用H1~H6的标签代替水平线来区隔不同的段落。
另外,在网页内容编排时,不可只为呈现编排的效果,而使用结构性标签,例如在HTML中,应该使用Q与BLOCKQUOTE标签来标记引用语及引用文,切勿使用此两种标签仅为了呈现缩排效果(见3-7的正确范例)。

5-4-2表格排版 同5-3-2

5-5表格需提供摘要说明[第三优先等级]

视障者即使透过语音合成器或点字阅读机的辅助,也不易阅读以表格表达的网页信息。故如果必须使用表格表达网页信息时,不仅要提供表格标题与摘要说明,也必须同时对此表格内容提供摘要及结构说明。
在提供表格标题说明部分,可透过CAPTION标签提供表格的标题,或是将title放置在TABLE标签中,提供标题简要说明。
正确范例:
<TABLE title="台湾各主要城市气温与紫外线温度">
<CAPTION>台湾各主要城市气温与紫外线温度</CAPTION>
</TABLE>

    表格常常以多行/列的格式呈现,但是当视障者阅读网页内容时,如果没有提供表格巢状标题或是表格内容从属关系的摘要说明,则无法辨读此表格所传达的网页内容,因此需使用summary属性提供表格内容的摘要说明。
正确范例:
<TABLE summary="明天台湾北中南地区的天气气温偏高,各地温度约在30至35度之间。表格中共分三直行,第一行列出台湾主要城市地名,第二、三行各为该城市的气温与紫外线指数。">
 <CAPTION>台湾各主要城市气温与紫外线强度 </CAPTION>
    —表格栏位的HTML编码省略—
</TABLE> 

     对于非资料性(作为排版用)之表格,也可在表格摘要(summary属性)中,简单叙述该表格最为排版使用,或叙述该表格的排版状况。

5-6对于表格中过长的标题,提供简称[第三优先等级]

由于视障者所使用的语音合成器会读取表格中每一行列的标题,因此为了缩减视障者辨读表格内容的时间,可以透过abbr对于表格中行/列过长的标题,提供简称。
<TR>
  <TD>台中</TD>
  <TD>60%</TD>
  <TD>良好</TD>
  </TR>
  <TR>
  <TD>高雄</TD>
  <TD>50%</TD>
  <TD>良好</TD>
  </TR>
</TABLE>

正确范例:
<TABLE border="1" summary="此表格为台湾主要城市天气概况与紫外线强度,为三直栏之设计,第一直栏是台湾主要城市、第二直栏为降雨机率以及第三直栏为阳光紫外线强度。">
  <CAPTION>
  台湾主要城市天气概况与紫外线强度
  </CAPTION>
  <TR>
  <TH abbr="城市">主要城市地区</TH>
  <TH abbr="降雨">降雨机率百分比</TH>
  <TH abbr="紫外线">阳光紫外线强度</TH>
  </TR>
  <TR>
  <TD>台北</TD>
  <TD>100%</TD>
  <TD>良好</TD>
  </TR>


无障碍网页设计技术


点击此查看-->手机端无障碍工具条演示(仅手机端打开)
点击此查看-->PC端无障碍工具条演示(仅PC端打开)
点击此查看-->我们能提供的信息无障碍服务
点击此查看-->无障碍工具条授权方式和区域代理
点击此查看-->相关服务报价参考

标签:信息无障碍 无障碍设计 无障碍规范 无障碍网页