0

我必须显示一个 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 显示一个新行，并将州名和城市名并排显示。

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

4

1 回答 1

1

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

有关在 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

于 2019-05-15T02:08:17.710 回答