Screen reader: best practice to make them read descriptions when focus a section of a form

Viewed 74

What is the best practice to label a part of a form?

Creating a <div tabindex="0"> does not seem to be "good" method.

I have a large form with different parts everything is on one site (no wizzard or something). I guess users with a screen reader just use TAB to navigate between the different inputs and once they reach a different area of the form I would like to explain what it is about. So kinda like labeling a div and once they reach an input in that div -> read something.

Just a simplified example:

<form>
    <!-- some inputs about the company -->
    <h2>Company</h2>
    <div>
        <label for="company-name-input">Company Name</label>
        <input type="text" id="company-name-input">
    </div>
    <div>
        <label for="company-address-input">Company Address</label>
        <input type="text" id="company-address-input">
    </div>

    <h2>Contact Partners</h2>
    <!-- here are inputs about important person you can contact -->
    <!-- how do I notify users about this fact, when they just tab thought the form
         I read it's no good to add a tabindex="0" to the headline
     -->
    <div>
        <!-- person one -->
        <label for="person-email-1">E-Mail</label>
        <!--
            I could make a aria-label="Here is the email of your first person"
            but in case someone tabs here from below they might miss that..
            and always have a "Person nr X before each input might be strange as well
        -->
        <input type="email" id="person-email-1">

        <!-- all the other persons -->

        <button>Add Partner</button>
    </div>
</form>

What's the best practice to make Users aware they are editing fields for a contact partner when they focus an input in a certain area without repeading that info in every single input?

1 Answers

The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.

<form>
    <!-- some inputs about the company -->
    <fieldset>
        <legend>Company</legend>
        <div>
            <label for="company-name-input">Company Name</label>
            <input type="text" id="company-name-input">
        </div>
        <div>
            <label for="company-address-input">Company Address</label>
            <input type="text" id="company-address-input">
        </div>
    </fieldset>
    <fieldset>
        <legend>Contact Partners</legend>
        <!-- here are inputs about important person you can contact -->
        <!-- how do I notify users about this fact, when they just tab thought the form
             I read it's no good to add a tabindex="0" to the headline
         -->
        <div>
            <!-- person one -->
            <label for="person-email-1">E-Mail</label>
            <!--
                I could make a aria-label="Here is the email of your first person"
                but in case someone tabs here from below they might miss that..
                and always have a "Person nr X before each input might be strange as well
            -->
            <input type="email" id="person-email-1">

            <!-- all the other persons -->

            <button>Add Partner</button>
        </div>
    </fieldset>
</form>

Related