diff options
Diffstat (limited to 'files/pt-br/web/accessibility/aria/forms/multipart_labels/index.html')
| -rw-r--r-- | files/pt-br/web/accessibility/aria/forms/multipart_labels/index.html | 47 |
1 files changed, 47 insertions, 0 deletions
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> |