1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
---
title: Dicas básicas de form
slug: Web/Accessibility/ARIA/forms/Basic_form_hints
translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints
original_slug: Web/Accessibility/ARIA/forms/Dicas_básicas_de_form
---
<div class="twocolumns">
<h2 id="Form_labels" name="Form_labels">Form labels</h2>
</div>
<p>Quando estiver implementando forms usando elementos HTML tradicionais relacionados à foms, é importante fornecer labels para controles e para explicitamente associar um label com o seu ocntrole. Quando um usuário de leitor de tela navega uma página, o leitor de tel irá descrever os controles do form, mas sem uma associação direta entre o controle e seu label, o leitor de tela não tem maneira de saber qual label é o correto.</p>
<p>O exemplo abaixo mostra um form simples com labels. Note que cada elemento {{HTMLElement("input")}} tem um <strong>id</strong>, e cada elemento {{HTMLElement("label")}} tem um atributo <strong>for</strong> indicando o <strong>id</strong> do {{HTMLElement("input")}} associado.</p>
<p><em>Exempl0 1. Form simples com labels</em></p>
<pre class="brush: html"><form>
<ul>
<li>
<input id="wine-1" type="checkbox" value="riesling"/>
<label for="wine-1">Berg Rottland Riesling</label>
</li>
<li>
<input id="wine-2" type="checkbox" value="weissbergunder"/>
<label for="wine-2">Weissbergunder</label>
</li>
<li>
<input id="wine-3" type="checkbox" value="pinot-grigio"/>
<label for="wine-3">Pinot Grigio</label>
</li>
<li>
<input id="wine-4" type="checkbox" value="gewurztraminer"/>
<label for="wine-4">Berg Rottland Riesling</label>
</li>
</ul>
</form>
</pre>
<h2 id="Labeling_with_ARIA" name="Labeling_with_ARIA">Rotulando com ARIA</h2>
<p>O elemento HTML {{HTMLElement("label")}} é apropriado para elementos relacionados com form, mas muitos controles de form são implementados como widget JavaScript dinâmico, usando {{HTMLElement("div")}}s ou {{HTMLElement("span")}}s. <a href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA</a>, a especificação de <strong>Aplicações Internet Ricas em Acessibilidade</strong> da W3C <a href="http://www.w3.org/WAI/">Iniciativa de Acessibilidade Web</a>, fornece o atributo <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby"><strong>aria-labelledby</strong></a> para esses casos.</p>
<p>O exemplo abaixo mostra um grupo de botões rádio usando um lista não ordenada. Note que na linha 3, o elemento {{HTMLElement("li")}} seta o atributo <strong>aria-labelledby</strong> para "rg1_label," o <strong>id</strong> do elemento {{HTMLElement("h3")}} na linha 1, que é o label para o grupo rádio.</p>
<p><em>Exemplo 2. Um grupo rádio implementado usando uma lista não ordenada</em></p>
<pre class="brush: html"><h3 id="rg1_label">Lunch Options</h3>
<ul class="radiogroup" id="rg1" role="radiogroup" aria-labelledby="rg1_label">
<li id="r1" tabindex="-1" role="radio" aria-checked="false">
<img role="presentation" src="radio-unchecked.gif" /> Thai
</li>
<li id="r2" tabindex="-1" role="radio" aria-checked="false">
<img role="presentation" src="radio-unchecked.gif" /> Subway
</li>
<li id="r3" tabindex="0" role="radio" aria-checked="true">
<img role="presentation" src="radio-checked.gif" /> Radio Maria
</li>
</ul>
</pre>
<h2 id="Describing_with_ARIA" name="Describing_with_ARIA">Descrevendo com ARIA</h2>
<p>Controles form às vezes tem uma descrição associada com eles, em adição ao label. ARIA fornece o atributo <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby"><strong>aria-describedby</strong></a> para diretamente associar a descrição com o controle.</p>
<p>O exemplo abaixo mostra um elemento {{HTMLElement("button")}} que é descrito por uma sentença num elemento {{HTMLElement("div")}} separado. O atributo <strong>aria-describedby</strong> no {{HTMLElement("button")}} referencia o <strong>id</strong> de {{HTMLElement("div")}}.</p>
<p><em>Exemplo 3. Um botão descrito por um elemento separado.</em></p>
<pre class="brush: html"><button aria-describedby="descriptionRevert">Revert</button>
<div id="descriptionRevert">Reverting will undo any changes that have been made since the last save.</div></pre>
<p>(Note que o atributo <strong>aria-describedby</strong> é usado para outros propósitos, além de controles do form.)</p>
<h2 id="Required_and_invalid_fields" name="Required_and_invalid_fields">Campos inválidos e obrigatórios</h2>
<p>Web developers tipicamente usam estratégias de apresentação para indicar campos obrigatórios ou campos inválidos, mas tecnologias assistivas (TAs) não podem necessariamente inferir essa informação a partir da apresentação. ARIA fornece atributos para indicar que os controles do form são obrigatórios ou inválidos:</p>
<ul>
<li>A propriedade <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required"><strong>aria-required</strong></a> pode ser aplicada a um elemento form para indicar para uma TA que é obrigatório preencher o formulário.</li>
<li>O estado <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid"><strong>aria-invalid</strong></a> pode ser programaticamente aplicado para indicar para uma TA quais campos de dados têm dados incorretos, então o usuário sabe que ele entrou um dado inválido.</li>
</ul>
<p>O exemplo abaixo mostra um form simples com três campos. Nas linhas 4 e 12, o atributo <strong>aria-required</strong> é setado para true (em adição aos asteriscos próximos aos labels) indicando que os campos de nome e e-mail são obrigatórios. A segunda parte do exemplo é um trecho de JavaScript que valida o e-mail e seta o atributo <strong>aria-invalid</strong> do campo e-mail (linha 12 do HTML) de acordo com o resultado (em adição à mudança de apresentação do elemento).</p>
<p><em>Exemplo 4a. Um form com campos obrigatórios.</em></p>
<pre class="brush: html"><form>
<div>
<label for="name">* Name:</label>
<input type="text" value="name" id="name" aria-required="true"/>
</div>
<div>
<label for="phone">Phone:</label>
<input type="text" value="phone" id="phone" aria-required="false"/>
</div>
<div>
<label for="email">* E-mail:</label>
<input type="text" value="email" id="email" aria-required="true"/>
</div>
</form></pre>
<p><em>Exemplo 4b. Parte de um script que valida a entrada no form.</em></p>
<pre class="brush: js">var validate = function () {
var emailElement = document.getElementById(emailFieldId);
var valid = emailValid(formData.email); // returns true if valid, false otherwise
emailElement.setAttribute("aria-invalid", !valid);
setElementBorderColour(emailElement, valid); // sets the border to red if second arg is false
};</pre>
<h2 id="Providing_Helpful_Error_Messages" name="Providing_Helpful_Error_Messages">Fornecendo Mensagens de Erro Úteis</h2>
<p>Leia como usar <a href="/en-US/docs/aria/forms/alerts" title="aria/forms/alerts">alertas ARIA para melhorar forms</a>.</p>
<div class="note">A ser decidido: <span id="result_box" lang="pt"><span>devemos</span> <span>ou</span> <span>combinar em</span> <span>um</span> <span>artigo ou</span> <span>separar em</span> <span>técnicas</span><span>, ou ambos.</span> <span>Além disso,</span> <span>é</span> <span>ARIA</span> <span>marcação apropriada</span> <span>para mensagens de erro</span> <span>em uma</span> <span>página carregada</span> <span>após a validação</span> <span>do lado do servidor</span><span>?</span></span></div>
<p>Para maiores informações usando ARIA para acessibilidade de forms, veja o documento <a href="http://www.w3.org/TR/wai-aria-practices/">Práticas de Cricação de WAI-ARIA</a>.</p>
|
