Question 254599 in Html Question posted in
Some basic documentation can be found here.

Html – 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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I went with role="region" and aria-label="label":

    <div role="region" aria-label="This form is being completed by" tabIndex={0}>

  2. 0

    LABEL TAG – W3SCHOOLS

    W3 says the "for" – attribute is only valid for FORM-Elements.

    A workaround would be to just use FORM-Elements.

    Or use the "role" – attribute:
    Accessibility Role, Name & Value

    I think this might do the trick.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search