From 1dfbd62861bb8685418f4a3662de4ec051b08daa Mon Sep 17 00:00:00 2001 From: julieng Date: Tue, 13 Sep 2022 18:07:25 +0200 Subject: [PATCH] fix md conversion report --- .../index.html | 16 +- .../aria/forms/multipart_labels/index.html | 19 +- files/pt-br/web/accessibility/aria/index.html | 232 ++++++++---------- .../web/accessibility/aria/roles/index.html | 66 +---- files/pt-br/web/accessibility/index.html | 23 +- 5 files changed, 131 insertions(+), 225 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 84de23a2e02b1b..22a527e3b41e67 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 @@ -52,7 +52,7 @@

ARIA

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 widgets 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 widgets - se podem ser arrastados (draggable), 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.

-

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 web.

+

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 web.

Exemplo 3: Marcação para um widget de abas com os atributos ARIA adicionados:

@@ -82,7 +82,7 @@

ARIA

Mudanças na apresentação

-

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.

+

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.

Mudanças de estado

@@ -96,9 +96,9 @@

Mudanças de estado

(Para uma lista completa de estados ARIA, consulte a ARIA list of states and properties (lista de estados e propriedades ARIA).

-

Os desenvolvedores devem dar preferência ao uso dos estados ARIA para indicar a situação atual dos elementos widgets 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 (script) para mudar um nome de classe de um elemento).

+

Os desenvolvedores devem dar preferência ao uso dos estados ARIA para indicar a situação atual dos elementos widgets 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 (script) para mudar um nome de classe de um elemento).

-

A Open Ajax Alliance (OAA - Aliança OpenAJAX ) 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.

+

A Open Ajax Alliance (OAA - Aliança OpenAJAX ) 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.

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

@@ -132,11 +132,11 @@

Mudanças de estado

} -

O JavaScript para atualizar a propriedade aria-checked tem a forma exibida no Exemplo 1c. Repare que o roteiro (script) apenas atualiza o atributo aria-checked (linhas 3 e 8); também não é necessário adicionar, ou remover, um nome de classe personalizada.

+

O JavaScript para atualizar a propriedade aria-checked tem a forma exibida no Exemplo 1c. Repare que o roteiro (script) apenas atualiza o atributo aria-checked (linhas 3 e 8); também não é necessário adicionar, ou remover, um nome de classe personalizada.

Exemplo 1c: A JavaScript atualiza o atributo aria-checked.

