Na documentação da W3C aparentemente não existe referencia a estrutura semântica de onde o form
deve vir na página. Já na documentação da Mozilla eles colocam na verdade a section
dentro do form
!
Mas o ponto mais importante, e que tanto a W3C quando a Mozilla abordam é a estrutura semântica do form
em si.
Veja o modelo proposto pela Mozilla abaixo:
Here you'll see that we are wrapping the contact information fields
inside a distinct <section>
element.
OBS: Tente contar quantas <div>
existem nesse modelo!
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>
Contou quantas <div>
tinham? Isso mesmo ZERO! Reparou como o form
é montado de maneira minuciosa e 100% semântico. Essa tem que ser a preocupação principal.
Palavras finais:
Então onde o form
está na estrutura não importa muito. Se seu form
é o assunto principal da página coloque o <h1>
nele e coloque ele posicionado mais para cima na página, pois os leitores de tela começam de cima para baixo. Se puder faça um teste básico, tente navegar em sua tela apertando o TAB para ver como o foco vai mudando. Se precisar faça correções usando o tabindex
(leia mais sobre tabindex aqui)
Informações adicionais sobre acessibilidade
Segundo ai W3C WAI e a WebAim vc pode e deve usar os aria-labelledby
na construção do formulário para ajudar os leitores de tela. Vc pode se informar mais aqui https://www.w3.org/WAI/tutorials/forms/instructions/#using-aria-labelledby
EX: <input type="password" name="password" id="password" aria-describedby="password">
Além disso, vc também pode usar os role
para interagir melhor com os leitores de tela. Basic form hints da Mozilla Nessa documentação vc pode se informar melhor.
EX: Repare no role
na section e no aria-required
no input
<form>
<section role="form">
<label for="name">* Name:</label>
<input type="text" value="name" id="name" aria-required="true"/>
</section>
</form>
Importante: Se vc tem uma div
que semanticamente não é um buttom
, mas faz o papel de buttom
, pois pode ser clicado etc, é imprescindível que vc use esses atributos de role
e aria
para os leitores de tela identificarem esse "componente" como algo clicável e aria ativa! Documentação completa W3C ARIA, lá tem tudo sobre os roles
e os arias
https://www.w3.org/TR/aria-in-html/ (2017)
EX: Mais uma vez repare no role
na section e no aria-checked
<div role="checkbox" aria-checked="false" tabindex="0">
Escolher esse
</div>
Vc ainda pode trabalhar melhor seu forme usando os microdatas
do Schema por exemple e colocando itemscope
itemtype
itemprop
nos elementos. Aqui tem um modelo para LocalBusiness http://schema.org/LocalBusiness
article
, mas poderá estar dentro daarticle > section
se a outline exigir isso, ou ainda emarticle > section > div
. Se o formulário é secundário na página, estará fora daarticle
, em qualquer combinação de elementos novamente. Em relação ao formulário, não faz diferença, o que muda é a outline. – Woss 25/04/18 às 10:13