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