Question

我的网站上的表格已被可访问性插件（ax）标记。经过一些修补，最后说我必须修复以下两件事：

<table> <tbody> <tr> <th scope="col" rowspan="2">Type Of</th> <th scope="col" colspan="2">Blue</th> <th scope="col" colspan="2">Green</th> </tr> <tr> <td scope="col" class="centered">Light Blue</td> <td scope="col" class="centered">Dark Blue</td> <td scope="col" class="centered">Light Green</td> <td scope="col" class="centered">Dark Green</td> </tr> <tr> <th scope="row">Type 1</th> <td class="centered">Y</td> <td class="centered">Y</td> <td class="centered">Y</td> <td class="centered">N</td> </tr> <tr> <th scope="row">Type 2</th> <td class="centered">Y</td> <td class="centered">Y</td> <td class="centered">Y</td> <td class="centered">N</td> </tr> <tr> <th scope="row">Type 3</th> <td class="centered">Y</td> <td class="centered">Y</td> <td class="centered">Y</td> <td class="centered">N</td> </tr> </tbody> </table>元素只应在有一行时使用单列标题
表格包含rowspan属性不等于1

如何合理地构建一个具有嵌套信息级别的表而不至少违反其中一个？

我的表格代码是：

＆＃13;

#python 2
UserAnswer = raw_input('Is your age and birthday correct? (yes/no):')
if UserAnswer == 'yes' or "Yes":
   print ("Great! let's continue.")
elif UserAnswer == 'no' or "No":
  print("check for your error, the program will now end")
  SystemExit
else:
   print 'Invalid input.'

＆＃13;

Answer 1

我不确定您使用的是哪种工具，但是您是否尝试过使用col和colgroup元素？ W3C提供了一些关于数据表中不规则标头的基本信息here。

另外，如果你想看一下，我会根据你的表格放一个快速的JSFiddle：https://jsfiddle.net/dngvc84o/

Answer 2

辅助功能工具可以自由发明自己的规则，但是当您使用th或rowspan时，您应该删除表标题colspan，这是错误的。这是完全错误的。检查您是否拥有此工具的最新版本：这是一个糟糕的建议。

在您的情况下，您可以使用以下技术标记列标题： H43: Using id and headers attributes to associate data cells with header cells in data tables

您的示例中有一个问题：第二行中的标题未标记为列标题（th）（headers属性仅应引用th id}。

你的标记应该是这样的：

<table>
<thead>
    <tr>
        <th rowspan="2" id="typeof">Type Of</th>
        <th colspan="2" id="blue">Blue</th>
        <th colspan="2" id="green">Green</th>
    </tr>
    <tr>
        <th id="lightblue">Light</th>
        <th id="darkblue">Dark</th>
        <th id="lightgreen">Light</th>
        <th id="darkgreen">Dark</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th id="type1" headers="typeof">Type 1</th>
        <td headers="type1 lightblue" title="Yes">Y</td>
        <td headers="type1 darkblue" title="Yes">Y</td>
        <td headers="type1 lightgreen" title="Yes">Y</td>
        <td headers="type1 darkgreen" title="No">N</td>
    </tr>
    <tr>
        <th id="type2" headers="typeof">Type 2</th>
        <td headers="type2 lightblue" title="Yes">Y</td>
        <td headers="type2 darkblue" title="Yes">Y</td>
        <td headers="type2 lightgreen" title="Yes">Y</td>
        <td headers="type2 darkgreen" title="No">N</td>
    </tr>
    <tr>
        <th id="type3" headers="typeof">Type 3</th>
        <td headers="type3 lightblue" title="Yes">Y</td>
        <td headers="type3 darkblue" title="Yes">Y</td>
        <td headers="type3 lightgreen" title="Yes">Y</td>
        <td headers="type3 darkgreen" title="No">N</td>
    </tr>
</tbody>
</table>

另外，我添加了title属性，以便为屏幕阅读器添加一个可说的替代方案（您可以使用aria-label，但title为其他人添加工具提示，除了它不是键盘友好的）。更好的选择是在这里有一个完整的词。

如何编写可访问的html表？

2 个答案: