如何使用标记改善HTML表的可访问性-CSDN博客

Web可访问性是指以视觉障碍者可以轻松使用的方式设计Web应用程序。其中一些用户依靠屏幕阅读器读取网页中的内容。屏幕阅读器会解释页面上存在的代码 ，并向用户读出其内容 。

<table>是一种广泛使用HTML元素，用于以结构化方式在网页中显示数据。它的设计范围从简单到复杂，包括行标题，合并标题等。

如果在设计表时没有考虑到可访问性，那么屏幕阅读器将很难为用户有意义地转换复杂表中的数据。因此，为了使复杂HTML表更易于理解，并具有可访问性，我们必须确保清楚定义标题，列组，行组等 。我们将在下面看到如何在标记中实现这一点。

范围属性

即使对于带有<th>标记的简单表，该表清楚地定义了标头，您也可以使用scope属性提高其可访问性，并且不会让单元格中相似类型的数据引起的任何混淆都无法解决。

<table>
    <tr>
        <th scope="col">Employee Name</th>
        <th scope="col">Employee Code</th>
        <th scope="col">Project Code</th>
        <th scope="col">Employee Designation</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td>32456</td>
        <td>456789</td>
        <td>Director</td>
    </tr>
    <tr>
        <td>Miriam Luther</td>
        <td>78902</td>
        <td>456789</td>
        <td>Deputy Director</td>
    </tr>
</table>

范围属性有什么作用？根据W3C ：

换句话说，它有助于我们将数据单元格与其对应的标头单元格相关联。

请注意，在上面的示例中，您可以将<th>切换为<td> 。只要其scope的值为col ，它将被解释为相应列的标题。

scope属性可以具有这四个值中的任何一个； col ， row ， rowgroup ， colgroup分别引用列的标题，行的标题，一组列的标题和一组行的标题。

复杂表

现在让我们进入一个更复杂的表。

上表列出了班级中的学生以及他们在三个学科上的实践和理论成绩。

这是它HTML代码。该表已使用rowspan和colspan为数据单元创建合并的标题。

<table>
    <tr>
        <th rowspan="2">Student Name</th>
        <th colspan="2">Biology</th>
        <th colspan="2">Chemistry</th>
        <th colspan="2">Physics</th>
    </tr>
    <tr>
        <th>Practical</th>
        <th>Theory</th>
        <th>Practical</th>
        <th>Theory</th>
        <th>Practical</th>
        <th>Theory</th>
    </tr>
    <tr>
        <th>John Doe</th>
        <td>A</td>
        <td>A+</td>
        <td>B</td>
        <td>A</td>
        <td>A</td>
        <td>A-</td>
    </tr>
    <tr>
        <th>Miriam Luther</th>
        <td>A</td>
        <td>A</td>
        <td>C</td>
        <td>C+</td>
        <td>A</td>
        <td>A-</td>
    </tr>
</table>

在上表中，每个数据单元，即显示成绩的每个表单元，都与三项信息相关联：

这个年级属于哪个学生？
该年级属于哪个学科？
是“实践”还是“理论”部分的等级？

在结构上和视觉上，在三种不同类型的标题单元格中定义了这三个信息：

学生姓名
主题名称
实践或理论

让我们为可访问性定义相同的内容。

<table>
    <col>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    <tr>
        <th rowspan="2" scope="col">Student Name</th>
        <th colspan="2" scope="colgroup">Biology</th>
        <th colspan="2" scope="colgroup">Chemistry</th>
        <th colspan="2" scope="colgroup">Physics</th>
    </tr>
    <tr>
        <th scope="col">Practical</th>
        <th scope="col">Theory</th>
        <th scope="col">Practical</th>
        <th scope="col">Theory</th>
        <th scope="col">Practical</th>
        <th scope="col">Theory</th>
    </tr>
    <tr>
        <th scope="row">John Doe</th>
        <td>A</td>
        <td>A+</td>
        <td>B</td>
        <td>A</td>
        <td>A</td>
        <td>A-</td>
    </tr>
    <tr>
        <th scope="row">Miriam Luther</th>
        <td>A</td>
        <td>A</td>
        <td>C</td>
        <td>C+</td>
        <td>A</td>
        <td>A-</td>
    </tr>
