1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
---
title: ARIA
slug: Web/Accessibility/ARIA
tags:
- AJAX
- ARIA
- Accessibility
- Acessibilidade
- Introdução
- JavaScript ARIA
- TopicStub
- W3C
- WAI-ARIA
- WAI-ARIA+HTML
translation_of: Web/Accessibility/ARIA
---
<p><span class="seoSummary">Aplicações para a Internet Ricas em Acessibilidade - Accessible</span><span lang="pt"> <span class="hps">Rich Internet Applications</span> <span class="hps">(ARIA</span><span>) definem as</span> <span class="hps">formas de tornar</span> <span class="hps">o conteúdo</span> <span class="hps">e as</span> <span class="hps">aplicações da Rede Mundial - <em>Web</em> -</span> <span class="hps">(especialmente aqueles</span> <span class="hps">desenvolvidos com</span> <span class="hps">Ajax e</span> <span class="hps">JavaScript)</span> <span class="hps">mais acessíveis às pessoas</span> <span class="hps">com deficiência.</span></span></p>
<p><span lang="pt"><span class="hps">Por exemplo,</span> a <span class="hps">ARIA</span> <span class="hps">permite</span> 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),<span> </span><span class="hps">JavaScript</span><span> para <em>widgets</em>, sugestões de preenchimento</span> <span class="hps">de formulário e</span> <span class="hps">mensagens de erro,</span> <span class="hps">atualizações de conteúdo</span> <span class="hps">em tempo real</span> <span class="hps">e muito mais.</span></span></p>
<p><span id="result_box" lang="pt"><span class="hps">O ARIA</span> <span class="hps">é um conjunto de</span> <span class="hps">atributos especiais para a acessibilidade,</span><span class="hps"> que</span> <span class="hps">pode ser adicionado a</span> <span class="hps">qualquer linguagem marcação</span><span>, mas</span> <span class="hps">é especialmente adequado para</span> <span class="hps">HTML.</span> <span class="hps">O atributo</span> <span class="hps">da função define</span><span class="hps"> qual é o</span><span class="hps"> modelo de</span> <span class="hps">objeto</span> <span class="hps">(tais como</span> <span class="hps">um artigo</span><span>, um alerta,</span> <span class="hps">ou</span> algo que <span class="hps">deslize)</span><span>.</span> <span class="hps">Há atributos adicionais</span> <span class="hps">ARIA que</span> <span class="hps">fornecem</span> <span class="hps">outras propriedades</span> <span class="hps">úteis, como</span> <span class="hps">a descrição</span> <span class="hps">de uma</span> <span class="hps">forma, ou</span> <span class="hps">o valor atual em</span> <span class="hps">uma barra de progresso</span><span>.</span></span></p>
<p>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.</p>
<div class="note">
<p><strong>Nota</strong>: Por favor, participe e torne o ARIA melhor para as pessoas! Não tem muito tempo? Envie sugestões para <a href="https://lists.mozilla.org/listinfo/accessibility">acessibilidade</a> <a href="https://lists.mozilla.org/listinfo/accessibility">- lista de correspondência da Mozilla</a>, ou #<em>accessibility </em><a href="https://wiki.mozilla.org/IRC">canal IRC</a><em>.</em></p>
</div>
<table class="topicpage-table">
<tbody>
<tr>
<td>
<h3 id="Documentation" name="Documentation">Começando em ARIA</h3>
<dl>
<dt><a href="/en-US/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets" title="An overview of accessible web applications and widgets">Apresentando ARIA</a></dt>
<dd>Uma rápida introdução sobre como tornar um conteúdo dinâmico acessível com ARIA: Veja, também, o clássico <a class="external" href="http://dev.opera.com/articles/view/introduction-to-wai-aria/">ARIA intro by Gez Lemon</a>, de 2008.</dd>
<dt><a href="/en-US/docs/Accessibility/ARIA/Web_applications_and_ARIA_FAQ" title="https://developer.mozilla.org/en-US/docs/Accessibility/Web_applications_and_ARIA_FAQ">Aplicações<em> Web</em> e ARIA FAQ</a></dt>
<dd>Respostas às perguntas frequentes sobre WAI-ARIA e sobre por que é necessário tornar as aplicações <em>web</em> acessíveis.</dd>
<dt><a class="external" href="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">Vídeos de Leitores de Tela Utilizando ARIA</a></dt>
<dd>Veja exemplos reais e simplificados de vídeos, por toda a <em>web</em>, que incluem o "antes" e o "depois" da acessibilidade. </dd>
<dt><a class="external" href="http://dvcs.w3.org/hg/aria-unofficial/raw-file/tip/index.html">Usando ARIA com HTML</a></dt>
<dd>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.</dd>
</dl>
<h3 id="Melhorias_Simples_ARIA">Melhorias Simples ARIA</h3>
<dl>
<dt><a class="external" href="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/" rel="external">Melhorando a Navegação nas Páginas com os Pontos de Referência ARIA</a></dt>
<dd>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. <a class="external" href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/" rel="external">Veja, também, as notas da implementação de pontos de referência ARIA</a> <a class="external" href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/" rel="external"> </a> e exemplos de situações reais (atualizadas a partir de 11 de julho).</dd>
<dt><a href="/en-US/docs/ARIA/forms" rel="internal" title="/en-US/docs/ARIA/forms">Melhorando a Acessibilidade nos Formulários</a></dt>
<dd>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. </dd>
<dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions" title="Live Regions">Regiões dinâmicas (trabalho em progresso)</a></dt>
<dd>As regiões dinâmicas oferecem sugestões, aos leitores de tela, sobre como controlar as alterações nos conteúdos das páginas.</dd>
<dt><a class="external" href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm" rel="external">Utilizando a ARIA Regiões Dinâmicas para Apresentar as Alterações no Conteúdo</a></dt>
<dd>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.</dd>
</dl>
<h3 id="ARIA_para_Widgets_Roteirizados">ARIA para <em>Widgets </em>Roteirizados</h3>
<dl>
<dt><a class="external" href="/en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets">Navegação pelo Teclado e Foco para <em>Widgets</em> em JavaScript</a></dt>
<dd>A primeira etapa do desenvolvimento de um <em>widget</em> acessível com JavaScript é tornà-lo navegável através do teclado. Este artigo descreve as fases dessa operação. O <a class="external" href="http://www.yuiblog.com/blog/2009/02/23/managing-focus/">artigo Yahoo! Administrando focos</a> também é de grande ajuda.</dd>
<dt><a class="external" href="http://access.aol.com/dhtml-style-guide-working-group/">Guia de Estilo para Navegação através do Teclado</a></dt>
<dd>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 <em>widgets</em> comuns.</dd>
</dl>
<h3 id="Recursos_ARIA">Recursos ARIA</h3>
<dl>
<dt><a href="/en-US/docs/Accessibility/ARIA/widgets/overview" title="en-US/docs/aria/widgets/overview">A Técnica na Execução de <em>Widgets</em>, Tutoriais e Exemplos</a></dt>
<dd>Precisa de um controle dezlizante, um menu, ou algum outro tipo de <em>widget</em>? Encontre, aqui, as maneiras de obtê-los.</dd>
<dt><a class="external" href="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/">Bibliotecas JavaScript UI com ARIA habilitada</a></dt>
<dd>Se você está começando um projeto novo, escolha uma biblioteca UI para <em>widget</em> 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.</dd>
<dt><a class="external" href="http://dl.dropbox.com/u/573324/CSUN2012/index.html">Acessibilidade em HTML5 e Aplicações Ricas - Materiais de Oficina CSUN 2012</a></dt>
<dd>Inclua apresentações de eslaides e exemplos.</dd>
</dl>
</td>
<td>
<h3 id="Community" name="Community">Lista de Correspondência</h3>
<dl>
<dt><a class="link-https" href="https://groups.google.com/forum/#!forum/free-aria">ARIA Livre no Grupo Google</a></dt>
<dd>Área de perguntas sobre ARIA, bem como de fazer sugestões para melhorar a documentação ARIA encontrada nestas páginas.</dd>
</dl>
<h3 id="Community" name="Community">Blogs</h3>
<p>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.</p>
<p><a class="external" href="http://www.paciellogroup.com/blog/category/wai-aria/">Paciello Group</a></p>
<p><a class="external" href="http://www.accessibleculture.org/tag/wai-aria/">Cultura Acessível</a></p>
<h3 id="Encontrando_Erros">Encontrando Erros</h3>
<p><a href="/en/Accessibility/ARIA/How_to_file_ARIA-related_bugs" title="https://developer.mozilla.org/en/ARIA/How_to_file_ARIA-related_bugs">Erros nos arquivos ARIA em navegadores, leitores de telas e bibliotecas JavaScript</a>.</p>
<h3 id="Exemplos">Exemplos</h3>
<dl>
<dt><a class="external" href="/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases" title="en-US/docs/ARIA/examples">Exemplos de Bibliotecas ARIA</a></dt>
<dd>Um conjunto de exemplos de arquivos das bibliotecas base, com os quais fica muito fácil aprender.</dd>
<dt><span class="external">Demonstração de Biblioteca para a Accessibilidade JS em <em>Widget</em> </span></dt>
<dd><a class="external" href="http://dojotoolkit.org/widgets" title="http://dojotoolkit.org/widgets">Dojo</a>, <a class="external" href="http://hanshillen.github.com/jqtest/" title="http://hanshillen.github.com/jqtest/">jQuery</a>, <a class="external" href="http://wiki.fluidproject.org/display/fluid/Components">Fluid</a>, <a class="external" href="http://yuilibrary.com/gallery/">YUI</a></dd>
</dl>
<dl>
<dt><a class="external" href="http://mail.yahoo.com">Correio Eletrônico Yahoo!</a></dt>
<dd>A Yahoo! colocou tudo reunido com o Yahoo! <em>e-mail</em>, uma aplicação para a <em>web</em> que parece um aplicativo nativo. E funciona muito bem. Em uma <a class="external" href="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/">análise do <em>e-mail</em> Yahoo!</a> pelo leitor de tela, Marco Zehe diz: "Que o bom trabalho permaneça!".</dd>
</dl>
<dl>
<dt><a class="external" href="http://search.yahoo.com">Pesquisa Yahoo!</a></dt>
<dd>A Yahoo! tem feito um trabalho incrível no avanço do ARIA, aplicando suas posibilidades de forma plena e <a class="external" href="http://ycorpblog.com/2011/03/23/searchdirect/">compartilhando suas técnicas</a>. A Pesquisa Yahoo! usa uma combinação de pontos de referência ARIA, regiões dinâmicas e <em>widgets</em>.</dd>
</dl>
<h3 id="Esforços_pela_Padronização">Esforços pela Padronização</h3>
<dl>
<dt><a class="external" href="http://www.w3.org/WAI/intro/aria.php">Uma Visão Geral das Atividades WAI-ARIA na W3C</a></dt>
<dd>Uma visão geral oficial dos esforços de padronização da WAI-ARIA pela Iniciativa de tornar a <em>Web </em>Acessível (Web Accessibility Initiative - WAI)</dd>
<dt><a class="external" href="http://www.w3.org/TR/wai-aria/">Especificações WAI-ARIA</a></dt>
<dd>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.</dd>
<dt><a class="external" href="http://www.w3.org/WAI/PF/aria-practices/">Práticas Oficiais WAI-ARIA</a></dt>
<dd>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.<br>
<br>
Por enquanto, desenvolvedores <em>web</em> que implementem ARIA devem priorizar a compatibilidade. Use as melhores documentações das práticas e exemplos baseados em implementações atuais.</dd>
<dt><a class="external" href="http://www.openajax.org/member/wiki/Accessibility">A Força-Tarefa da Acessibilidade Open AJAX</a></dt>
<dd>Os centros de pesquisa Open AJAX envolvem ferramentas de desenvolvimento, modelos de arquivos e testes automatizados para ARIA.</dd>
<dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="ARIA Techniques">Em Construção: Técnicas ARIA WCAG 2.0</a></dt>
<dd>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.</dd>
</dl>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="2">
<h3 id="Related_Topics" name="Related_Topics">Tópicos Relacionados</h3>
<dl>
<dd><a href="/en-US/docs/Accessibility" title="en-US/docs/Accessibility">Accessibilidade</a>, <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></dd>
</dl>
</td>
</tr>
</tbody>
</table>
|
