Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Markdown conversion for pt-BR - Cleanup - Accessibility section #8470

Merged
merged 1 commit into from
Sep 14, 2022
Merged

Markdown conversion for pt-BR - Cleanup - Accessibility section #8470

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions ...pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ <h2 id="ARIA">ARIA</h2>

<p>A especificação ARIA está dividida em três tipos diferentes de atributos: funções (roles), estados (states) e propriedades (properties). As funções (roles) descrevem os<em> widgets</em> que não estão disponíveis de outra forma em HTML 4, como deslizantes, barras de menu, abas e diálogos. As propriedades (properties) descrevem as características desses <em>widgets</em> - se podem ser arrastados (<em>draggable</em>), se existe algum elemento obrigatório, ou se trazem uma janela de explosão (popup) associada. Os estados (states) descrevem a interação atual de um elemento, informando à tecnlogia assistiva se este se encontra ativo, desativado, selecionado, ou oculto.</p>

<p>Os atributos ARIA são projetados para serem interpretados automaticamente pelo navegador e traduzidos para as APIs (<span class="_Tgc">Application Programming Interface/Interface de Programação de Aplicativo)</span> de acessibilidade nativas do sistema operacional. Quando o conjunto ARIA está presente as tecnologias assistivas são capazes de reconhecer e interagir com os controles personalizados pela JavaScript da mesma forma que fazem com os seus equivalentes de ambiente. Isto tem o potencial de oferecer uma experiência de utilização muito mais consistente do que aquela que foi possível nas gerações anteriores das aplicações da Rede, uma vez que os utilizadores de tecnologias assistivas podem empregar todo o seu conhecimento sobre o funcionamento das aplicações de ambiente, ao usar aquelas que são baseadas na <em>web</em>.</p>
<p>Os atributos ARIA são projetados para serem interpretados automaticamente pelo navegador e traduzidos para as APIs (Application Programming Interface/Interface de Programação de Aplicativo) de acessibilidade nativas do sistema operacional. Quando o conjunto ARIA está presente as tecnologias assistivas são capazes de reconhecer e interagir com os controles personalizados pela JavaScript da mesma forma que fazem com os seus equivalentes de ambiente. Isto tem o potencial de oferecer uma experiência de utilização muito mais consistente do que aquela que foi possível nas gerações anteriores das aplicações da Rede, uma vez que os utilizadores de tecnologias assistivas podem empregar todo o seu conhecimento sobre o funcionamento das aplicações de ambiente, ao usar aquelas que são baseadas na <em>web</em>.</p>

<p><em>Exemplo 3: Marcação para um widget de abas com os atributos ARIA adicionados:</em></p>

Expand Down Expand Up @@ -82,7 +82,7 @@ <h2 id="ARIA">ARIA</h2>

<h3 id="Mudanças_na_apresentação">Mudanças na apresentação</h3>

<p>Mudanças de apresentação dinâmicas agregam o uso de CSS para alterar a aparência do conteúdo (uma borda vermelha em volta de algum dado inválido, ou a troca da cor de fundo de uma <span class="short_text" id="result_box" lang="pt"><span>caixa de seleção já marcada</span></span>), bem como quando um item é exibido, ou escondido.</p>
<p>Mudanças de apresentação dinâmicas agregam o uso de CSS para alterar a aparência do conteúdo (uma borda vermelha em volta de algum dado inválido, ou a troca da cor de fundo de uma caixa de seleção já marcada), bem como quando um item é exibido, ou escondido.</p>

<h4 id="Mudanças_de_estado">Mudanças de estado</h4>

Expand All @@ -96,9 +96,9 @@ <h4 id="Mudanças_de_estado">Mudanças de estado</h4>