</table>

在上面的标记中，我们向包含有关数据单元格的标题信息的单元格添加了scope 。

列组

生物，化学和物理单元应与一组两列相关联（理论和实践）。仅添加colspan="2"不会创建列组，它仅表示特定单元格要占用两个单元格的空间。

要创建列组，您必须使用colgroup ，然后向其添加span属性，以指示该列组包括多少列。

带有scope="col"的<th rowspan="2" scope="col">Student Name</th>标记可帮助辅助技术识别同一列后面的单元格是学生的姓名。

同样，像<th colspan="2" scope="colgroup">Biology</th>包含scope="colgroup"可以帮助用户识别其跨过的列组中的单元格中的数据是否与该数据相关联。特定主题。

然后有一个带有scope="row"的<th scope="row">John Doe</th>标记，它定义了同一行之后的单元格，其中包含有关该特定学生姓名的“成绩”信息。

行组

现在让我们转到另一个示例，该示例将具有与上述示例几乎相同的表，除了我们将交换行标题和列标题之外，因此我们将能够使用行组。

<table>
        <tr>
        <th colspan="2">Subject</th>
        <th>John Doe</th>
        <th>Miriam Luther</th>
        </tr>
        <tr>
            <th rowspan="2">Biology</th>
            <th>Practical</th>
            <td>A</td>           
            <td>A</td>
        </tr>
        <tr>            
            <th>Theory</th>
            <td>A+</td>           
            <td>A</td>
        </tr>
        <tr>
            <th rowspan="2">Chemistry</th>
            <th>Practical</th>
            <td>B</td>           
            <td>C</td>
        </tr>
        <tr>            
            <th>Theory</th>
            <td>A</td>           
            <td>C+</td>
        </tr>
        <tr>
            <th rowspan="2">Physics</th>
            <th>Practical</th>
            <td>A</td>           
            <td>A</td>
        </tr>
        <tr>            
            <th>Theory</th>
            <td>A-</td>           
            <td>A-</td>
        </tr>
    </table>

现在，我们有了可以使用的示例，让我们开始创建行组，就像在上一个示例中为列组所做的那样。

然而，行组不能使用类似这样的标记创建colgroup因为没有rowgroup元素。

HTML行通常使用<thead> ， <tbody>和<tfooter>元素进行<tfooter> 。一个HTML <table>元素可以具有一个<thead> ，一个<tfoot>和多个<tbody> 。我们将在表中使用多个tbody创建行组，并将各自的作用域添加到标题单元格。

<table>
    <colgroup span="2"></colgroup>
    <col>
    <col>
    <thead>
        <tr>
            <th colspan="2" scope="colgroup">Subject</th>
            <th scope="col">John Doe</th>
            <th scope="col">Miriam Luther</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th rowspan="2" scope="rowgroup">Biology</th>
            <th>Practical</th>
            <td>A</td>
            <td>A</td>
        </tr>
        <tr>
            <th>Theory</th>
            <td>A+</td>
            <td>A</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <th rowspan="2" scope="rowgroup">Chemistry</th>
            <th>Practical</th>
            <td>B</td>
            <td>C</td>
        </tr>
        <tr>
            <th>Theory</th>
            <td>A</td>
            <td>C+</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <th rowspan="2" scope="rowgroup">Physics</th>
            <th>Practical</th>
            <td>A</td>
            <td>A</td>
        </tr>
        <tr>
            <th>Theory</th>
            <td>A-</td>
            <td>A-</td>
        </tr>
    </tbody>
</table>

我们已经添加行“实用”，并在每一个“理论” tbody创建行组，每组两行。我们还向包含有关这两行的标题信息的单元格中添加了scope="rowgroup" （在这种情况下，这是成绩所属的主题名称）。