可打印表格的无障碍结构

Question

这个问题专门针对可访问性。我有一个表单，提交后，用户可以查看和打印。因为它在打印时必须看起来不错，所以我不想简单地显示带有禁用字段的相同表单，而是一个“只读”版本，其格式看起来 like 表单。有很多方法可以做到这一点，但我想知道是否有优化可访问性的首选方法。

我在下面用我能想到的三种不同方式创建了一个示例，使用一些 CSS，它们在视觉上看起来都是一样的，但我不确定哪种（如果有的话）更适合可访问性，或者是否有一些首选的方式来做到这一点。

<div class="formreview">
<dl>
  <dt>Username</dt>
  <dd>user123</dd>
</dl>
<dl>
  <dt>Email</dt>
  <dd>[email protected]</dd>
</dl>
</div>

<div class="formreview">
  <h4 id="username">Username</h4>
  <p aria-labelledby="username">user123</p>
  <h4 id="email">Email</h4>
  <p aria-labelledby="email">[email protected]</p>
</div>

<div class="formreview">
<p>
  <span id="username" class="ff">Username</span><span class="fv" aria-labelledby="username">user123</span></p>
<p>
  <span id="email" class="ff">Email</span><span class="fv" aria-labelledby="email">[email protected]</span> 
</p>
</div>

Answer 1

A 描述列表

<dl>

元素 是标记名称/值组（如表单字段名称和值）的最语义方式：

名称-值组可以是术语和定义、元数据主题和值、问题和答案，或任何其他名称-值数据组。

但是请注意，您不应该为每个表单字段都有一个单独的列表；他们应该都在同一个列表中：

<article>
  <h2>Your Form Responses</h2>
  <dl>
    <dt>Username</dt>
    <dd>user123</dd>
    <dt>Email</dt>
    <dd>[email protected]</dd>
  </dl>
</article>

如果出于样式或其他原因需要将每个名称/值对包装在

<div>

中，这也是允许的。

<article>
  <h2>Your Form Responses</h2>
  <dl>
    <div>
      <dt>Username</dt>
      <dd>user123</dd>
    </div>
    <div>
      <dt>Email</dt>
      <dd>[email protected]</dd>
    </div>
  </dl>
</article>