-
var processMenuChoice = function(item) {
+
var processMenuChoice = function(item) {
   // 'check' the selected item
   item.setAttribute('aria-checked', 'true');
   // 'un-check' the other menu items
@@ -184,7 +184,7 @@ 
Alterações visuais

 
 
Exemplo 2c: JavaScript para atualização do atributo aria-checked.

 
-
var showTip = function(el) {
+
var showTip = function(el) {
   el.setAttribute('aria-hidden', 'false');
 }

 
@@ -196,7 +196,7 @@ 
Mudança de Atributo (Role)

 
 
O papel (role) 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 (role) nova.

 
-
Por exemplo, considere um widget de edição "inline": 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 "visualizar", no qual o texto não pode ser modificado, mas pode ser ativado e um modo "editar", no qual o texto pode ser alterado. Se você o desenvolve, pode ter a tentação de implementar o modo "visualizar" com o uso do elemento texto "somente leitura"  {{ HTMLElement("input") }}, definindo a sua ARIA role para button e, em seguida, alternando para o modo "editar", para tornar o elemento apto à gravação e removendo o atributo role no modo "editar" (desde que os elementos {{ HTMLElement("input") }} tenham as suas próprias funções semânticas).

+
Por exemplo, considere um widget de edição "inline": 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 "visualizar", no qual o texto não pode ser modificado, mas pode ser ativado e um modo "editar", no qual o texto pode ser alterado. Se você o desenvolve, pode ter a tentação de implementar o modo "visualizar" com o uso do elemento texto "somente leitura"  {{ HTMLElement("input") }}, definindo a sua ARIA role para button e, em seguida, alternando para o modo "editar", para tornar o elemento apto à gravação e removendo o atributo role no modo "editar" (desde que os elementos {{ HTMLElement("input") }} tenham as suas próprias funções semânticas).

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

 
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
index 36615b8c814e30..902ae4d4b74cda 100644
--- a/files/pt-br/web/accessibility/aria/forms/multipart_labels/index.html
+++ b/files/pt-br/web/accessibility/aria/forms/multipart_labels/index.html
@@ -11,19 +11,17 @@
   - PrecisaDeConteúdo
 translation_of: Web/Accessibility/ARIA/forms/Multipart_labels
 ---
-

-
O problema

+
O problema

 
 
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.

 
 
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.

 
-
A solução está em um atributo ARIA chamado aria-labelledby (aria-etiqueta liderada por). Seu parâmetro é uma cadeia de caracteres (string) que consiste de IDs dos elementos HTML que você quer concatenar em um único nome acessível.

+
A solução está em um atributo ARIA chamado aria-labelledby (aria-etiqueta liderada por). Seu parâmetro é uma cadeia de caracteres (string) que consiste de IDs dos elementos HTML que você quer concatenar em um único nome acessível.

 
-
Tanto o atributo aria-labelledby, como o aria-describedby (aria-descrito por), são especificados no elemento de formulário que será rotulado, por exemplo uma <input>. Em ambas as situações, as ligações do controle da rotulagem for/label, que podem, também, estar presentes, serão substituídas pelo atributo aria-labelledby. Se você oferecer o atributo aria-labelledby 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.

+
Tanto o atributo aria-labelledby, como o aria-describedby (aria-descrito por), são especificados no elemento de formulário que será rotulado, por exemplo uma <input>. Em ambas as situações, as ligações do controle da rotulagem for/label, que podem, também, estar presentes, serão substituídas pelo atributo aria-labelledby. Se você oferecer o atributo aria-labelledby 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.

 
 
Exemplo:

-Desligar o computador após    minutos
 
 
<input aria-labelledby="labelShutdown shutdownTime shutdownUnit" type="checkbox" />
 <span id="labelShutdown">Shut down computer after</span>
@@ -31,17 +29,12 @@ 
O problema

 
-
Uma nota para quem usa  JAWS 8

+
Uma nota para quem usa  JAWS 8

 
 
O JAWS 8.0 tem a sua própria lógica para encontrar os labels e isso o faz, sempre, substituir a caixa de texto com o accessibleName que uma página HTML recebe. Quanto ao JAWS 8, eu ainda não encontrei uma maneira de fazê-lo aceitar o label 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 autores do artigo, são: bunnybooboo, kscarfone, StephenKelly, Kritz, Fredchat, Sheppy, Aaronlev)

 
 
TBD: adicione mais informação de compatibilidade

 
-
Isto pode ser executado sem ARIA?

+
Isto pode ser executado sem ARIA?

 
-
O membro da comunidade Ben Millard apontou, numa publicação em um blogue, que os controles podem ser embutidos nos labels, como mostrado no exemplo acima, usando HTML 4, controls can be embedded in labels as shown in the above example using HTML 4, simplesmente com a incorporação da entrada (input) no rótulo (label). 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 labels com controles de formulários embutidos o uso do atributo aria-labelledby ainda é a melhor abordagem.

-
-
 

-

-
-
 

+
O membro da comunidade Ben Millard apontou, numa publicação em um blogue, que os controles podem ser embutidos nos labels, como mostrado no exemplo acima, usando HTML 4, controls can be embedded in labels as shown in the above example using HTML 4, simplesmente com a incorporação da entrada (input) no rótulo (label). 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 labels com controles de formulários embutidos o uso do atributo aria-labelledby ainda é a melhor abordagem.

diff --git a/files/pt-br/web/accessibility/aria/index.html b/files/pt-br/web/accessibility/aria/index.html
index e02c599f6b35de..1b8dce94ab4167 100644
--- a/files/pt-br/web/accessibility/aria/index.html
+++ b/files/pt-br/web/accessibility/aria/index.html
@@ -14,11 +14,11 @@
   - WAI-ARIA+HTML
 translation_of: Web/Accessibility/ARIA
 ---
-
Aplicações para a Internet Ricas em Acessibilidade - Accessible Rich Internet Applications (ARIA) definem as formas de tornar o conteúdo e as aplicações da Rede Mundial - Web - (especialmente aqueles desenvolvidos com Ajax e JavaScript) mais acessíveis às pessoas com deficiência.

+
Aplicações para a Internet Ricas em Acessibilidade - Accessible Rich Internet Applications (ARIA) definem as formas de tornar o conteúdo e as aplicações da Rede Mundial - Web - (especialmente aqueles desenvolvidos com Ajax e JavaScript) mais acessíveis às pessoas com deficiência.

 
-
Por exemplo, a ARIA permite a marcação de regiões importantes na página (como uma caixa de busca, um cabeçalho, chamadas "pontos de referência") para facilitar a navegação (agilizam a utilização de leitores de tela, por exemplo), JavaScript para widgets, sugestões de preenchimento de formulário e mensagens de erro, atualizações de conteúdo em tempo real e muito mais.

+
Por exemplo, a ARIA permite a marcação de regiões importantes na página (como uma caixa de busca, um cabeçalho, chamadas "pontos de referência") para facilitar a navegação (agilizam a utilização de leitores de tela, por exemplo), JavaScript para widgets, sugestões de preenchimento de formulário e mensagens de erro, atualizações de conteúdo em tempo real e muito mais.

 
-
O ARIA é um conjunto de atributos especiais para a acessibilidade, que pode ser adicionado a qualquer linguagem marcação, mas é especialmente adequado para HTML. O atributo da função define qual é o modelo de objeto (tais como um artigo, um alerta, ou algo que deslize). Há atributos adicionais ARIA que fornecem outras propriedades úteis, como a descrição de uma forma, ou o valor atual em uma barra de progresso.

+
O ARIA é um conjunto de atributos especiais para a acessibilidade, que pode ser adicionado a qualquer linguagem marcação, mas é especialmente adequado para HTML. O atributo da função define qual é o modelo de objeto (tais como um artigo, um alerta, ou algo que deslize). Há atributos adicionais ARIA que fornecem outras propriedades úteis, como a descrição de uma forma, ou o valor atual em uma barra de progresso.

 
 
O conjunto ARIA pode ser implementado nos navegadores mais populares e em leitores de tela. No entanto, as implementações variam e as tecnologias mais antigas não as suportam bem. Utilize um ARIA compatível, ou solicite a alguém que o atualize para as tecnologias mais recentes.

 
@@ -26,123 +26,109 @@
 
Nota: Por favor, participe e torne o ARIA melhor para as pessoas! Não tem muito tempo? Envie sugestões para acessibilidade - lista de correspondência da Mozilla, ou #accessibility canal IRC.

 
 
-
- 
-  
-   
-   
-  
- 
- 
-  
-   
-  
- 
-

-    
Começando em ARIA

-
-    

-     
Apresentando ARIA

-     
Uma rápida introdução sobre como tornar um conteúdo dinâmico acessível com ARIA: Veja, também, o clássico ARIA intro by Gez Lemon, de 2008.

-     
Aplicações Web e ARIA FAQ

-     
Respostas às perguntas frequentes sobre WAI-ARIA e sobre por que é necessário tornar as aplicações web acessíveis.

-     
Vídeos de Leitores de Tela Utilizando ARIA

-     
Veja exemplos reais e simplificados de vídeos, por toda a web, que incluem o "antes" e o "depois" da acessibilidade. 

-     
Usando ARIA com HTML

-     
Um guia prático para desenvolvedores. Traz sugestões sobre quais atributos ARIA usar com os elementos HTML. As sugestões são baseadas em realidades implementadas.

-    

-
-    
Melhorias Simples ARIA

-
-    

-     
Melhorando a Navegação nas Páginas com os Pontos de Referência ARIA

-     
Uma deliciosa introdução à utilização de pontos de referência para beneficiar a navegação pelas páginas da internete por quem utiliza os leitores de tela ARIA. Veja, também, as notas da implementação de pontos de referência ARIA   e exemplos de situações reais (atualizadas a partir de 11 de julho).

-     
Melhorando a Acessibilidade nos Formulários

-     
O conjunto ARIA não é, apenas, para conteúdo dinâmico! Aprenda como aperfeiçoar a acessibilidade nos formulários HTML utilizando alguns atributos adicionais ARIA. 

-     
Regiões dinâmicas (trabalho em progresso)

-     
As regiões dinâmicas oferecem sugestões, aos leitores de tela, sobre como controlar as alterações nos conteúdos das páginas.

-     
Utilizando a ARIA Regiões Dinâmicas para Apresentar as Alterações no Conteúdo

-     
Um resumo sobre as regiões dinâmicas, pelos criadores do programa de leitura de tela  JAWS. Note que as regiões dinâmicas também são suportadas pela NVDA, no Firefox e VoiceOver, com Safari.

-    

-
-    
ARIA para Widgets Roteirizados

-
-    

-     
Navegação pelo Teclado e Foco para Widgets em JavaScript

-     
A primeira etapa do desenvolvimento de um widget acessível com JavaScript é tornà-lo navegável através do teclado. Este artigo descreve as fases dessa operação. O artigo Yahoo! Administrando focos também é de grande ajuda.

-     
Guia de Estilo para Navegação através do Teclado

-     
Um desafio em ARIA é conseguir que os desenvolvedores executem procedimentos estáveis - claramente melhores para quem os utiliza. Este guia de estilos descreve a interface de teclado para os widgets comuns.

-    

-
-    
Recursos ARIA

-
-    

-     
A Técnica na Execução de Widgets, Tutoriais e Exemplos

-     
Precisa de um controle dezlizante, um menu, ou algum outro tipo de widget? Encontre, aqui, as maneiras de obtê-los.

-     
Bibliotecas  JavaScript UI com ARIA habilitada

-     
Se você está começando um projeto novo, escolha uma biblioteca UI para widget com suporte a ARIA já embutido. Atenção: isto é de 2009 -- este conteúdo deve ser movido para uma página MDN, onde pode ser atualizado.

-     
Acessibilidade em HTML5 e Aplicações Ricas - Materiais de Oficina CSUN 2012

-     
Inclua apresentações de eslaides e exemplos.

-    

-   		
-    
Lista de Correspondência

-
-    

-     
ARIA Livre no Grupo Google

-     
Área de perguntas sobre ARIA, bem como de fazer sugestões para melhorar a documentação ARIA encontrada nestas páginas.

-    

-
-    
Blogs

-
-    
As informações ARIA nos blogues tendem a ficar desatualizadas rapidamente. Sem contar que há outras boas informações fora deles, de desenvolvedores que estão tornando o conjunto Aria funcional hoje.

-
-    
Paciello Group

-
-    
Cultura Acessível

-
-    
Encontrando Erros

-
-    
Erros nos arquivos ARIA em navegadores, leitores de telas e bibliotecas JavaScript.

-
-    
Exemplos

-
-    

-     
Exemplos de Bibliotecas ARIA

-     
Um conjunto de exemplos de arquivos das bibliotecas base, com os quais fica muito fácil aprender.

-     
Demonstração de Biblioteca para a Accessibilidade JS em Widget 

-     
Dojo, jQuery, Fluid, YUI

-    

-
-    

-     
Correio Eletrônico Yahoo!

-     
A Yahoo! colocou tudo reunido com o Yahoo! e-mail, uma aplicação para a web que parece um aplicativo nativo. E funciona muito bem. Em uma análise do e-mail Yahoo! pelo leitor de tela, Marco Zehe diz: "Que o bom trabalho permaneça!".

-    

-
-    

-     
Pesquisa Yahoo!

-     
A Yahoo! tem feito um trabalho incrível no avanço do ARIA, aplicando suas posibilidades de forma plena e compartilhando suas técnicas. A Pesquisa Yahoo! usa uma combinação de pontos de referência ARIA, regiões dinâmicas e widgets.

-    

-
-    
Esforços pela Padronização

-
-    

-     
Uma Visão Geral das Atividades WAI-ARIA na W3C

-     
Uma visão geral oficial dos esforços de padronização da WAI-ARIA pela Iniciativa de tornar a Web Acessível (Web Accessibility Initiative - WAI)

-     
Especificações WAI-ARIA

-     
As especificações W3C são referências úteis. Note que, nesta fase, é importante testar a compatibilidade, uma vez que as implementações ainda estão inconsistentes.

-     
Práticas Oficiais WAI-ARIA

-     
Conforme as especificações da W3C WAI-ARIA, a excelênca nas práticas oficiais representam o futuro ideal - o dia em que todos os autores possam trabalhar em suas realizações sobre uma base ARIA consistente em navegadores e leitores de tela. A documentação W3C proporcionará a você uma visão aprofundada de ARIA.

-     

-     Por enquanto, desenvolvedores web que implementem ARIA devem priorizar a compatibilidade. Use as melhores documentações das práticas e exemplos baseados em implementações atuais.

-     
A Força-Tarefa da Acessibilidade Open AJAX

-     
Os centros de pesquisa Open AJAX envolvem ferramentas de desenvolvimento, modelos de arquivos e testes automatizados para ARIA.

-     
Em Construção: Técnicas ARIA  WCAG 2.0

-     
A comunidade necessita de um conjunto completo de técnicas  WCAG voltadas para WAI-ARIA + HTML, a fim de que as organizações possam estar confortáveis ao proclamar que o teor de suas ARIAs habilitadas é compatível com essas técnicas WCAG. É muito importante que as regulamentações, ou políticas, sejam baseadas em WCAG.

-    

-   

-    
-
-    

-     
Accessibilidade, AJAX, JavaScript

-    

-   

+
Começando em ARIA

+
+

+  
Apresentando ARIA

+  
Uma rápida introdução sobre como tornar um conteúdo dinâmico acessível com ARIA: Veja, também, o clássico ARIA intro by Gez Lemon, de 2008.

+  
Aplicações Web e ARIA FAQ

+  
Respostas às perguntas frequentes sobre WAI-ARIA e sobre por que é necessário tornar as aplicações web acessíveis.

+  
Vídeos de Leitores de Tela Utilizando ARIA

+  
Veja exemplos reais e simplificados de vídeos, por toda a web, que incluem o "antes" e o "depois" da acessibilidade. 

+  
Usando ARIA com HTML

+  
Um guia prático para desenvolvedores. Traz sugestões sobre quais atributos ARIA usar com os elementos HTML. As sugestões são baseadas em realidades implementadas.

+

+
+
Melhorias Simples ARIA

+
+

+  
Melhorando a Navegação nas Páginas com os Pontos de Referência ARIA

+  
Uma deliciosa introdução à utilização de pontos de referência para beneficiar a navegação pelas páginas da internete por quem utiliza os leitores de tela ARIA. Veja, também, as notas da implementação de pontos de referência ARIA   e exemplos de situações reais (atualizadas a partir de 11 de julho).

+  
Melhorando a Acessibilidade nos Formulários

+  
O conjunto ARIA não é, apenas, para conteúdo dinâmico! Aprenda como aperfeiçoar a acessibilidade nos formulários HTML utilizando alguns atributos adicionais ARIA. 

+  
Regiões dinâmicas (trabalho em progresso)

+  
As regiões dinâmicas oferecem sugestões, aos leitores de tela, sobre como controlar as alterações nos conteúdos das páginas.

+  
Utilizando a ARIA Regiões Dinâmicas para Apresentar as Alterações no Conteúdo

+  
Um resumo sobre as regiões dinâmicas, pelos criadores do programa de leitura de tela  JAWS. Note que as regiões dinâmicas também são suportadas pela NVDA, no Firefox e VoiceOver, com Safari.

+

+
+
ARIA para Widgets Roteirizados

+
+

+  
Navegação pelo Teclado e Foco para Widgets em JavaScript

+  
A primeira etapa do desenvolvimento de um widget acessível com JavaScript é tornà-lo navegável através do teclado. Este artigo descreve as fases dessa operação. O artigo Yahoo! Administrando focos também é de grande ajuda.

+  
Guia de Estilo para Navegação através do Teclado

+  
Um desafio em ARIA é conseguir que os desenvolvedores executem procedimentos estáveis - claramente melhores para quem os utiliza. Este guia de estilos descreve a interface de teclado para os widgets comuns.

+

+
+
Recursos ARIA

+
+

+  
A Técnica na Execução de Widgets, Tutoriais e Exemplos

+  
Precisa de um controle dezlizante, um menu, ou algum outro tipo de widget? Encontre, aqui, as maneiras de obtê-los.

+  
Bibliotecas  JavaScript UI com ARIA habilitada

+  
Se você está começando um projeto novo, escolha uma biblioteca UI para widget com suporte a ARIA já embutido. Atenção: isto é de 2009 -- este conteúdo deve ser movido para uma página MDN, onde pode ser atualizado.

+  
Acessibilidade em HTML5 e Aplicações Ricas - Materiais de Oficina CSUN 2012

+  
Inclua apresentações de eslaides e exemplos.

+

+
+
Lista de Correspondência

+
+

+  
ARIA Livre no Grupo Google

+  
Área de perguntas sobre ARIA, bem como de fazer sugestões para melhorar a documentação ARIA encontrada nestas páginas.

+

+
+
Blogs

+
+
As informações ARIA nos blogues tendem a ficar desatualizadas rapidamente. Sem contar que há outras boas informações fora deles, de desenvolvedores que estão tornando o conjunto Aria funcional hoje.

+
+
Paciello Group

+
+
Cultura Acessível

+
+
Encontrando Erros

+
+
Erros nos arquivos ARIA em navegadores, leitores de telas e bibliotecas JavaScript.

+
+
Exemplos

+
+

+  
Exemplos de Bibliotecas ARIA

+  
Um conjunto de exemplos de arquivos das bibliotecas base, com os quais fica muito fácil aprender.

+  
Demonstração de Biblioteca para a Accessibilidade JS em Widget 

+  
Dojo, jQuery, Fluid, YUI

+

+
+

+  
Correio Eletrônico Yahoo!

+  
A Yahoo! colocou tudo reunido com o Yahoo! e-mail, uma aplicação para a web que parece um aplicativo nativo. E funciona muito bem. Em uma análise do e-mail Yahoo! pelo leitor de tela, Marco Zehe diz: "Que o bom trabalho permaneça!".

+

+
+

+  
Pesquisa Yahoo!

+  
A Yahoo! tem feito um trabalho incrível no avanço do ARIA, aplicando suas posibilidades de forma plena e compartilhando suas técnicas. A Pesquisa Yahoo! usa uma combinação de pontos de referência ARIA, regiões dinâmicas e widgets.

+

+
+
Esforços pela Padronização

+
+

+  
Uma Visão Geral das Atividades WAI-ARIA na W3C

+  
Uma visão geral oficial dos esforços de padronização da WAI-ARIA pela Iniciativa de tornar a Web Acessível (Web Accessibility Initiative - WAI)

+  
Especificações WAI-ARIA

+  
As especificações W3C são referências úteis. Note que, nesta fase, é importante testar a compatibilidade, uma vez que as implementações ainda estão inconsistentes.

+  
Práticas Oficiais WAI-ARIA

+  
Conforme as especificações da W3C WAI-ARIA, a excelênca nas práticas oficiais representam o futuro ideal - o dia em que todos os autores possam trabalhar em suas realizações sobre uma base ARIA consistente em navegadores e leitores de tela. A documentação W3C proporcionará a você uma visão aprofundada de ARIA.

+  

+  Por enquanto, desenvolvedores web que implementem ARIA devem priorizar a compatibilidade. Use as melhores documentações das práticas e exemplos baseados em implementações atuais.

+  
A Força-Tarefa da Acessibilidade Open AJAX

+  
Os centros de pesquisa Open AJAX envolvem ferramentas de desenvolvimento, modelos de arquivos e testes automatizados para ARIA.

+  
Em Construção: Técnicas ARIA  WCAG 2.0

+  
A comunidade necessita de um conjunto completo de técnicas  WCAG voltadas para WAI-ARIA + HTML, a fim de que as organizações possam estar confortáveis ao proclamar que o teor de suas ARIAs habilitadas é compatível com essas técnicas WCAG. É muito importante que as regulamentações, ou políticas, sejam baseadas em WCAG.

+

+
+
+
+
diff --git a/files/pt-br/web/accessibility/aria/roles/index.html b/files/pt-br/web/accessibility/aria/roles/index.html
index 4c4c5fffd5900f..30b8334b3b6035 100644
--- a/files/pt-br/web/accessibility/aria/roles/index.html
+++ b/files/pt-br/web/accessibility/aria/roles/index.html
@@ -11,68 +11,4 @@
 ---
 
Essa página lista referências às atribuções WAI-ARIA discutidos no MDN. Para visualizar a lista completa, veja Using ARIA: Roles, States, and Properties

 
-
{{SubpagesWithSummaries}}

-
-
+
{{SubpagesWithSummaries}}

\ No newline at end of file
diff --git a/files/pt-br/web/accessibility/index.html b/files/pt-br/web/accessibility/index.html
index d8db8265d23fa5..663de3e25e64c5 100644
--- a/files/pt-br/web/accessibility/index.html
+++ b/files/pt-br/web/accessibility/index.html
@@ -10,15 +10,13 @@
 translation_of: Web/Accessibility
 original_slug: Web/Acessibilidade
 ---
-
Acessiblidade no desenvolvimento Web significa permitir que o máximo possível de pessoas possa acessar os sites da web mesmo quando suas habilidades são limitadas de alguma forma. Aqui nós fornecemos informações sobre o desenvolvimento de conteúdo acessível.

+
Acessiblidade no desenvolvimento Web significa permitir que o máximo possível de pessoas possa acessar os sites da web mesmo quando suas habilidades são limitadas de alguma forma. Aqui nós fornecemos informações sobre o desenvolvimento de conteúdo acessível.

 
-
"A palavra Acessibilidade é, frequentemente, usada para descrever facilidades ou assistências às pessoas com necessidades especiais, como em acessível para cadeirantes. Isto pode se estender para o Sistema Braille, rampas para cadeirantes, sinais sonoros em passagens de pedestres, modelos de páginas e assim por diante". Acessibilidade na Wikipedia

+
"A palavra Acessibilidade é, frequentemente, usada para descrever facilidades ou assistências às pessoas com necessidades especiais, como em acessível para cadeirantes. Isto pode se estender para o Sistema Braille, rampas para cadeirantes, sinais sonoros em passagens de pedestres, modelos de páginas e assim por diante". Acessibilidade na Wikipedia

 
-
"A Web é, fundamentalmente, projetada para funcionar para todas as pessoas, independentemente de máquina, programas, língua, cultura, localização ou capacidade física ou mental de seus utilizadores. Quando a web atende a esses requisitos, ela se torna acessível a pessoas com dificuldades auditivas, motoras, visuais e cognitivas". W3C - Acessibilidade

+
"A Web é, fundamentalmente, projetada para funcionar para todas as pessoas, independentemente de máquina, programas, língua, cultura, localização ou capacidade física ou mental de seus utilizadores. Quando a web atende a esses requisitos, ela se torna acessível a pessoas com dificuldades auditivas, motoras, visuais e cognitivas". W3C - Acessibilidade

 
-

-

-
Documentação

+
Documentação

 
 

  
Desenvolvimento Web

@@ -31,22 +29,15 @@ 
Documentação
  
Esse documento fornece uma breve lista das necessidades da acessibilidade para desenvolvedores de aplicativos móveis.

 

 
-

-
-

-
Ferramentas para desenvolvedores web

+
Ferramentas para desenvolvedores web

 
 
 
-
-
-
Outras páginas úteis

+
Outras páginas úteis

 
 
-

-