htmlaccessibilitywai-ariascreen-readers

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


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 wizard 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 repeating that info in every single input?


Solution

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