残障用户最苦恼的元素之一是表格——在设计这个复杂的元素时，许多设计师和开发人员放弃了可访问性。
在本课中，学习可以采取的简单步骤，以使残障人士（尤其是辅助技术用户）更容易访问您的表格。
将 <table> 元素用于表格数据
Web 上有两种基本类型的表：数据表和布局表。数据表全面呈现复杂数据，它们通常具有行和/或列标题。另一方面，布局表组织页面上的元素，通常缺少逻辑标题。
辅助技术对布局表和数据表的处理方式非常不同，因此为每种类型的表使用正确的属性至关重要。CSS 是布局表格的最佳选择，因为屏幕阅读器将按照其在代码中出现的字面顺序阅读内容。对于数据表，使用 HTML <table>元素。它允许屏幕阅读器识别列数和行数，提供表格导航功能，读取行和列标题等。
使用 <caption> 元素作为表格标题
标题类似于屏幕阅读器读出的表格标题。它可以帮助用户识别表格，了解它的内容并决定是否要阅读它。虽然每个表格可能不需要标题，但它们通常是有益的。在开始 <table> 标记之后使用 <caption> 元素将标题与相应的表格相关联。
对于更复杂的表格，请考虑为辅助技术用户添加摘要——说明表格中数据的组织方式的信息。阅读有关在万维网联盟网站上添加摘要的不同方法。
不要让表格标题为空
数据表非常适合呈现和逻辑组织复杂数据。没有表格标题的简单表格通常不会给视觉用户带来问题，因为它们的内容看起来不言自明。但是，对于辅助技术用户来说，无标题表格可能具有挑战性，因为他们需要这些信息来理解上下文。
为了使表格可访问，表格标题不应为空。这对于某些表格的左上角单元格尤为重要，在某些情况下，这些单元格可能看起来是多余的。请记住，此信息对于辅助技术用户至关重要。
如果您的表格中有没有数据的单元格，请用 0、NA 或“空白”标记它们，而不是让它们为空。
使用简单表格
Frederic Chopin 说过，“简单是最终的成就”，这在表格上再合适不过了。制作可访问的表格不仅意味着将数据放在行和列中，还意味着以最清晰和最简单的方式组织它。
首先，一些屏幕阅读器仍然不完全支持具有合并单元格或多级行和列标题的复杂表格。其次，即使屏幕阅读器可以浏览此类表格，杂乱的组织也使非视觉用户更难以理解此类数据。最终，使表格尽可能简单会使所有用户受益。
避免合并单元格
关于如何访问合并单元格的信息相互矛盾。简洁的答案是，表格越简单，辅助技术用户就越容易理解。并非所有屏幕阅读器都支持合并单元格，许多政府机构都有建议取消合并单元格的指导方针。
在某些情况下，合并表头比将表分成多个更小的单元更有益。如果必须这样做，请使用rowspan和colspan属性来指示特定单元格占用两个单元格的空间。但是，无论如何，请避免将数字信息放在合并的单元格中，因为屏幕阅读器用户几乎不可能使用它们。
使用比例单元格宽度
通常，Web 浏览器会自动确定表格的宽度并设置行和列的尺寸。如果您想拥有更多控制权，您还可以选择手动设置表格单元格的宽度。在这种情况下，请避免使用以像素为单位的绝对值并使用百分比 (%)，以便浏览器可以自动调整表格宽度并减少水平滚动。
当涉及到单元格高度时，请避免手动设置，以便单元格可以扩展以适应其内容。对于可能会放大文本内容的弱视用户来说，这一点尤为重要。
考虑组织相关项目的列表
从可访问性的角度来看，列表很棒。与表格一样，它们有助于构建数据，但更易于导航以帮助技术用户。有时，简单表格中提供的信息可以更好地呈现在列表中，因此在组织数据时请牢记这一点。
您需要对列表内容使用适当的标记，以便浏览器自动添加项目符号或编号。在 HTML 中组织列表有 3 种方法：
• 当项目的顺序不相关时，使用带有项目符号的无序列表。
• 当顺序很重要时，使用有序（编号）列表。
• 对术语及其定义使用描述列表——这些列表中的项目以编程方式连接
无序列表
要引入无序列表，请使用<ul>元素——它是包装列表项的配对标签。< li>标签代表“列表项”，用于介绍单个项；它还需要一个结束标签。
默认情况下，无序列表中的项目未编制索引并显示为项目符号。但是，它们通常以与代码中相同的顺序出现。无序列表的一个典型例子是购物清单。它们也可用于不按特定顺序构建想法。
有序列表
要创建有序列表，请使用<ol>元素，后跟<li>列表项元素。对于有序列表，浏览器默认显示数字。< ol>元素有几个属性可以帮助您指定使用的编号（类型）或反转编号顺序（反转）。有序列表的示例包括分步说明或方法。
描述列表
描述列表是通过<dl>元素引入的。它们包含 2 种类型的项目：
• 定义术语——我们要定义的项目用<dt>标签引入。
• 描述 — <dd>标签中的术语解释。
这些列表非常适合词汇表或需要术语定义的地方。
本文内容为转载
网友评论