编辑“︁HTML表格可访问性”︁

= HTML表格可访问性 =

== 介绍 ==
HTML表格的可访问性（Accessibility）是指确保表格内容能够被所有用户（包括使用屏幕阅读器等辅助技术的用户）正确理解和导航。良好的可访问性设计不仅符合[[Web Content Accessibility Guidelines|WCAG]]标准，还能提升用户体验，特别是在数据展示和结构化信息呈现方面。

表格在HTML中常用于展示数据关系，但如果缺乏适当的标记，屏幕阅读器可能无法正确解析表格内容。因此，开发者需要关注以下关键点：
* '''表格标题（Caption）'''：提供表格的简要描述。
* '''表头（Headers）'''：使用<code><th></code>标记表头单元格，并通过<code>scope</code>或<code>headers</code>属性关联数据单元格。
* '''行列关系'''：明确标识数据与表头的对应关系。
* '''ARIA属性'''：必要时使用ARIA（Accessible Rich Internet Applications）角色增强语义。

== 基础可访问性实践 ==

=== 表格标题 ===
使用<code><caption></code>元素为表格添加标题，帮助用户快速理解表格用途。

<syntaxhighlight lang="html">
<table>
  <caption>2023年季度销售数据</caption>
  <tr>
    <th scope="col">季度</th>
    <th scope="col">销售额（万元）</th>
  </tr>
  <tr>
    <td>Q1</td>
    <td>120</td>
  </tr>
</table>
</syntaxhighlight>

'''输出效果：'''
{| class="wikitable"
|+ 2023年季度销售数据
! 季度 !! 销售额（万元）
|-
| Q1 || 120
|}

=== 表头与数据关联 ===
通过<code>scope</code>属性（值为<code>row</code>、<code>col</code>、<code>rowgroup</code>或<code>colgroup</code>）或<code>headers</code>属性（用于复杂表格）建立单元格关联。

<syntaxhighlight lang="html">
<table>
  <tr>
    <th scope="col">产品</th>
    <th scope="col">库存</th>
  </tr>
  <tr>
    <th scope="row">笔记本</th>
    <td>50</td>
  </tr>
</table>
</syntaxhighlight>

'''屏幕阅读器解析顺序：'''
<mermaid>
flowchart LR
  A["表头：产品"] --> B["数据：笔记本"]
  C["表头：库存"] --> D["数据：50"]
</mermaid>

== 高级技巧 ==

=== 复杂表格的可访问性 ===
对于多层级表头，使用<code>headers</code>属性显式关联：

<syntaxhighlight lang="html">
<table>
  <tr>
    <th id="year" colspan="2">2023</th>
  </tr>
  <tr>
    <th id="q1" headers="year">Q1</th>
    <th id="q2" headers="year">Q2</th>
  </tr>
  <tr>
    <td headers="year q1">150</td>
    <td headers="year q2">200</td>
  </tr>
</table>
</syntaxhighlight>

'''语义解释：'''
* 数据单元格"150"同时关联到"2023"和"Q1"表头。

=== ARIA增强 ===
使用<code>role="table"</code>和<code>aria-describedby</code>进一步明确语义：

<syntaxhighlight lang="html">
<table role="table" aria-describedby="sales-desc">
  <caption id="sales-desc">年度销售汇总</caption>
  <!-- 表格内容 -->
</table>
</syntaxhighlight>

== 实际案例 ==

=== 金融数据表 ===
以下是一个符合可访问性标准的股票价格表：

<syntaxhighlight lang="html">
<table>
  <caption>今日股价（单位：美元）</caption>
  <thead>
    <tr>
      <th scope="col">公司</th>
      <th scope="col">开盘价</th>
      <th scope="col">收盘价</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">AAPL</th>
      <td>182.63</td>
      <td>185.92</td>
    </tr>
  </tbody>
</table>
</syntaxhighlight>

'''屏幕阅读器播报示例：'''
<blockquote>
"表格：今日股价（单位：美元），2列3行。表头：公司、开盘价、收盘价。行1：公司AAPL，开盘价182.63，收盘价185.92"
</blockquote>

== 测试与验证 ==
使用以下工具检查表格可访问性：
* WAVE（Web Accessibility Evaluation Tool）
* 浏览器开发者工具的Accessibility面板
* 键盘导航测试（Tab键遍历表格）

== 数学表示 ==
对于数据密集型表格，可访问性要求可以量化为：
<math>
A_{table} = \sum_{i=1}^{n} (S_{header_i} + L_{relation_i})
</math>
其中：
* <math>A_{table}</math> = 表格可访问性得分
* <math>S_{header}</math> = 正确标记的表头
* <math>L_{relation}</math> = 明确的数据关联

== 总结 ==
通过正确使用HTML表格语义标记、ARIA属性和结构化关系，开发者可以创建对所有用户友好的可访问表格。关键点包括：
# 始终添加<code><caption></code>
# 使用<code><th></code>和<code>scope</code>/<code>headers</code>
# 对复杂表格进行分层标记
# 通过辅助技术验证体验

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML列表与表格]]