diff options
Diffstat (limited to 'files/pt-br/web')
8 files changed, 10 insertions, 41 deletions
diff --git a/files/pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html index 1bd9eb9d44..c532e8f7f1 100644 --- a/files/pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html +++ b/files/pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html @@ -98,11 +98,11 @@ original_slug: Web/Acessibilidade/An_overview_of_accessible_web_applications_and <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>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) - <a class="external" href="http://www.oaa-accessibility.org/example/25/">an example of CSS attribute selectors based on ARIA states</a>. 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 <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>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> -<p><em>Exemplo 1a: HTML para um menu selecionável (adaptado da <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>).</em></p> +<p><em>Exemplo 1a: HTML para um menu selecionável.</em></p> <pre class="brush: html"><ul id="fontMenu" class="menu" role="menu" aria-hidden="true"> <li id="sans-serif" @@ -122,7 +122,7 @@ original_slug: Web/Acessibilidade/An_overview_of_accessible_web_applications_and <p>A CSS usada para alterar a aparência do item selecionado é mostrada no Exemplo 1b. Perceba que não existe um nome de classe (<em>classname</em>) de personalização, apenas o estado do atributo <strong><code>aria-checked</code></strong>, na linha 1.</p> -<p><em>Exemplo 1b: Seletor baseado em atributo para indicar um estado (da <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>).</em></p> +<p><em>Exemplo 1b: Seletor baseado em atributo para indicar um estado.</em></p> <pre class="brush: css">li[aria-checked="true"] { font-weight: bold; @@ -134,7 +134,7 @@ original_slug: Web/Acessibilidade/An_overview_of_accessible_web_applications_and <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><em>Exemplo 1c: A JavaScript atualiza o atributo aria-checked (baseado em <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>)</em>.</p> +<p><em>Exemplo 1c: A JavaScript atualiza o atributo aria-checked</em>.</p> <pre class="brush: javascript">var processMenuChoice = function(item) { // 'check' the selected item @@ -153,11 +153,11 @@ original_slug: Web/Acessibilidade/An_overview_of_accessible_web_applications_and <p>Quando o conteúdo visual é alterado (isto é, um elemento é escondido, ou mostrado), os desenvolvedores devem mudar o valor da propriedade <strong><code>aria-hidden</code></strong>. As técnicas descritas acima devem ser usadas, a fim de declarar a CSS para ocultar um elemento utilizando<code><em> </em></code><em><code>display:none</code></em><code> </code>(<em>exibir:nenhum</em>).</p> -<p>O sítio da <em>Open Ajax Alliance</em> fornece um exemplo de uma dica de tela (<em>tooltip</em>) que utiliza o estado aria-hidden para controlar a sua visibilidade (em inglês) <a class="external" href="http://www.oaa-accessibility.org/example/39/">an example of a tooltip that uses <strong><code>aria-hidden</code></strong> to control the visibility of the tooltip</a>. O exemplo mostra um formulário <em>web</em> simples, com caixas de dicas de tela contendo instruções associadas aos campos de entrada. As partes relevantes deste exemplo estão explicadas abaixo.</p> +<p>O sítio da <em>Open Ajax Alliance</em> fornece um exemplo de uma dica de tela (<em>tooltip</em>) que utiliza o estado aria-hidden para controlar a sua visibilidade (em inglês) an example of a tooltip that uses <strong><code>aria-hidden</code></strong> to control the visibility of the tooltip. O exemplo mostra um formulário <em>web</em> simples, com caixas de dicas de tela contendo instruções associadas aos campos de entrada. As partes relevantes deste exemplo estão explicadas abaixo.</p> <p>Aqui, a HTML para a dica de tela tem a forma exibida no Exemplo 2a. A linha 9 configura o estado da <strong><code>aria-hidden</code></strong> para <code>true</code>.</p> -<p><em>Exemplo 2a: HTML para dicas de tela (adaptado de <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> +<p><em>Exemplo 2a: HTML para dicas de tela.</em></p> <pre class="brush: html"><div class="text"> <label id="tp1-label" for="first">First Name:</label> @@ -173,7 +173,7 @@ original_slug: Web/Acessibilidade/An_overview_of_accessible_web_applications_and <p>A CSS para esta marcação está explicada no Exemplo 2b. Veja que não há uso de <em>classname</em> personalizada, apenas o estado do atributo <strong><code>aria-hidden</code></strong>, na linha 1.</p> -<p><em>Exemplo 2b: Seletor basedo em atributo para indicar um estado (de <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> +<p><em>Exemplo 2b: Seletor basedo em atributo para indicar um estado.</em></p> <pre class="brush: css">div.tooltip[aria-hidden="true"] { display: none; @@ -182,7 +182,7 @@ original_slug: Web/Acessibilidade/An_overview_of_accessible_web_applications_and <p>O JavaScript que atualiza a propriedade <strong><code>aria-hidden</code></strong> tem a forma exposta no Exemplo 2c. Observe que o roteiro apenas atualiza o atributo <strong><code>aria-hidden</code></strong> (linha 2); não é necessário adicionar, nem remover, uma <em>classname</em> customizada.</p> -<p><em>Exemplo 2c: JavaScript para atualização do atributo aria-checked (com base em <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> +<p><em>Exemplo 2c: JavaScript para atualização do atributo aria-checked.</em></p> <pre class="brush: javascript">var showTip = function(el) { el.setAttribute('aria-hidden', 'false'); diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html index 1530013453..8a8d8398a8 100644 --- a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html +++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html @@ -105,13 +105,6 @@ document.getElementById("formInstruction").setAttribute("role", "alert");</pre> <pre class="brush: js">// removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert:(Remover a classe "<em>hidden</em>" faz o leitor de tela anunciar o alerta) document.getElementById("expirationWarning").className = ""; </pre> -<h4 id="Exemplos_de_Trabalhos">Exemplos de Trabalhos:</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/example/1/">Exemplo de funções com caixas de alerta ARIA - Alert role example using an ARIA alert box</a></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/alertdialog1/">Exemplo de alerta utilizando uma caixa de diálogo modal ARIA - Alert example using a modal ARIA dialog box</a></li> -</ul> - <h3 id="Notas">Notas:</h3> <ul> diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html index b97f335b27..1fdbd2300b 100644 --- a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html +++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html @@ -53,13 +53,6 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedb retornará você para a página principal</div> </pre> -<h3 id="Exemplos_funcionando">Exemplos funcionando:</h3> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/checkbox1/">Exemplo checkbox</a> usa <code>aria-describedby</code></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/tooltip1/">Exemplo tooltip</a> usa <code>aria-describedby</code></li> -</ul> - <h3 id="Notas">Notas</h3> <ul> diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html index 83c43f6522..eed5ab0d20 100644 --- a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html +++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html @@ -124,13 +124,6 @@ ou a uma preparação mais inerte prescrito para o alívio mental do paciente do </div> </pre> -<h4 id="Exemplos_Funcionais">Exemplos Funcionais:</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/button2/">Exemplo de um button</a> usando <code>aria-labelledby</code></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/combobox1/">Exemplo de um combobox</a> usando <code>aria-labelledby</code></li> -</ul> - <h3 id="Notas">Notas </h3> <p>O mapeamento mais comum de uma diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html index 1d7eb8df91..85f4ba1e11 100644 --- a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html +++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html @@ -45,10 +45,6 @@ original_slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_o_atributo_aria-req </form> </pre> -<h4 id="Exemplos_de_trabalho">Exemplos de trabalho:</h4> - -<p><a class="external" href="http://www.oaa-accessibility.org/examplep/tooltip1/">Exemplo de Tooltip </a> (inclui o uso do atributo <code>aria-required</code>)</p> - <h3 id="Notas">Notas </h3> <h3 id="Usado_em_ARIA_roles">Usado em ARIA roles</h3> diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html index 7ed48ef085..de0b43d68f 100644 --- a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html +++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html @@ -95,12 +95,6 @@ var updateSlider = function (newValue) { }; </pre> -<h4 id="Working_Examples">Working Examples:</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/">Slider example</a></li> -</ul> - <h3 id="Notas">Notas </h3> <h3 id="Atributos_ARIA_usados">Atributos ARIA usados</h3> diff --git a/files/pt-br/web/accessibility/aria/aria_test_cases/index.html b/files/pt-br/web/accessibility/aria/aria_test_cases/index.html index 22940acf65..dfad97191f 100644 --- a/files/pt-br/web/accessibility/aria/aria_test_cases/index.html +++ b/files/pt-br/web/accessibility/aria/aria_test_cases/index.html @@ -7,7 +7,7 @@ translation_of: Web/Accessibility/ARIA/ARIA_Test_Cases <div class="warning">A informação dessa página encontra-se desatualizada: sua última atualização foi em Novmebro de 2010. No entanto, as informações ainad podem ser úteis para alguns leitores.<br> <br> -Para ver exemplos atualizados, entre em <a class="external" href="http://oaa-accessibility.org/examples">OpenAjaxAlliance ARIA examples page</a>.</div> +Para ver exemplos atualizados, entre em OpenAjaxAlliance ARIA examples page.</div> <p>For each example we test the "Expected" results with assistive technologies, for each browser that AT supports WAI-ARIA in. Where a failure occurs we will test the browser for API incorrectness, using tools such as MSAA Inspect. This must be done in order to determine where to file a bug (browser or AT).</p> diff --git a/files/pt-br/web/accessibility/aria/forms/basic_form_hints/index.html b/files/pt-br/web/accessibility/aria/forms/basic_form_hints/index.html index 534443ab1b..46045112fb 100644 --- a/files/pt-br/web/accessibility/aria/forms/basic_form_hints/index.html +++ b/files/pt-br/web/accessibility/aria/forms/basic_form_hints/index.html @@ -42,7 +42,7 @@ original_slug: Web/Accessibility/ARIA/forms/Dicas_básicas_de_form <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> +<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> |