I created a page and inside this page has a form. Until then, everything ok. But I put the form inside that tag? Semantically speaking, inside a section, an article, a section and an article, or a div? I'm still a bit confused by the semantics when it comes out of the usual. I researched Google, but I did not get satisfactory answers.
section
form
form
/section
or
article
form
/form
/article
or
section
article
form
/form
/article
/section
or
div
form
/form
/div
In the W3C documentation there is apparently no reference to the semantic structure where form should come from the page. In the Mozilla documentation they actually put section inside form !
But the most important point, and that both W3C and Mozilla approach is the semantic structure of form itself.
View the template proposed by Mozilla below :
Here you'll see that we are wrapping the contact information fields inside a distinct
<section>element.
OBS: Try to count how many <div> is in this template!
h1 {
margin-top: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
form {
margin: 0 auto;
width: 400px;
padding: 1em;
border: 1px solid #CCC;
border-radius: 1em;
}
div+div {
margin-top: 1em;
}
label span {
display: inline-block;
width: 120px;
text-align: right;
}
input, textarea {
font: 1em sans-serif;
width: 250px;
box-sizing: border-box;
border: 1px solid #999;
}
input[type=checkbox], input[type=radio] {
width: auto;
border: none;
}
input:focus, textarea:focus {
border-color: #000;
}
textarea {
vertical-align: top;
height: 5em;
resize: vertical;
}
fieldset {
width: 250px;
box-sizing: border-box;
margin-left: 136px;
border: 1px solid #999;
}
button {
margin: 20px 0 0 124px;
}
label {
position: relative;
}
label em {
position: absolute;
right: 5px;
top: 20px;
}<form method="post">
<h1>Payment form</h1>
<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
<section>
<h2>Contact information</h2>
<fieldset>
<legend>Title</legend>
<ul>
<li>
<label for="title_1">
<input type="radio" id="title_1" name="title" value="M." >
Mister
</label>
</li>
<li>
<label for="title_2">
<input type="radio" id="title_2" name="title" value="Ms.">
Miss
</label>
</li>
</ul>
</fieldset>
<p>
<label for="name">
<span>Name: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="text" id="name" name="username">
</p>
<p>
<label for="mail">
<span>E-mail: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="email" id="mail" name="usermail">
</p>
<p>
<label for="pwd">
<span>Password: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="password" id="pwd" name="password">
</p>
</section>
<section>
<h2>Payment information</h2>
<p>
<label for="card">
<span>Card type:</span>
</label>
<select id="card" name="usercard">
<option value="visa">Visa</option>
<option value="mc">Mastercard</option>
<option value="amex">American Express</option>
</select>
</p>
<p>
<label for="number">
<span>Card number:</span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="text" id="number" name="cardnumber">
</p>
<p>
<label for="date">
<span>Expiration date:</span>
<strong><abbr title="required">*</abbr></strong>
<em>formatted as mm/yy</em>
</label>
<input type="text" id="date" name="expiration">
</p>
</section>
<section>
<p> <button type="submit">Validate the payment</button> </p>
</section>
</form> Did you count how many <div> had? That's right ZERO ! He noticed how form is assembled in a thorough and 100% semantic way. This has to be the main concern.
So where form is in the structure does not matter much. If your form is the main subject of the page put <h1> in it and place it higher up on the page, since the screen readers start from top to bottom. If you can do a basic test, try navigating your screen by pressing TAB to see how the focus changes. If you need to make corrections using tabindex ( read more about tabindex here )
Additional Accessibility Information
According to W3C WAI and WebAim you can and should use aria-labelledby in the construction of the form to help screen readers. You can learn more here link
EX: <input type="password" name="password" id="password" aria-describedby="password">
In addition, you can also use role to interact better with screen readers. Basic form hints from Mozilla In this documentation you can inform yourself better .
EX: Notice the role in section and aria-required in input
<form>
<section role="form">
<label for="name">* Name:</label>
<input type="text" value="name" id="name" aria-required="true"/>
</section>
</form>
Important: If you have a div that semantically is not a buttom , but plays the role of buttom , since it can be clicked etc, it is strong> that you use these attributes of role and aria for screen readers to identify this "component" as clickable and active! Full Documentation W3C ARIA , there's everything about roles and arias link (2017)
EX: Again notice role in section and aria-checked
<div role="checkbox" aria-checked="false" tabindex="0">
Escolher esse
</div>
You can still work your way better by using the microdatas of Schema for example and putting itemscope itemtype itemprop in the elements. Here is a template for LocalBusiness link