<p>(Para uma lista completa de estados ARIA, consulte a <a class="external external-icon" href="http://www.w3.org/TR/wai-aria/states_and_properties">ARIA list of states and properties</a> (lista de estados e propriedades ARIA).</p>

<p>Os desenvolvedores devem dar preferência ao uso dos estados ARIA para indicar a situação atual <span id="result_box" lang="pt"><span>dos elemento</span><span><em>s widgets</em></span> <span>na interface de utilização (UI)</span></span> e os seletores de atributos CSS para alterar a sua aparência, com base nas mudanças desses estados (em vez de usar um roteiro (<em>script</em>) para mudar um nome de classe de um elemento).</p>
<p>Os desenvolvedores devem dar preferência ao uso dos estados ARIA para indicar a situação atual dos elemento<em>s widgets</em> na interface de utilização (UI) e os seletores de atributos CSS para alterar a sua aparência, com base nas mudanças desses estados (em vez de usar um roteiro (<em>script</em>) para mudar um nome de classe de um elemento).</p>

<p>A <em>Open Ajax Alliance</em> (OAA - Aliança <em>OpenAJAX </em>) disponibiliza um exemplo de um seletor de atributos CSS baseado nos estados ARIA (em inglês) - an example of CSS attribute selectors based on ARIA states. O exemplo mostra a <span id="result_box" lang="pt"><span>interface de um editor</span> <span>WYS/WYG</span> <span>com um sistema de</span> <span>menu dinâmico. Os itens</span></span> selecionados no menu, como o tipo de fonte estão, visualmente, distintos dos outros. As partes importantes do exemplo são explicadas a seguir.</p>
<p>A <em>Open Ajax Alliance</em> (OAA - Aliança <em>OpenAJAX </em>) disponibiliza um exemplo de um seletor de atributos CSS baseado nos estados ARIA (em inglês) - an example of CSS attribute selectors based on ARIA states. O exemplo mostra a interface de um editor WYS/WYG com um sistema de menu dinâmico. Os itens selecionados no menu, como o tipo de fonte estão, visualmente, distintos dos outros. As partes importantes do exemplo são explicadas a seguir.</p>

<p>Neste exemplo, a HTML para um menu tem a forma exibida abaixo. Note como, nas linhas 7 e 13, a propriedade (<em>property</em>) <strong><code>aria-checked</code></strong> é usada para declarar o estado da seleção dos itens do menu.</p>

Expand Down Expand Up @@ -132,11 +132,11 @@ <h4 id="Mudanças_de_estado">Mudanças de estado</h4>
}
</pre>

<p>O JavaScript para atualizar a propriedade <strong><code>aria-checked</code></strong> tem a forma exibida no Exemplo 1c. Repare que o roteiro (<em>script</em>) apenas atualiza o atributo <strong><code>aria-checked</code></strong> (linhas 3 e 8); <span id="result_box" lang="pt"><span>também não é necessário</span> <span>adicionar, ou remover,</span> <span>um nome de</span> <span>classe personalizada</span></span>.</p>
<p>O JavaScript para atualizar a propriedade <strong><code>aria-checked</code></strong> tem a forma exibida no Exemplo 1c. Repare que o roteiro (<em>script</em>) apenas atualiza o atributo <strong><code>aria-checked</code></strong> (linhas 3 e 8); também não é necessário adicionar, ou remover, um nome de classe personalizada.</p>

<p><em>Exemplo 1c: A JavaScript atualiza o atributo aria-checked</em>.</p>

