Making a Section 508-compliant accessible structure for a printable form

Question

I have a form which can be reviewed and printed after submission. Because it has to look good when printed, I don't simply want to display the same form with disabled fields, but rather want to display a 'read only' version that is formatted to look like the form. There are any number of ways to do this, but I am looking to comply with Section 508 of the Rehabilitation Act.

I created a sample below with three different ways I can imagine, with some CSS they all appear the same visually, but I am not sure which of these comply with the standards expected by Section 508.

Can you assist with that?

<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 description list <dl> element is the most semantic way to mark up name/value groups like form field names and values:

Name-value groups may be terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data.

But note that you shouldn't have a separate list for each form field; they should all go within the same list:

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

If you need to wrap each name/value pair in a <div> for styling or other reasons, that's permitted too.

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