Question

我必须显示一个html表，并且它必须具有可访问性安全。我已经添加了范围=“ col”以及标题和ID。请告诉我需要进行哪些更改以使其正确。

table,
td,
th {
  border: 1px solid black;
  border-collapse: collapse;
  text-align: left;
}

<table caption="Products Table">
  <thead>
    <tr>
      <th id="prodname" scope="col" style="font-size: 14px;">Product Name </th>
      <th id="orderdate" scope="col" style="font-size: 14px;;">Order Date</th>
      <th id="type" scope="col" style="font-size: 14px;">Type</th>
      <th id="storelocation" scope="col" style="font-size: 14px;">Store Location</th>
      <th id="brand" scope="col" style="font-size:14px;">Brand</th>

    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="Brush" scope="row" style="text-align:left; font-size: 14px;;">Brush</th>
      <td style="text-align:left">1/1/19</td>
      <td style="text-align:left">Online</td>
      <td>001</td>
      <td>Brand1</td>
    </tr>
    <tr>
      <td> </td>
      <th colspan="5" headers="City Brush" scope="row"> <b>California: </b> <span style="font-weight: normal;font-size: 14px;;"> City1, City2, City 3, City 4</span> </th>
    </tr>
    <tr>
      <td> </td>
      <th colspan="5" headers="City Brush" scope="row"> <b>NewYork: </span> <span style="font-weight: normal;font-size: 14px;;"> City5, City6, City 7, City 8</span> </th>
            </tr>
            <tr>
                <td> </td>
                <th colspan="5" headers="City Brush" scope="row"> <b>New Jersey: </span> <span style="font-weight: normal;font-size: 14px;;"> City1, City9, City 10, City 12</span> </th>
            </tr>
            <tr>
                <td colspan="5"> </td>
            </tr>
            <tr>
                <th id="book" scope="row" style="text-align:left; font-size: 14px;;">Book</th>
                <td style="text-align:left">1/2/19</td>
                <td style="text-align:left">In-Store</td>
                <td>002</td>
                <td>Brand2</td>
            </tr>
            <tr>
                <td> </td>
                <th colspan="5" headers="City Brush" scope="row"> <span style="font-weight: bold;font-size: 14px;;">California: </span> <span style="font-weight: normal;font-size: 14px;;"> City1, City2, City 3, City 4</span> </th>
            </tr>
            <tr>
                <td> </td>
                <th colspan="5" headers="City Brush" scope="row"> <b>NewYork: </span> <span style="font-weight: normal;font-size: 14px;;"> City5, City6, City 7, City 8</span> </th>
            </tr>
            <tr>
                <td> </td>
                <th colspan="5" headers="City Brush" scope="row"> <b> New Jersey: </span> <span style="font-weight: normal;font-size: 14px;;"> City1, City9, City 10, City 12</span> </th>
            </tr>
            <tr>
                <td colspan="5"> </td>
            </tr>
        </tbody>
    </table>

我想显示一个产品表，其中包含产品名称，订单日期，类型（在线或实体店购买），商店位置，品牌名称。我还想显示每个州有多少家商店有此产品（显示用逗号分隔的城市名称）。

我尝试显示colspan = 5的新行，并同时显示州名和城市名。

我要确保表结构通过可访问性标准。

Answer 1

为了获得更多的可访问性，我将不使用如下所示的表格： https://www.w3schools.com/tags/tag_table.asp（黄色背景说明）在您的情况下，数据是表格格式的，因此它可以适合表格，但是您必须避免使用没有语义（描述）值的'b'元素，并为在表格的每个单元格中合成的每个表格格式的数据设置目录使用section-> article-> header的表格。（尽管使用它会使HTML表格无效，一旦您将页面中元素布局的CSS设置为行和列+我认为-但不确定-表格内容也未引用而不是餐桌上的。

另请参阅数据类型，以更精确地定义HTML中的设置数据类型。像这样，但是您有更具体的方式来做到这一点，例如使用预定义的数据类型（例如日期信息）以及个人数据定义： https://www.w3schools.com/tags/att_global_data.asp

此处提供有关一般可访问性规则https://www.w3.org/WAI/

的更多信息

我也找到了这些工具（搜索我未找到的内容验证器表）： https://wet-boew.github.io/v4.0-ci/demos/tablevalidator/tablevalidator-en.html

此表格的可访问性安全吗？

1 个答案: