htmlaccessibilitysection508

Label For a Static DIV that shows entered value from a form

I have a Confirmation screen where previously-entered Form input fields are shown as static DIVs.

enter image description here

The HTML is below. The DIVs, though static, are focusable with TAB, allowing the user to hit them with the keyboard.

            <div>
                <label className="itemText"> <!-- Does this need a FOR ID? -->
                    First Name
                </label>
                <div id="divFirstName" tabIndex={0}>
                    {firstName}
                </div>
            </div>

In this case, is it necessary (or possible) to provide label for=.. or aria-label to associate displayed <div> values with <label>s for 508 compliance, similar to what would be done for actual input controls? What should be done in this case?

Solution

  • If all you want to do is have a "confirmation" type page to show the user what they entered into a form, you can use plain text and perhaps a heading before each value.

    <h3>First Name</h3>
<p>Fred</p>

<h3>Middle Initial</h3>
<p>M</p>

<h3>Last Name</h3>
<p>Rogers</p>

    enter image description here

    All text on the page, unless intentionally hidden from assistive technology (eg aria-hidden="true") is available to the user. A screen reader user can use the down arrow key to walk all the elements in the DOM (that aren't hidden) so they can hear the text. And if you use semantic HTML such as headings (<h3>), the screen reader can quickly jump to a heading using either the H or 3 shortcut key. (Some screen readers have different ways to navigate to headings.)

    To have a more pleasant user experience, for both the sighted user and screen reader user, using a table with row headers would be helpful. Something like:

    <table>
  <tr>
    <th scope="row">First Name</th>
    <td>Fred</td>
  </tr>
  <tr>
    <th scope="row">Middle Initial</th>
    <td>M</td>
  </tr>
  <tr>
    <th scope="row">Last Name</th>
    <td>Rogers</td>
  </tr>
</table>

    enter image description here

    Your original question asked about making the confirmation values tabbable. They don't to be tabbable because screen reader users can navigate to the values as explained above so tabindex isn't needed. However, if do want them to be tabbable, you can present the form to the user that looks similar to the original form by using an <input> with the readonly attribute. That will allow the user to TAB to the input and they can copy the value but they can't change the value.

    Also, since it's an <input>, you can use a <label> with the for attribute.

    <label for="fname">First Name</label>
<input readonly value="Fred" id="fname">
<label for="mi">Middle Initial</label>
<input readonly value="M" id="mi" >
<label for="lname">Last Name</label>
<input readonly value="Rogers" id="lname">

    enter image description here