<pre class="brush: javascript">var processMenuChoice = function(item) {
<pre class="brush: js">var processMenuChoice = function(item) {
// 'check' the selected item
item.setAttribute('aria-checked', 'true');
// 'un-check' the other menu items
Expand Down Expand Up @@ -184,7 +184,7 @@ <h4 id="Alterações_visuais">Alterações visuais</h4>

<p><em>Exemplo 2c: JavaScript para atualização do atributo aria-checked.</em></p>

<pre class="brush: javascript">var showTip = function(el) {
<pre class="brush: js">var showTip = function(el) {
el.setAttribute('aria-hidden', 'false');
}</pre>

Expand All @@ -196,7 +196,7 @@ <h3 id="Mudança_de_Atributo_(Role)">Mudança de Atributo (<em>Role</em>)</h3>

<p>O papel (<strong><code>role</code></strong>) de um elemento não deve mudar. Em vez disso, remova o elemento original e ocupe seu lugar com um elemento que tenha a função (<strong><code>role</code></strong>) nova.</p>

<p>Por exemplo, considere um <em>widget</em> de edição "<em>inline</em>": um componente que possibilita que seus utilizadores sejam capazes de editar uma parte de um texto, sem mudar toda a composição. Este componente carrega o modo "<em>visualizar</em>", no qual o texto não pode ser modificado, mas pode ser ativado e um modo "<em>editar</em>", no qual o texto pode ser alterado. Se você o desenvolve, pode ter a tentação de implementar o modo "<em>visualizar</em>" com o uso do elemento texto "<em>somente leitura</em>" {{ HTMLElement("input") }}, definindo a sua ARIA<code> </code><strong><code>role</code><code> </code></strong>para <code>button</code> e, em seguida,<span id="result_box" lang="pt"> alternando<span> para o modo</span> <span>"<em>editar</em></span><span>"</span><span>, para tornar</span> <span>o elemento</span> apto à <span>gravação</span></span> e <span class="short_text" id="result_box" lang="pt"><span>removendo</span> <span>o atributo </span></span><strong><code>role</code> </strong><span class="short_text" lang="pt"><span>no modo</span> <span>"editar</span><span>"</span></span> (desde que os elementos {{ HTMLElement("input") }} tenham as suas próprias funções semânticas).</p>
<p>Por exemplo, considere um <em>widget</em> de edição "<em>inline</em>": um componente que possibilita que seus utilizadores sejam capazes de editar uma parte de um texto, sem mudar toda a composição. Este componente carrega o modo "<em>visualizar</em>", no qual o texto não pode ser modificado, mas pode ser ativado e um modo "<em>editar</em>", no qual o texto pode ser alterado. Se você o desenvolve, pode ter a tentação de implementar o modo "<em>visualizar</em>" com o uso do elemento texto "<em>somente leitura</em>" {{ HTMLElement("input") }}, definindo a sua ARIA<code> </code><strong><code>role</code><code> </code></strong>para <code>button</code> e, em seguida, alternando para o modo "<em>editar</em>", para tornar o elemento apto à gravação e removendo o atributo <strong><code>role</code> </strong>no modo "editar" (desde que os elementos {{ HTMLElement("input") }} tenham as suas próprias funções semânticas).</p>

<p>Não faça isso. Em substituição, implemente o modo "<em>visualizar</em>" usando um elemento completamente diferente, tal como uma {{ HTMLElement("div") }}, ou {{ HTMLElement("span") }} com uma <strong><code>role</code></strong> de <code>button</code> e o modo « <em>edit</em> » utilizando um elemento texto {{ HTMLElement("input") }}.</p>

Expand Down
19 changes: 6 additions & 13 deletions files/pt-br/web/accessibility/aria/forms/multipart_labels/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,37 +11,30 @@
- 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>
<h2 id="O_problema">O problema</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>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.</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>&lt;input&gt;.<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>Tanto o atributo <strong>aria-labelledby</strong>, como o <strong>aria-describedby </strong>(<em>aria-descrito por</em>), são especificados no elemento de formulário que será rotulado, por exemplo uma &lt;input&gt;. 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 <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">&lt;input aria-labelledby="labelShutdown shutdownTime shutdownUnit" type="checkbox" /&gt;
&lt;span id="labelShutdown"&gt;Shut down computer after&lt;/span&gt;
&lt;input aria-labelledby="labelShutdown shutdownTime shutdownUnit" id="shutdownTime" type="text" value="10" /&gt;
&lt;span id="shutdownUnit"&gt; minutes&lt;/span&gt;
</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>
<h2 id="Uma_nota_para_quem_usa_JAWS_8">Uma nota para quem usa JAWS 8</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>
<h2 id="Isto_pode_ser_executado_sem_ARIA">Isto pode ser executado sem ARIA?</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>
<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>, simplesmente com a incorporação da entrada (<em>input</em>) no rótulo (<em>label</em>). 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>
Loading