diff options
Diffstat (limited to 'files/pt-br/web/accessibility/aria/forms')
4 files changed, 327 insertions, 0 deletions
diff --git a/files/pt-br/web/accessibility/aria/forms/alerts/index.html b/files/pt-br/web/accessibility/aria/forms/alerts/index.html new file mode 100644 index 0000000000..b33525c5ad --- /dev/null +++ b/files/pt-br/web/accessibility/aria/forms/alerts/index.html @@ -0,0 +1,141 @@ +--- +title: Alerts +slug: Web/Accessibility/ARIA/forms/alerts +translation_of: Web/Accessibility/ARIA/forms/alerts +--- +<h2 id="O_problema">O problema</h2> + +<p>Você tem um formulário — um formulário de contato, por exemplo — no qual você deseja inserir algum that you want to put some accessible error checking into. Examples of common problems include e-mail addresses which are not valid, or a name field which does not contain at least a first name or a surname.</p> + +<h2 id="O_formulário">O formulário</h2> + +<p>Primeiro, por favor leia sobre a técnica de <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints#Required_and_invalid_fields" title="/en/Web/Accessibility/ARIA/forms/Basic_form_hints"><code>aria-required</code> </a> if you have not done so, as this technique expands upon that.</p> + +<p>Here is a simple form:</p> + +<pre class="brush: html"> <form method="post" action="post.php"> + <fieldset> + <legend>Please enter your contact details</legend> + <label for="name">Your name (required):</label> + <input name="name" id="name" aria-required="true"/> + <br /> + <label for="email">E-Mail address (required):</label> + <input name="email" id="email" aria-required="true"/> + <br /> + <label for="website">Website (optional):</label> + <input name="website" id="website"/> + </fieldset> + <label for="message">Please enter your message (required):</label> + <br /> + <textarea name="message" id="message" rows="5" cols="80" + aria-required="true"></textarea> + <br /> + <input type="submit" name="submit" value="Send message"/> + <input type="reset" name="reset" value="Reset form"/> + </form> +</pre> + +<h2 id="Checking_for_validity_and_notifying_the_user_2"><span class="mw-headline" id="Checking_for_validity_and_notifying_the_user">Checking for validity and notifying the user</span></h2> + +<p>Form validations consists of several steps:</p> + +<ol> + <li>Checking if the e-mail address or entered name are valid. Each field has a set of criteria which must be met in order to pass validation. In order to simplify this example, we’ll check whether the e-mail address contains the “@” symbol, and if the name entry contains at least 1 character.</li> + <li>If the above criteria is not met, the field’s <code>aria-invalid</code> attribute will be given a value of “<code>true</code>”.</li> + <li>If the criteria was not met, the user will be notified via an alert. Instead of using the JavaScript ‘<code>alert</code>’ function, we’ll use a simple WAI-ARIA widget for notification. This notifies the user of the error, but allows for them continue modifying the form without losing focus (caused by the “<code>onblur</code>” handler in JavaScript's default ‘<code>alert</code>’ function).</li> +</ol> + +<p>Below is example JavaScript code which could be inserted above the closing “<code>head</code>” tag:</p> + +<pre class="brush: js"> <script type="application/javascript"> + function removeOldAlert() + { + var oldAlert = document.getElementById("alert"); + if (oldAlert){ + document.body.removeChild(oldAlert); + } + } + + function addAlert(aMsg) + { + removeOldAlert(); + var newAlert = document.createElement("div"); + newAlert.setAttribute("role", "alert"); + newAlert.setAttribute("id", "alert"); + var msg = document.createTextNode(aMsg); + newAlert.appendChild(msg); + document.body.appendChild(newAlert); + } + + function checkValidity(aID, aSearchTerm, aMsg) + { + var elem = document.getElementById(aID); + var invalid = (elem.value.indexOf(aSearchTerm) < 0); + if (invalid) { + elem.setAttribute("aria-invalid", "true"); + addAlert(aMsg); + } else { + elem.setAttribute("aria-invalid", "false"); + removeOldAlert(); + } + } + </script> +</pre> + +<h2 id="The_checkValidity_function_2"><span class="mw-headline" id="The_checkValidity_function">The <code>checkValidity</code> function</span></h2> + +<p>The primary method in JavaScript used for form validation is the <code>checkValidity</code> function. This method takes three parameters: The ID of the <code>input</code> that is to be validated, the term to search for to ensure validity, and the error message to be inserted into the alert.</p> + +<p>To see if it is valid, the function checks whether the <code>indexOf</code> the <code>input</code>’s value is anything greater than <code>-1</code>. A value of <code>-1</code> or less is returned if the index of the search term could not be found within the value.</p> + +<p>If invalid, the function does two things:</p> + +<ol> + <li>It sets the element’s <code>aria-invalid</code> attribute to “<code>true</code>”, which will indicate to screen readers that there is invalid content in here.</li> + <li>It will call the <code>addAlert</code> function to add the alert with the provided error message.</li> +</ol> + +<p>If the search term is found, the <code>aria-invalid</code> attribute is reset to “<code>false</code>”. In addition, any leftover alerts are removed.</p> + +<h2 id="The_addAlert_function_2"><span class="mw-headline" id="The_addAlert_function">The <code>addAlert</code> function</span></h2> + +<p>This function first removes any old alerts. The function is simple: It looks for an element with id “<code>alert</code>”, and if found, removes that from the <a href="/en-US/docs/Mozilla/Tech/XUL/Tutorial/Document_Object_Model">document object model</a>.</p> + +<p>Next, the function creates a <code>div</code> element to hold the alert text. It gets an ID of “<code>alert</code>”. And it gets a role set of “alert”. This is actually ARIA-inspired, even though it doesn’t say “aria” in the attribute name. This is because that role is based on the <a class="external text" href="http://www.w3.org/TR/xhtml-role/" title="XHTML Role Attribute Module">XHTML Role Attribute Module</a> that was simply ported to HTML for simplicity.</p> + +<p>The text is added to the <code>div</code> element, and the <code>div</code> element is added to the document.</p> + +<p>The moment this happens, Firefox will fire an “alert” event to assistive technologies when this <code>div</code> appears. Most screen readers will pick this one up automatically and speak it. This is similar to the Notification Bar in Firefox that prompts you whether you want to save a password. The alert we just created does not have any buttons to press, it just tells us what’s wrong.</p> + +<h2 id="Modifying_the_“onblur”_event"><span class="mw-headline" id="Adding_the_magic_to_the_.E2.80.9Conblur.E2.80.9D_event">Modifying the “<code>onblur</code>” event</span></h2> + +<p>All that’s left now is add the event handler. We need to change the two inputs for e-mail and name for this:</p> + +<pre class="brush: html"> <input name="name" id="name" aria-required="true" + onblur="checkValidity('name', ' ', 'Invalid name entered!');"/> + <br /> + <input name="email" id="email" aria-required="true" + onblur="checkValidity('email', '@', 'Invalid e-mail address');"/> +</pre> + +<p><strong>Testing the example</strong></p> + +<p>If you use Firefox 3 and a currently-supported screen reader, try the following:</p> + +<ol> + <li>Enter only your first name as the name. When tabbing, you’ll hear an alert that tells you you’ve entered an invalid name. You can then shift-tab back and correct the error.</li> + <li>Enter an e-mail address without the “@” symbol. When tabbing out of this field, you should hear a warning that says you didn’t enter a valid e-mail address.</li> +</ol> + +<p>In both cases, when returning focus to the field in question, your screen reader should tell you that this field is invalid. JAWS 9 supports this, but JAWS 8 does not, so this may not work in all versions of the screen readers supported.</p> + +<h2 id="A_few_questions_that_you_might_have_2"><span class="mw-headline" id="A_few_questions_that_you_might_have">A few questions that you might have</span></h2> + +<dl> + <dt>Q. Why did you put both “<code>(required)</code>” in the label text and the <code>aria-required</code> attribute on some of the inputs?</dt> + <dd>A. If this were a real live form, and the site was being visited by a browser that does not yet support ARIA, we’d still want to give an indication that this is a required field.</dd> + <dt>Q. Why don’t you set focus back to the invalid field automatically?</dt> + <dd>A. Because this is not allowed by the Windows API specs, and possibly others. Also, letting the focus jump around without real user interaction too often is not a nice thing to do in general. </dd> +</dl> + +<div class="warning">TBD: let's rethink this -- personally, I think setting focus might be good if done without causing a keyboard trap.</div> diff --git a/files/pt-br/web/accessibility/aria/forms/dicas_básicas_de_form/index.html b/files/pt-br/web/accessibility/aria/forms/dicas_básicas_de_form/index.html new file mode 100644 index 0000000000..722c60d420 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/forms/dicas_básicas_de_form/index.html @@ -0,0 +1,118 @@ +--- +title: Dicas básicas de form +slug: Web/Accessibility/ARIA/forms/Dicas_básicas_de_form +translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints +--- +<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/" title="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" title="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 (adaptado de <a href="http://www.oaa-accessibility.org/examplep/radio1/">http://www.oaa-accessibility.org/examplep/radio1/</a>)</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" title="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" title="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" title="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/" title="http://www.w3.org/TR/wai-aria-practices/">Práticas de Cricação de WAI-ARIA</a>.</p> diff --git a/files/pt-br/web/accessibility/aria/forms/index.html b/files/pt-br/web/accessibility/aria/forms/index.html new file mode 100644 index 0000000000..355c70b673 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/forms/index.html @@ -0,0 +1,21 @@ +--- +title: Formulários +slug: Web/Accessibility/ARIA/forms +tags: + - ARIA + - Accessibility + - Acessibilidade + - Rótulos + - WebMechanics + - formulários +translation_of: Web/Accessibility/ARIA/forms +--- +<p>As páginas a seguir fornecem várias técnicas para melhorar a acessibilidade nos formulários <em>web</em>:</p> + +<ul> + <li><a href="/en/Accessibility/ARIA/Basic_form_hints" title="Basic form hints">Dicas básicas sobre formulários</a>: Adicionando dicas e descrições para campos inválidos, ou obrigatórios</li> + <li><a href="/en/Accessibility/ARIA/forms/alerts" title="alerts">Alertas</a>: Usando alertas para fornecer mensagens de erro de validação no lado cliente</li> + <li><a href="/en/Accessibility/ARIA/forms/Multipart_labels" title="https://developer.mozilla.org/en/aria/forms/Multipart_labels">Rótulos de múltiplas partes</a>: Habilitando rótulos (<em>labels</em>) para formulários complexos, com um controle para cada campo</li> +</ul> + +<p>Ver também o <a class="external" href="http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html" title="http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html">Artigo do Yahoo! sobre validação de formulário e ARIA</a>, cobrindo muito do mesmo conteúdo.</p> diff --git a/files/pt-br/web/accessibility/aria/forms/multipart_labels/index.html b/files/pt-br/web/accessibility/aria/forms/multipart_labels/index.html new file mode 100644 index 0000000000..102274fadb --- /dev/null +++ b/files/pt-br/web/accessibility/aria/forms/multipart_labels/index.html @@ -0,0 +1,47 @@ +--- +title: Usando ARIA para rótulos com campos incorporados - Multipart labels +slug: Web/Accessibility/ARIA/forms/Multipart_labels +tags: + - ARIA + - Accessibility + - Acessibilidade + - Formulários+ARIA + - Guía + - Intermediário + - PrecisaDeConteúdo +translation_of: Web/Accessibility/ARIA/forms/Multipart_labels +--- +<div> +<h2 id="O_problema"><span class="mw-headline" id="Problem">O problema</span></h2> + +<p>Você tem um formulário onde existe uma pergunta simples e a resposta é mencionada na própria questão. Um exemplo clássico, que todos nós conhecemos das configurações de nossos navegadores, é a colocação "Deletar o histórico após x dias". "Apagar o histórico após" está à esquerda da caixa de texto, x é o número, por exemplo, 21 e a palavra "dias" vem depois dessa caixa, formando uma sentença de fácil compreensão.</p> + +<p>Se você está usando um leitor de tela tem que perceber que, quando vai para esta configuração no Firefox, escuta a pergunta "Deletar o histórico depois de 21 dias?", seguida por um aviso de que você está em uma caixa de texto contendo o número 21. Isso não é legal? Você não precisa navegar ao redor para descobrir a unidade. "Dias" pode, facilmente, ser "meses", ou "anos" em muitos diálogos comuns, não havendo maneira de descobrir, a não ser com comandos para reexaminar a tela.</p> + +<p><span class="seoSummary">A solução está em um atributo ARIA chamado <strong>aria-labelledby</strong> (<em>aria-etiqueta liderada por</em>). Seu parâmetro é uma cadeia de caracteres (<em>string</em>) que consiste de IDs dos elementos HTML que você quer concatenar em um único nome acessível.</span></p> + +<p>Tanto o atributo <strong>aria-labelledby</strong>, como o <strong>aria-describedby </strong>(<em>aria-descrito por</em>), são especificados <span class="short_text" id="result_box" lang="pt"><span>no elemento de formulário que será rotulado, por exemplo uma </span></span><input>.<span class="short_text" lang="pt"><span> Em ambas as situações, as ligações do controle da rotulagem <em>for/label</em>, que podem, também, estar presentes, serão substituídas pelo atributo </span></span><strong>aria-labelledby</strong>. Se você oferecer o atributo<strong> aria-labelledby</strong> em uma página HTML, então deve, da mesma forma, providenciar uma arquitetura de rótulo que vá, igualmente, apoiar os navegadores mais antigos, que ainda não têm suporte ARIA. Com Firefox 3, seus utilizadores cegos conseguem, automaticamente, melhor acessibilidade com o novo atributo, mas quem utiliza navegadores antigos não sofrerá abandono no escuro, desta forma.</p> + +<p>Exemplo:</p> +<input><span id="labelShutdown">Desligar o computador após </span> <input> <span id="shutdownUnit"> minutos</span> + +<pre class="brush: html"><input aria-labelledby="labelShutdown shutdownTime shutdownUnit" type="checkbox" /> +<span id="labelShutdown">Shut down computer after</span> +<input aria-labelledby="labelShutdown shutdownTime shutdownUnit" id="shutdownTime" type="text" value="10" /> +<span id="shutdownUnit"> minutes</span> +</pre> + +<h2 id="Uma_nota_para_quem_usa_JAWS_8"><span class="mw-headline" id="A_Note_for_JAWS_8_users">Uma nota para quem usa JAWS 8</span></h2> + +<p>O JAWS 8.0 tem a sua própria lógica para encontrar os <em>labels</em> e isso o faz, sempre, substituir a caixa de texto com o <em>accessibleName</em> que uma página HTML recebe. Quanto ao JAWS 8, <u>eu</u> ainda não encontrei uma maneira de fazê-lo aceitar o <em>label</em> do exemplo acima. Mas o NVDA e o Window-Eyes fazem isso muito bem e a Orca, no Linux, também não apresenta problemas. (Os <u>autores</u> do artigo, são: <a href="https://developer.mozilla.org/en-US/profiles/bunnybooboo">bunnybooboo</a>, <a href="https://developer.mozilla.org/en-US/profiles/kscarfone">kscarfone</a>, <a href="https://developer.mozilla.org/en-US/profiles/StephenKelly">StephenKelly</a>, <a href="https://developer.mozilla.org/en-US/profiles/Kritz">Kritz</a>, <a href="https://developer.mozilla.org/en-US/profiles/Fredchat">Fredchat</a>, <a href="https://developer.mozilla.org/en-US/profiles/Sheppy">Sheppy</a>, <a href="https://developer.mozilla.org/en-US/profiles/Aaronlev">Aaronlev</a>)</p> + +<div class="note">TBD: adicione mais informação de compatibilidade</div> + +<h2 id="Isto_pode_ser_executado_sem_ARIA"><span class="mw-headline" id="Can_this_be_done_without_ARIA.3F">Isto pode ser executado sem ARIA?</span></h2> + +<p>O membro da comunidade Ben Millard apontou, numa publicação em um blogue, que os controles podem ser embutidos nos <em>labels,</em> como mostrado no exemplo acima, usando HTML 4, <a class="external text" href="http://projectcerbera.com/blog/2008/03#day24" rel="nofollow">controls can be embedded in labels as shown in the above example using HTML 4</a>, <span id="result_box" lang="pt"><span>simplesmente</span> <span>com a</span> <span>incorporação da entrada (</span></span><em>input</em>)<span lang="pt"> <span>no</span> <span>rótulo (<em>label</em>)</span></span>. Agradecemos pela informação, Ben! É muito útil e deixa claro que algumas técnicas que estão disponíveis há anos escapam, às vezes, até mesmo aos gurus. Esta técnica funciona em Firefox; entretanto, isso não é verdade para muitos outros navegadores, inclusive IE. Para <em>labels</em> com controles de formulários embutidos o uso do atributo <strong>aria-labelledby </strong>ainda é a melhor abordagem.</p> + +<p> </p> +</div> + +<p> </p> |