时间戳

首页 > 解决方案 > A11y displaying data to the user with the use of section

html - A11y displaying data to the user with the use of section

问题描述

Say that I am creating a display of the user's data and I wish to make this as accessible as possible.

in the documentation, it says that each section should be followed by a heading for that section. So if I wanted to edit the HTML (shown below):

<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>

Would you use the <section> tag instead of the div that encapsulates the data or would that be an overuse of the tag <section> also would it be correct to have all the "field tags" such as firstname & lastname as h3 or should the decent?

标签： htmlaccessibility

解决方案

正如@QuentinC 在评论中指出的那样，鉴于您提供的信息，我建议使用描述列表元素（<dl>）

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

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

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

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

这方面的一个例子是：

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>

推荐阅读