表中的子标题:可访问性和模板

Question

这很难解释,所以这里有一个笔,可以看到所有的例子.

哪个更易于访问？

选项1

<table>
  <thead>
    <tr>
      <th>Thing 1</th>
      <th>Thing 2</th>
      <th colspan=2>Thing 3</th>
      <th>Thing 4</th>
      <th colspan=2>Thing 5</th>
      <th>Thing 6</th>
      <th>Thing 7</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan=2>40</td>
      <td rowspan=2>30</td>
      <th>Right</th>
      <th>Left</th>
      <td rowspan=2>50</td>
      <th>Right</th>
      <th>Left</th>
      <td rowspan=2>25</td>
      <td rowspan=2>30</td>
    </tr>
    <tr>
      <td>10</td>
      <td>20</td>
      <td>15</td>
      <td>40</td>
    </tr>
  </tbody>
</table>

选项2

<table>
  <thead>
    <tr>
      <th>Thing 1</th>
      <th>Thing 2</th>
      <th colspan=2>Thing 3</th>
      <th>Thing 4</th>
      <th colspan=2>Thing 5</th>
      <th>Thing 6</th>
      <th>Thing 7</th>
    </tr>
    <tr>
      <th colspan=2></th>
      <th>Right</th>
      <th>Left</th>
      <th></th>
      <th>Right</th>
      <th>Left</th>
      <th colspan=2></th>   
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>40</td>
      <td>30</td>
      <td>10</td>
      <td>20</td>
      <td>50</td>
      <td>15</td>
      <td>40</td>
      <td>25</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

如果子值(右和左)相等,它应该显示如下:

<table>
  <thead>
    <tr>
      <th>Thing 1</th>
      <th>Thing 2</th>
      <th>Thing 3s</th>
      <th>Thing 4</th>
      <th>Thing 5s</th>
      <th>Thing 6</th>
      <th>Thing 7</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>40</td>
      <td>30</td>
      <td>10</td>
      <td>50</td>
      <td>15</td>
      <td>25</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

或这个:

<table>
  <thead>
    <tr>
      <th>Thing 1</th>
      <th>Thing 2</th>
      <th colspan=2>Thing 3</th>
      <th>Thing 4</th>
      <th>Thing 5s</th>
      <th>Thing 6</th>
      <th>Thing 7</th>
    </tr>
    <tr>
      <th colspan=2></th>
      <th>Right</th>
      <th>Left</th>
      <th colspan=5></th>  
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>40</td>
      <td>30</td>
      <td>10</td>
      <td>20</td>
      <td>50</td>
      <td>15</td>
      <td>25</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

或这个:

<table>
  <thead>
    <tr>
      <th>Thing 1</th>
      <th>Thing 2</th>
      <th>Thing 3s</th>
      <th>Thing 4</th>
      <th colspan=2>Thing 5</th>
      <th>Thing 6</th>
      <th>Thing 7</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan=2>40</td>
      <td rowspan=2>30</td>
      <td rowspan=2>10</td>
      <td rowspan=2>50</td>
      <th>Right</th>
      <th>Left</th>
      <td rowspan=2>25</td>
      <td rowspan=2>30</td>
    </tr>
    <tr>
      <td>15</td>
      <td>40</td>
    </tr>
  </tbody>
</table>

等等.

怎么能有效地模仿？

由于表是由标记中的水平行定义的,因此需要在所有trs中填充更改列的逻辑:

Psuedo-code ERB

thing3()thing5()如果,则返回truething3right != thing3left

%table
  %thead
    %tr
      %th Thing 1
      %th Thing 2
      - if thing3()
        %th Thing 3
      - else
        %th{:colspan => "2"} Thing 3s
      %th Thing 4
      - if thing5()
        %th Thing 5
      - else
        %th{:colspan => "2"} Thing 5s
      %th Thing 6
      %th Thing 7
    - if !thing3() or !thing5()
      %tr.subcategory
        - if !thing3() && !thing5()
          %th{:colspan => "2"}
          %th Right
          %th Left
          %th
          %th Right
          %th Left
          %th{:colspan => "2"}
        - elsif thing3() && !thing5()
          %th{:colspan => "4"}
          %th Right
          %th Left
          %th{:colspan => "2"}
        - elsif !thing3() && thing5()
          %th{:colspan => "2"}
          %th Right
          %th Left
          %th{:colspan => "4"}
  %tbody
    %tr
      %td= @whatever.thing1
      %td= @whatever.thing2
      %td= @whatever.thing3right
      - if !thing3()
        %td= @whatever.thing3left
      %td= @whatever.thing4
      %td= @whatever.thing5right
      - if !thing5()
        %td= @whatever.thing5left
      %td= @whatever.thing6
      %td= @whatever.thing7

这有效,但很难使用和更新.对于具有子类别的每个列,它在指数上变得更加复杂.

如何以可访问的方式显示此数据,这些方式也可以以可扩展且易于更新的方式进行模板化？

Answer 1

如果我理解正确,你将要使用colspan和rowspan在表头上; 这将使它们可访问,并应该采取动态生成它们的一些痛苦.就模板而言,你已经了解了将要返回的数据,所以看看你是否可以在一些更常见的数据板上进行故事板,然后从中构建模板.我用一个例子修改了你的codepen,它一直在底部.

http://codepen.io/jalbertbowden/pen/epgxs