A11y 使用部分向用户显示数据

Question

假设我正在创建用户数据的显示，并且我希望使其尽可能易于访问。

在文档中，它说每个部分后面都应该有该部分的标题。 因此，如果我想编辑 HTML（如下所示）：

 <h1> User data </h1> <h2> see user data below </h2> <div> <h3> First name </h3> <p> Marc </p> </div> <div> <h3> Last name </h3> <p> MyLastName </p> </div>

请问您使用<section>标签来代替的div ，它封装了数据或会是这样的标签的过度使用<section>也将它正确掌握所有“字段标识”，如firstname和lastname作为h3还是应该体面的？

Answer 1

正如@QuentinC 在评论中指出的那样，并根据您提供的信息，我建议使用描述列表元素 ( <dl> )

这允许您创建带有描述的项目列表。

这样做的好处是您可以使用更多语义元素来标记地址、DOB 等。

您还可以将它们设置为标准 div（尽管您必须删除边距，因为<dd>元素在用户代理样式表中具有边距），因此您可以并排等。

我还在<h1>和<h2> <p>之间添加了一个额外的<p> ，因为它们不应该彼此相邻。 我认为这只是您保持简洁的示例，但我提请注意它以防万一您不知道，这就是您的最终文档的结构。

这方面的一个例子是：

 dl dt{ float: left; width: 50%; font-weight: bold; margin: 10px 0; } dl dd{ float: left; width: 50%; margin: 10px 0; }

 <h1> User data </h1> <p>There should be text here otherwise the &lt;h2&gt; should actually just be a paragraph, headings should not be right next to each other</p> <h2> see user data below </h2> <dl> <dt>First name</dt> <dd>Marc</dd> <dt>Last name</dt> <dd>MyLastName</dd> <dt>Address</dt> <dd><address> Mozilla Foundation<br> 331 E Evelyn Ave<br> Mountain View, CA 94041<br> USA</address> </dd> <dt>Date of Birth</dt> <dd><time datetime="1990-05-15">May 15 1990</time></dd> </dl>